Googleクラウドで格安お手軽スケーラブルな静的ウェブ配信
概要
Google Cloud Platformの静的コンテンツ配信機能は低コストで手軽に使うことができる。サーバサイドプログラム（PHPなど）のかかわらない静的ウェブサイトの配信（HTML＋CSS＋JavaScript＋画像＋動画など）だけであれば、ApacheやNginxなどのウェブサーバなど不要でできてしまう。スケーラブルでトラフィックによるサーバ負荷を気にする必要がない低コストの環境が簡単に使える。WordPressでも静的配信をしているのであれば相性がいい。キャンペーンのランディングページなどもこれで十分なケースがほとんどである。 この記事ではGoogle Cloud Storageを使った簡単な方法と、少し高度にはなるが独自ドメインのHTTPSにも対応したFirebase Hostingを使った方法を紹介する。
Google Cloud Storageを使う方法
簡単ではあるが、独自ドメインを使ったHTTPSでのウェブ配信ができない。HTTPSを使うのであればGoogleの決められたドメインを使うか、独自ドメインを使うならHTTPのみになる。
ドメインの設定
ドメインのオーナーであることを認証
https://cloud.google.com/storage/docs/domain-name-verification?hl=ja GCSユーザの権限でサーチコンソールで新規にサイトを登録して認証することになる（すでに他のユーザでサーチコンソール登録していてもそれとは無関係にできる） https://www.google.com/webmasters/verification/details?hl=en&domain=[YOUR-DOMAIN.COM] DNSで親ドメインのTXTレコードに入れる文字列を取得
DNSの設定
親ドメインのTXTレコードとして上で取得した文字列を、ホスティングするサブドメインのCNAMEレコードとして「c.storage.googleapis.com.」を登録
Google Cloud Storageの設定
GCSのバケットの設定
バケットの作成
デフォルトの権限の設定（一般公開）
均一なバケットレベルアクセスが標準のため、IAMでallUsersにobjectViewerロールを付与する。gsutil defacl set public-readは非推奨。
ウェブサイトの設定（インデックスページとエラーページの指定）
ファイルのデプロイ
ファイルの削除
ログ出力の設定
ログ用のバケットを作成
Googleにログ書き込み権限を付与
パブリックアクセスできないように権限設定
webドキュメントのバケットに対してログ出力先のバケットを指定
参考
まとまっていてわかりやすい https://blog.apar.jp/web/7745/
Googleのヘルプ
静的ウェブサイトのホスティング https://cloud.google.com/storage/docs/hosting-static-website?hl=ja 静的ウェブサイトの設定例、トラブルシューティング、ヒント https://cloud.google.com/storage/docs/static-website?hl=ja アクセスログとストレージログ https://cloud.google.com/storage/docs/access-logs?hl=ja
HTTPS対応
上記の方法ではHTTPSに非対応。このような方法もあるが、Firebase Hostingを使うのがおすすめ。 GCEにnginxを入れてリバースプロキシを作る https://cameong.hatenablog.com/entry/2016/05/07/170555
Firebase Hosting
Firebase Hostingであれば独自ドメインのHTTPSを使える。しかも自動でLet’s Encryptの証明書を取得するため、最初から自動でHTTPSを使える状態になっている。設定はやや難しいが、メリットは大きいので覚えておくといい。
Firebaseの初期設定
Hostingを使う前にFirebase自体の初期設定が必要となる、。
Firebaseのプロジェクトを作る
なければ作る。GoogleアナリティクスはGA4に完全移行済み。 https://console.firebase.google.com/
ドメインの設定
Firebase Hostingはデフォルトで
プロジェクト名.web.appプロジェクト名.firebaseapp.com
というドメインでアクセスできる。これに自社ドメインを追加で割り当てる。 Firebaseの管理画面に左メニューから「Hosting」をクリック→右上の「ドメインを接続」からドメインを登録する。ドメインを入力するとDNSを設定方法のダイアログが出るので、このとおりDNS設定を行う。
https://marketechlabo.com/とhttps://www.marketechlabo.com/のいずれでもアクセスできるようにする場合、wwwの有無両方のドメインを割り当てる。
https://marketechlabo.com/からhttps://www.marketechlabo.com/にリダイレクトする場合はドメイン右のケバブアイコンから「編集」をクリックし、
Firebase CLIのインストール
Node.jsがなければ先にインストールしておく https://nodejs.org/ からNode.jsをダウンロードしてインストールする。 Firebase CLIはコマンドプロンプトを起動して
を実行してインストールする。
Firebase CLIのログイン
引き続きコマンドラインで
を実行。最初の質問は「n」と答えてEnter。 ブラウザが立ち上がるのでFirebaseのプロジェクトを作成したGoogleアカウントでログインしてそのまま進めて「Firebase CLI Login Successful」の画面が現れたら閉じる。 なおリモートのコンピュータにインストールする場合など、webブラウザを起動することができない場合はこの方法がとれない。その場合は
を実行する。画面に現れるURLをローカルのブラウザからアクセスし、画面での認証を済ませた後に表示される認証コードを先のコマンドの続きに貼り付けると認証が完了する。
Firebaseのプロジェクトディレクトリの作成
FirebaseではHostingに限らず、Firebase CLIをインストールしたコンピュータでプロジェクトのディレクトリを作ってその中にHostingで配信するファイルやその他の用途（Cloud Functionsなど）のファイルを配置する。ここではホームディレクトリ（Windowsはマイドキュメント）配下に作る。
Firebaseの初期化
プロジェクトのディレクトリで初期化コマンドを実行する。 linuxの場合
Windowsの場合
- 十字キーでカーソルを動かして「Hosting」でReturnするとチェックが入る→Enter
- 「Use an existing project」にカーソルを合わせてEnter
- Projectの選択で先ほど作成したプロジェクト名にカーソルを合わせてEnter
- 「What do you want to use as your public directory?」に対しては、ホスティングするファイルを格納するディレクトリ（
/home/myuser/myproject/XXXXXやc:\Users\myuser\Documents\myproject\XXXXXのXXXXXの部分）を入力してEnter（ここではデフォルトのpublicとする） - 「Configure as a single-page app (rewrite all urls to /index.html)?」は「N」と答えてEnter
Hostingを使う
ファイルのデプロイ
アップロードするファイル一式を、配信コンテンツ設置用フォルダ/home/myuser/myproject/public / c:\Users\myuser\Documents\myprojectの中にコピー
コマンドラインで
を実行する。これでデプロイは完了する。その後はファイルを更新・追加・削除するたびにpublicの中に反映させ、このデプロイコマンドを実行する。
--only hostingを付けるのはHostingの機能のみのデプロイをするため。これを付けないとFirebaseの他の機能（Cloud Functionなど）のファイルもデプロイされてしまう（余計な処理が発生する）