GCP で静的ウェブサイトをホスティングする方法

GCP でウェブサイトを立てる場合、GCE 上で VM インスタンスを作って nginx をインストールして…みたいにやることもできるんですが、単に静的なウェブサイトを立てたい場合にそこまでやるのは面倒です。

ということで GCP 上で静的ウェブサイトを作る手順をメモしておきます

Cloud Strage バケットの作成

Cloud Storage 上にホスティング用のバケットを作ります

今回は hosting-sample という名前のバケットを作りました

このバケットに、ホスティングしたいファイル一式(HTML ファイルや CSS ファイル、JavaScript ファイル等々)をアップロードしてください。

ロードバランサの設定

次にロードバランサを作成します

「HTTP(S) 負荷分散」を選びます

「インターネットから自分の VM へ」を選びます

ロードバランサに適当な名前を付けて、

バックエンドとして「バックエンドバケット → バックエンドバケットを作成」を選びます

バックエンドバケットに適当な名前をつけて、

さきほど作ったバケットを選びます

次にフロントエンドの設定を行います

GCP のロードバランサを使うと HTTPS 用の証明書を発行してくれるので非常に助かります。証明書の管理から解放されるので。その分ロードバランサの費用はかかりますが。

「Google 管理の証明書を作成する」を選んで、取得済みのドメインを設定します。

ロードバランサの作成が終わったら、フロントエンドに設定したドメインと、フロントエンドの IP アドレスを DNS 上で紐付けて完了です。

ドメインと IP アドレスの紐付けが終わってちょっと待てば、さきほど発行した証明書が有効になります。

index.html と 404.html の設定

最後に

https://hosting-sample.com/index.html

ではなく

https://hosting-sample.com

のように「index.html」を抜かした形でアクセスされた場合でも、ちゃんと index.html が表示されるように設定します

以下のコマンドを実行すれば OK です(ファイル名は別に index.html や 404.html じゃなくても大丈夫です)

gsutil web set -m index.html -e 404.html gs://hosting-sample-bucket

念のため確認

gsutil web get gs://hosting-sample-bucket

とやったときに

{"mainPageSuffix": "index.html", "notFoundPage": "404.html"}

と表示されれば OK です

これで https://hosting-sample.com/ でアクセスしたときでも index.html が表示されるようになり、存在しないファイルにアクセスしたときには 404.html が表示されるようになります

タイトルとURLをコピーしました