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

yusuke
6 min readMar 19, 2015

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

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/

Google Webmaster Tools
Google Webmaster Tools add site

サイトのURL入力

Google Webmaster Tools

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

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

Google Webmaster Tools

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

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

Google Cloud DNS

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

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

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

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

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

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

1と2の作業が終わるとBucketが作れるように!

Google Cloud Storage

補足: gsutil

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

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

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

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

Google Cloud Storage

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

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

補足: gsutil

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

5. Bucketのwebを設定する!

Google Cloud Storage
Google Cloud Storage

補足: 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を変更して下さい。(けっこうハマるw

--

--