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のバケットの設定

バケットの作成

gsutil mb -c regional asia-northeast1 gs://www.example.com

デフォルトの権限の設定(一般公開)

gsutil defacl set public-read gs://www.example.com

ウェブサイトの設定(インデックスページとエラーページの指定)

gsutil web set -m index.html -e error.html gs://www.example.com

ファイルのデプロイ

gsutil -m cp -rZ * gs://www.example.com/

ファイルの削除

gsutil -m rm -rf gs://www.example.com/*

ログ出力の設定

ログ用のバケットを作成

gsutil mb gs://log-www-example-com

Googleにログ書き込み権限を付与

gsutil acl ch -g cloud-storage-analytics@google.com:W gs://log-www-example-com

パブリックアクセスできないように権限設定

gsutil defacl set project-private gs://log-www-example-com

webドキュメントのバケットに対してログ出力先のバケットを指定

gsutil logging set on -b gs://log-www-example-com gs://www.example.com

参考

まとまっていてわかりやすい
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を入れてリバースプロキシを作る
http://cameong.hatenablog.com/entry/2016/05/07/170555

Firebase Hosting

Firebase Hostingであれば独自ドメインのHTTPSを使える。しかも自動でLet’s Encryptの証明書を取得するため、最初から自動でHTTPSを使える状態になっている。設定はやや難しいが、メリットは大きいので覚えておくといい。

Firebaseの管理画面での設定

Firebaseの管理画面に左メニューから「Hosting」をクリック→右上の「ドメインを接続」からドメインを登録する

ローカルの設定

Node.jsをインストール

https://nodejs.org/

からNode.jsをダウンロードしてインストール

Firebase toolsをインストール

コマンドプロンプトを起動して

npm install -g firebase-tools

を実行

Firebase toolsでログイン

引き続きコマンドラインで

firebase login

を実行。最初の質問は「n」と答えてEnter

ブラウザが立ち上がるので
(ブラウザが開かない場合は画面に現れるURLを選択して右クリック→コピーされるのでブラウザのアドレスバーに入力)

myaccount@gmail.com

でログインしてそのまま進めて「Firebase CLI Login Successful」の画面が現れたら閉じる

作業用ディレクトリを作って移動

任意の空の作業用ディレクトリを作って(マイドキュメントの下など)、アドレスバーからそのフォルダパスをコピーする。

先のコマンドラインに続いて

cd そのディレクトリのフルパス    # Mac/Linuxの場合
pushd そのディレクトリのフルパス # Windowsの場合

を実行

Firebase toolsを設定

引き続きコマンドラインで

firebase init

を実行

十字キーでカーソルを動かして「Hosting」でReturnするとチェックが入る→Enter

Projectの選択で「delamerjp」にカーソルを合わせてEnter

「www」を入力してEnter

「Configure as a single-page app (rewrite all urls to /index.html)?」は「n」と答えてEnter

ファイルのデプロイ

アップロードするファイル一式を、作業用フォルダの下にできたフォルダ「www」の中にコピー

※ドキュメント一式のディレクトリにはfacebookの画像一式も入れておいてください

コマンドラインで

firebase deploy

を実行する。終了したらこれでコマンドプロンプトは閉じてもいい

その後はファイルを更新・追加・削除するたびに「www」の中に反映させ、コマンドプロンプトを起動して

firebase deploy

を実行すれば反映される

データ周辺の技術 の記事一覧