GAE で独自ドメインのSSL静的ウェブサイトを無料でホストする

Google App Engine（GAE）は、その名の通りウェブアプリケーションなどを公開するためのサービスなのですが、静的なウェブサイトをホスティングすることもできます。この仕組みを利用すると WEBサーバーの設定などの手間いらずで、おそらく最強のウェブサイトを簡単に立ち上げることができてしまうのです。そこで今回は、Google App Engine で独自ドメインの SSL静的ウェブサイトをホスティングする手順をまとめてみました。

Google App Engine が最強だと思う理由
利用登録から Google Cloud SDK の初期設定
静的ウェブサイトの作成
1. app.yaml の作成
2. ローカルでの動作確認
Google App Engine にアップロード
独自ドメインの設定とSSL証明書の取得
おわりに

Google App Engine が最強だと思う理由

以下が Google App Engine でホスティングする静的なウェブサイトが、個人的に最強だと思う理由です。他社のサービスでもこれらの一部には対応していますが、すべてに対応しているのは現在 Google App Engine だけです。（2017年11月26日現在）

オートスケール対応
サーバー保守不要
バージョン管理によりA/Bテストが簡単にできる
独自ドメインでもSSL証明書が無料、しかも配置や更新の手間いらず
いざとなればPHPなども使える（あたり前ですが）
CDNも使える
HTTP/2対応
アクセスが少なければ無料で使える（Always Free の使用制限）

利用登録から Google Cloud SDK の初期設定

Google App Engine の利用登録から Google Cloud SDK の初期設定までは「ゼロから始める Google App Engine の使い方（2017年）」をご参照ください。

静的ウェブサイトの作成

適当な場所に、プロジェクトIDと同じ名前のディレクトリを作成します。

$ mkdir gae-test-187019

さらにその下に静的ウェブサイト用のディレクトリを作成します。（ディレクトリ名はなんでもかまいません）ここが静的ウェブサイトのドキュメントルートになります。

$ mkdir gae-test-187019/www

app.yaml の作成

プロジェクトIDと同じ名前のディレクトリの直下に「app.yaml」という Google App Engine の設定ファイルを作成します。

設定ファイルは、YMAL（ヤムル）というフォーマットで記述します。YAMLは構文チェックが厳しいので、以下の点に気をつけると良いでしょう。

インデントの縦を合わせる（インデント幅は慣習的にスペース２つ）
キーと値の区切り文字「:」の後ろは必ず空ける（× name:foo、○ name: foo）
構文エラーになる場合は、文字列をクォートしてみる

プロジェクトIDと同じ名前のディレクトリの直下に移動します。

$ cd gae-test-187019/

静的ウェブサイトをホスティングするための設定ファイルは次のようになります。ドキュメントルートディレクトリ「www」と、ディレクトリインデックス「index.html」を下の書式で指定します。

vi app.yaml

runtime: php55
api_version: 1

handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /(.*)
  static_files: www/\1
  upload: www/(.*)

公式ドキュメント：Google App Engine で静的ウェブサイトをホストする

「[プロジェクトID]/www/」ディレクトリの下に、静的ウェブサイトのコンテンツを配置します。ディレクトリ構成は以下のようになります。app.yaml は必ず [プロジェクトID] ディレクトリの直下に置きます。www ディレクトリ下の構成には制限はありません。

[プロジェクトID]/
　├ app.yaml　←必ずこの場所に置く！
　├ www/　←この下にコンテンツを配置
　　├ index.html
　　├ img/
　　├ css/
　　├ js/

ローカルでの動作確認

Google Cloud SDK のローカル開発サーバーを起動して、静的ウェブサイトを確認することができます。

ローカル開発サーバーの起動

$ cd gae-test-187019/
$ dev_appserver.py .

以下のような表示があれば、ローカル開発サーバが起動しています。（終了する場合は [Control]+[C]）

INFO 2017-11-25 21:32:06,830 devappserver2.py:105] Skipping SDK update check.
INFO 2017-11-25 21:32:06,937 api_server.py:301] Starting API server at: http://localhost:51191
INFO 2017-11-25 21:32:07,029 dispatcher.py:251] Starting module "default" running at: http://localhost:8080
INFO 2017-11-25 21:32:07,032 admin_server.py:116] Starting admin server at: http://localhost:8000

WEBブラウザで「http://localhost:8080」にアクセスすると、「[プロジェクトID]/www/」下に配置した静的ウェブサイトのコンテンツが表示されます。

Google App Engine にアップロード

プロジェクトIDと同じ名前のディレクトリの直下に移動します。

$ cd gae-test-187019/

アップロード用のコマンドを実行します。

$ gcloud app deploy

アップロードしてよいか最終確認がされますので、よければ「Y」を入力します。

Services to deploy:
（略）
Do you want to continue (Y/n)? Y

以下のコマンドを実行すると、ブラウザが開いて静的ウェブサイトが表示されます。

$ gcloud app browse

独自ドメインの設定とSSL証明書の取得

この時点では、静的ウェブサイトのURLは https://[プロジェクトID].appspot.com/ になっていますので、これを独自ドメイン（Google App Engine ではカスタムドメインと呼ばれます）になるように設定します。

独自ドメインのSSL証明書の取得や配置については、なにもしなくてOKです。カスタムドメインを追加すれば Google App Engine が自動で SSL証明書（現時点では Let's Encrypt の証明書）を取得して配置してくれます。証明書の管理や更新もすべて Google App Engine がやってくれるので、証明書の管理の手間が一切ありません。