*

静的HTMLをGAE上で公開する

公開日: : 最終更新日:2015/06/15 投稿者: GAE

みなさんこんにちは。
本日は、静的HTMLをGAEで公開する手順を紹介します。
本サイトを運営している弊社のコーポレートサイトも、こちらの方法を使って運営しております。
ホームページの公開、メンテナンスもGAEを使えば簡単に行う事が出来ます。

用意するもの

  • gmailアカウント
  • Eclipse

1:Gmailアカウントを取得

GAEを利用するにはGmailアカウントが必要になります。
取得はこちらより出来ます。

2:Developer Consoleでプロジェクトを作成する

アカウントを作成後、Developer Consoleに行き、プロジェクトを作成します。
Developer Console へはこちらから
[プロジェクトを作成]ボタンをクリックすると、プロジェクト名とプロジェクトIDを入力する画面が表示されます。

hog_001

プロジェクト名は、任意の名前が付けられます。
プロジェクトIDにデフォルトで名前が入っていますが、ここは変更して、プロジェクト名と同じものを入れて下さい。

理由として

  • プロジェクト名と、プロジェクトIDが相違していると、何がどれに利用されているか不明になり煩雑になってしまう
  • プロジェクトIDはドメイン名に繋がってくる (標準的なURLは http://[プロジェクトID].appspot.com になります)

という点が挙げられますので、慎重に指定しましょう。
今回は[apps-gcp]というプロジェクト名で作成していきます。

3:Eclipseを取得

開発環境ツールのEclipseを導入します。
ダウンロードはこちらから。
ご自身の環境に合わせたバージョンをダウンロードしてください。
PHP,Javaあたりはあった方が後々良いですが、htmlエディタの機能があればOKです。

4:EclipseにGoogleのプラグインを入れる

Eclipseにgoogleのプラグインを入れます。
以下から、Eclipseのバージョンにあったものをインストールしてください。
https://cloud.google.com/appengine/docs/java/tools/eclipse

5:プロジェクトを作成

GAEにHTMLをアップロードするには、Eclipse内にプロジェクトを作成する必要があります。
プロジェクト作成は、googleのマークタブ内、[新規Webアプリケーション・プロジェクト…]をクリックするとプロジェクト作成画面が開き、ここから作成可能です。

hog_002

EclipseのGAEプラグインがインストール済だと上記のGoogleマークのアイコンが出てきます。

hog_003

プロジェクト名とパッケージ名を入れます。
プロジェクト名はEclipse上でサイトを管理するときの名称になります。下の画面キャプチャの状態では、「AppsGCP」を指定しています。
パッケージ名は任意であり、静的なHTMLを配置するだけであればどこにも影響を与えません。英小文字と数字とドットが使えますが、ドット・数字は単体では使えません。
また静的なHTMLを配置するだけの場合は不要となる[Google Web ツールキットを使用]と[プロジェクト・サンプル・コードを生成する]のチェックを外しておきます。

HTMLはこのプロジェクト内に入れます。
デフォルトでは、プロジェクトのwarフォルダの下に配置する必要があります。
warフォルダの下にはWEB-INFフォルダがありますが、こちらは削除してはいけません。

6:HTMLをアップロードする

静的HTMLが完成したら、いよいよGAE環境にアップロードします。
アップロードするHTMLが入ったプロジェクトを選択し、メニューバーのgoogleタブを開き、[Appエンジンへデプロイ]をクリックします

hog_004

hog_005

出てきたウインドウの左下[App Engine プロジェクト設定…]をクリックします。

hog_006

こちらで詳細設定が可能です。
アプリケーションIDには、Developer Consoleで作成したプロジェクト名を入力します。
バージョン名は任意の名前が付けられます。ハイフン(-)は利用出来ますが、アンダーバー(_)は利用出来ません。

設定が完了したら、右下の[OK]をクリックすると、GAE上へのデプロイが開始されます。

7:デプロイ完了チェック

完了したかどうかは、GAEのコンソール上から確認する事が出来ます。

コンソールは
https://console.developers.google.com/project/プロジェクト名/appengine
で確認出来ます。
コンソール内、計算処理→App Engine→バージョンと進むと、確認する事が出来ます。

hog_007

8:バージョンの切替え

GAE上にアップロードをする際、バージョン名を指定してアップロードをする事が可能です。
バージョンの切替も簡単に行えます。
バージョン一覧は、左メニュー内、計算処理→App Engine→バージョンから確認する事が出来ます。
1番初めにアップロードしたバージョンがデフォルトになります。
後からアップロードしたバージョンは自動でデフォルトになりません。
アップロードしたバージョンをデフォルトにするには、デフォルトにしたいバージョン名の横のチェックボックスにチェックを入れ、上部の[デフォルトにする]をクリックすると、公開されるようになります。

hog_008

バージョンは10個まで作成する事が可能です。この数は、課金をすると20個となり、更にプレミアサポートに入ると60個まで増やすことが出来ます。

弊社では、完成したHTMLを別名のバージョンでアップロードしておき、社内でのレビュー完了後、OKであれば、デフォルトに切り替える事によって公開しています。
何か失敗してしまっても、以前のバージョンにすぐに切り替える事が出来るので大変便利です。

GAEは送信データ料1GB/日まで無料で使えます。
静的コンテンツの場合にはこの部分以外の課金クォータにかかることは基本的にありませんので、サイトの内容にもよりますが、ページあたりの平均サイズが100K程度であれば1万PV/日まで無料で公開可能となります。

以前、GAEに上げた静的コンテンツの負荷テストも行いました。
どれだけのアクセスに耐えられるか、過去のデータになりますが、ご参考にごらんください。

タイトル
Part1 GAE負荷テスト その1「Hello World!」
Part2 GAE負荷テスト その2「吉積情報株式会社の旧トップページ」

みなさんもサイトを作成する際はGAEを使ってみてはいかがでしょうか。

吉積情報ではGAEを活用したWebサイト開発やWebサービス開発を専門的に行っております。
是非ご興味のある方は、弊社の実績ギャラリーをご覧ください。

この記事を書いた人

kimura
kimura
Webデザイナー。本サイトの管理・デザイン担当をしております。
 

関連記事

PageSpeedの動作を検証

皆さん、こんにちは。 突然ですが、皆さんはPageSpeedというサービスをご存知でしょうか?

記事を読む

App Engine for PHP ベータ版から正式版へ

GCPBlogの記事によると App Engine for PHP(PHPアプリをGoogle Ap

記事を読む

WordPressをGAEで簡単に使う10のステップ

2015/10/05 テーマやプラグインの追加・変更方法について下部に追記しております。 み

記事を読む

東京リージョンによってGAEの速度は早くなったのか!?

ついにGAEに東京リージョンが新設されました!!サービス開始からGAEを触れていたユーザにと

記事を読む

Search API詳細解説 Part5「Search API 詳細 反映速度編」

Search API詳細解説シリーズ タイトル Part1Search API 概要説明

記事を読む

AppEngineでTwilioを試してみた(基本編)

AppEngineでTwilioを試してみた(基本編) AppEngineでTwilioを試し

記事を読む

専用Memcacheは共有Memcacheよりも本当に性能が高いのか検証する Part2

前回のGAEの「専用Memcacheは共有Memcacheよりも本当に性能が高いのか検証する」が投稿

記事を読む

Google App Engine Modules in Javaを試す WebToolsPlatform編

みなさんこんにちは。 2013年の7月に、Google App Engine1.8.2がリリー

記事を読む

東京リージョン内でのGAE・GCS・GCE間の通信はこのくらいだった

11月8日に Google Cloud Platform にて待ちに待った日本リージョンがリ

記事を読む

Prediction API入門(後編)

今回はPrediction API on GAE/J みなさん、こんにちは。Prediction

記事を読む

PAGE TOP ↑