Google Cloud Storageで静的Webサイトを公開する！

yusuke

·

Follow

6 min read

·

Mar 19, 2015

--

Share

けっこういろんな人に聞かれるのでどうやるかを説明します。
ぶっちゃけこれ聞かれることが多いのでCloud DNS書きました！ｗ

Google Cloud Storageではaclを公開に設定し
websiteの設定を入れることで簡単に静的Webサイトを構築することができます。

自分のgrasys.ioの会社サイトもGoogle Cloud Storageで公開してます。

grasys.ioでGoogle Cloud StorageのBucketにCNAMEするのではなく
www.grasys.ioをCNAMEでGoogle Cloud Storageへ向けて
grasys.ioからは
GoogleApps for Worksのリダイレクト設定をwww.grasys.ioにしてます。

Documentは以下

Google Cloud Storage / Bucket and Object Naming Guidelines
Bucket Name Verification

やることは簡単

1. Google Webmaster Toolsでドメインのオーナーである設定をする！
2. DNSでCNAMEとしてGoogle Cloud Storageへ向ける！
3. Google Cloud Storageでドメイン名のBucketを作る！
4. Bucketのaclをpublic-readに設定する！
5. Bucketのwebを設定する！

1. Google Webmaster Toolsでドメインのオーナーである設定をする！

https://www.google.com/webmasters/tools/

サイトのURL入力

いくつか方法が用意されていますが静的HTMLをUploadする方法はそもそもBucketの許可ができてないので不可能です。

ここではDNSのTXT Recordで行います。

自分の場合はGoogle Cloud DNSを利用しているので”その他”を選択

出てきた文字列（左図ではモザイクが入っています）をそのドメインのTXT Recordとして登録します。

※TXTデータはダブルコーテーションで囲ってあげて下さい。

上記の作業でドメインのオーナー設定は以上！

2. DNSでCNAMEとしてGoogle Cloud Storageに向ける！

例）
[subdomain] CNAME c.storage.googleapis.com.

※自分はGoogle Cloud DNSで設定してます。

3. Google Cloud Storageでドメイン名のBucketを作る！

１と２の作業が終わるとBucketが作れるように！

補足: gsutil

個人的にめんどくさいんでCLIも

例）
gsutils mb -c STANDARD-l ASIA gs://test.xxxx.jp

4. Bucketのaclをpublic-readに設定する！

通常Google Cloud StorageではBucketを作っても公開にならないので一つ設定を入れてあげる必要があります。

オブジェクトの規定の権限を編集を選択

ユーザーを選択して
allUsersを入力

補足: gsutil

例）
gsutil defacl set public-read gs://test.xxxx.jp

5. Bucketのwebを設定する！

補足: gsutil

例）
gsutil web set -m index.html -e error.html gs://test.xxxx.jp

これで完了！
あとはコンテンツをUploadするだけ！

MacだったらCyberduckとかでUploadできます。
ただ自分はめんどいんでCLIでやってます。

例）
gsutil -m cp -R -z js,css,html ./htdocs/* gs://test.xxxx.jp

multiでuploadと圧縮オプションとかつけてます。
gsutil rsyncだと圧縮できないため
静的サイトのコンテンツデータなのでcpでやってます。

※Google Cloud StorageはEdgeCacheに乗るので頻繁にファイル更新する場合HTTP Headerのmetadataを変更して下さい。（けっこうハマるｗ