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

GAE で独自ドメインのSSL静的ウェブサイトを無料でホストする
あぱーブログ
2017年11月26日  カテゴリー:WEB  タグ: , ,
Pocket
LINEで送る

Google App Engine(GAE)は、その名の通りウェブアプリケーションなどを公開するためのサービスなのですが、静的なウェブサイトをホスティングすることもできます。この仕組みを利用すると WEBサーバーの設定などの手間いらずで、おそらく最強のウェブサイトを簡単に立ち上げることができてしまうのです。そこで今回は、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は構文チェックが厳しいので、以下の点に気をつけると良いでしょう。

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

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

$ cd gae-test-187019/

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

vi app.yaml

公式ドキュメント: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 ではカスタムドメインと呼ばれます)になるように設定します。

アップロードした静的ウェブサイト(URLが 〜 appspot.com)

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

カスタムドメインの追加

App Engine のコンソール画面で「設定」をクリックします。

App Engine のコンソール画面

「カスタムドメイン」タブを選択して「カスタムドメインを追加」をクリックします。

カスタムドメインの設定画面

カスタムドメインを入力して「確認」をクリックすると、ウェブマスターセントラルの管理画面が開いてドメイン所有権の確認がはじまります。

カスタムドメインを入力

下のような画面が開いていればOKです。

ウェブマスターセントラルのドメイン所有権の確認画面

ドメイン所有権の確認

ドメイン名プロバイダは一番下の「その他」を選択し、表示されたTXTレコードをDNSサーバーに追加します。TXTレコードが追加できない場合は「CNAME レコードを追加する」をクリックします。

ドメイン所有権確認用のTXTレコード表示

表示されたCNAMEレコードをDNSサーバーに追加します。

ドメイン所有権確認用のCNAMEレコード表示

(サンプル)上の CNAMEレコードを Amazon Route 53(DNSサーバー)に追加する場合は以下のようになります。

Amazon Route 53 に  CNAMEレコードを追加

TXTレコードもしくはCNAMEレコードをDNSサーバーに追加し、「確認」ボタンをクリックすればドメイン所有権が確認されます。画面を閉じて App Engine のコンソール画面に戻りましょう。

ドメイン所有権の確認完了

カスタムドメインの追加(つづき)

App Engine のコンソール画面に戻ったら「ドメインを更新」をクリックします。

ドメインを更新をクリック

App Engine 側でも入力したカスタムドメインの所有権が確認されますので「続行」をクリックしてください。

ドメインの所有権の確認完了

続いてマッピングの設定です、ここで表示されているドメインとサブドメインの証明書が取得されます。今回はサブドメイン www の証明書は必要ないので、削除してから「マッピングを保存」をクリックします。

証明書を取得するドメインの指定

間違いがなければ「続行」をクリックします。

マッピングの確認画面

表示されているカスタムドメインの Aレコードおよび AAAAレコードを DNSサーバーに追加したら「完了」をクリックします。(証明書の取得処理が開始します)

カスタムドメインの Aレコードおよび AAAAレコード

SSLセキュリティ列の表示が「Googleが管理、自動更新」と表示されれば設定完了です。今回は15分くらいで証明書の取得と配置が完了しました。(これは Aレコードおよび AAAAレコードの追加がどの程度で反映されるかにもよると思います)

カスタムドメインの Aレコードおよび AAAAレコード

設定が完了すると、カスタムドメイン(独自ドメイン)で静的ウェブサイトがHTTPS表示できるようになります。

アップロードした静的ウェブサイト(URLが独自ドメイン)

おわりに

まったくのゼロから Google App Engine で静的ウェブサイトのホスティンングをするのは少し大変ですが、オートスケールで突発的なアクセスにも対応できますし、なによりサーバーの保守から完全に解放されるのはありがたいですね。

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です