静的HTMLをGAE上で公開する

ご注意

この記事は 2015年4月30日 に書かれたものです。内容が古い可能性がありますのでご注意ください。

みなさんこんにちは。
本日は、静的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に上げた静的コンテンツの負荷テストも行いました。
どれだけのアクセスに耐えられるか、過去のデータになりますが、ご参考にごらんください。

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

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

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

Google のクラウドサービスについてもっと詳しく知りたい、直接話が聞いてみたいという方のために、クラウドエースでは無料相談会を実施しております。お申し込みは下記ボタンより承っておりますので、この機会にぜひ弊社をご利用いただければと思います。

無料相談会のお申込みはこちら