---
title: "Google Cloud Storageで静的Webサイトを公開する！ | grasys blog"
url: "https://blog.grasys.io/post/yusukeh/google-cloud-storage-static-website"
description: "けっこういろんな人に聞かれるのでどうやるかを説明します。 ぶっちゃけこれ聞かれることが多いのでCloud DNS書きました！ｗ Google Cloud Storageではaclを公開に設定し websiteの設定を入れることで簡単に静的Webサイトを構築することができます。 自分のgrasys.ioの会社サイトもGoogle Cloud Storageで公開してます。 grasys.ioでGoogle Cloud StorageのBu…"
---

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

-   ![](/_astro/noicon.CTHOhNiB_1HMs6A.webp)[yusukeh](/authors/yusukeh/)
-   公開日：2015年3月19日
-   カテゴリー：[Tech](/categories/tech/)
-   タグ：[#Google Cloud](/tags/google-cloud/)[#Cloud Storage](/tags/cloud-storage/)

![Google Cloud Storageで静的Webサイトを公開する！](/_astro/ogp.C2XcR19q_259cNb.webp)

けっこういろんな人に聞かれるのでどうやるかを説明します。  
ぶっちゃけこれ聞かれることが多いので[Cloud DNS](https://medium.com/@yusuke_h/clouddns-beta-%E3%82%92%E4%BD%BF%E3%81%86-5511afb307d9)書きました！ｗ

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

自分の[grasys.io](http://grasys.io/)の会社サイトもGoogle Cloud Storageで公開してます。

grasys.ioでGoogle Cloud StorageのBucketにCNAMEするのではなく  
[www.grasys.ioをCNAMEでGoogle](http://www.grasys.io%E3%82%92CNAME%E3%81%A7Google) Cloud Storageへ向けて  
grasys.ioからは  
GoogleApps for Worksのリダイレクト設定をwww.grasys.ioにしてます。

Documentは以下

[Google Cloud Storage / Bucket and Object Naming Guidelines  
Bucket Name Verification](https://cloud.google.com/storage/docs/bucket-naming#verification)

やることは簡単

1.  [Google Webmaster Tools](https://www.google.com/webmasters/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/](https://www.google.com/webmasters/tools/)

![Google Webmaster Toolsでドメインのオーナーである設定をする画面（2）](/_astro/image-02.CpWQEvLW_1K3kHf.webp)

Google Webmaster Tools add site

サイトのURL入力

![Google Webmaster Toolsでドメインのオーナーである設定をする画面（3）](/_astro/image-03.CPXzuMvq_2qTEah.webp)

Google Webmaster Tools

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

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

![Google Webmaster Toolsでドメインのオーナーである設定をする画面（4）](/_astro/image-04.CRck7x3E_210Mim.webp)

Google Webmaster Tools

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

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

![Google Webmaster Toolsでドメインのオーナーである設定をする画面（5）](/_astro/image-05.BCxQ8wdT_2e2Wen.webp)

Google Cloud DNS

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

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

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

Plain textcontent\_copy

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

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

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

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

![Google Cloud Storageでドメイン名のBucketを作るの画面](/_astro/image-06.Dmb2Wyib_Z1eXY03.webp)

Google Cloud Storage

### 補足: gsutil

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

Plain textcontent\_copy

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

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

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

![Bucketのaclをpublic-readに設定する画面（1）](/_astro/image-07.C-W_wi6N_ZUHukP.webp)

Google Cloud Storage

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

![Bucketのaclをpublic-readに設定する画面（2）](/_astro/image-08.BYbpXYgj_Omu2U.webp)

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

### 補足: gsutil

Plain textcontent\_copy

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

## 5\. Bucketのwebを設定する！

![Bucketのwebを設定する画面（1）](/_astro/image-09.CzAyUJ1H_ZAxCzf.webp)

Google Cloud Storage

![Bucketのwebを設定する画面（2）](/_astro/image-10.DNkhqFGE_XhsXD.webp)

Google Cloud Storage

### 補足: gsutil

Plain textcontent\_copy

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

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

Macだったら[Cyberduck](https://cyberduck.io/index.ja.html)とかでUploadできます。  
ただ自分はめんどいんでCLIでやってます。

Plain textcontent\_copy

```
例）
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を変更して下さい。（けっこうハマるｗ

転載：[Google Cloud Storageで静的Webサイトを公開する！](https://medium.com/@yusuke_h/google-cloud-storage%E3%81%A7%E9%9D%99%E7%9A%84web%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B-965feafb7ca6)

この記事は [Medium（@yusuke\_h）](https://medium.com/@yusuke_h) からの転載です。

## この記事を書いた人

[![](/_astro/yusukeh.BvUd2yKE_1mQ6Fp.webp)](/authors/yusukeh/)

### [yusukeh](/authors/yusukeh/)

Fly high. Think deep. Move fast. Go far.🦅

-   [X](https://x.com/yusukeh "X")
-   [GitHub](https://github.com/yusukeh "GitHub")
-   [Medium](https://medium.com/@yusukeh "Medium")
-   [Facebook](https://www.facebook.com/yusuke.exzm "Facebook")
-   [Instagram](https://www.instagram.com/yusukehasegawa/ "Instagram")
-   [LinkedIn](https://www.linkedin.com/in/hasegawa-yusuke-091b4164/ "LinkedIn")

[プロフィールと記事一覧](/authors/yusukeh/)