G Suite と GCP Cloud Storage だけで静的サイトを https 独自ドメインで公開

# 静的ウェブサイトのホスティングをしたいんだ！！
## 要件
- ドメイン example.com を取得する
- https://example.com にアクセスできるようにする
- 静的サイトは Google Cloud Storage に保存したい

## 実現手順
### 事前準備
- G Suite のアカウント作成
- G Suite にて example.com のドメイン取得
- 作成した G Suite のアカウントにて GCP のプロジェクト作成

### ここから説明します
1. GCS (Google Cloud Storage) のバケット作成
2. 静的 IP アドレスの取得
3. DNS に A レコードの追加
4. ロードバランサの作成（合わせて Google Managed Certificates の作成）
5. コンテンツのアップロード＆外部公開
6. インデックスページとエラーページの設定

## 環境のざっくりとした全体像
上からリクエストの順をイメージしています

1. ドメインへのアクセス
    - 繋げてくれているのは：DNSのAレコード
2. IP アドレス
    - 繋げてくれているのは：GCPの設定(ロードバランサの作成で設定する)
3. ロードバランサ＆証明書
    - 繋げてくれているのは：GCPの設定＆Let’s Encrypt による認証(ロードバランサの作成で設定する)
4. GCS のコンテンツ

## 参考にしたサイト

[最新版 Google Cloud Storage \+ L7LB で独自ドメインで静的サイトホスティング SSLもイケます \- 続 カッコの付け方](http://iga-ninja.hatenablog.com/entry/2019/02/16/152844)  
このサイトが今回の手順とほぼ同じ

[静的ウェブサイトのホスティング  \|  Cloud Storage  \|  Google Cloud](https://cloud.google.com/storage/docs/hosting-static-website?hl=ja)  
https 対応した手順ではないので、注意が必要  
https 対応する場合は、ロードバランサを立てるため、バケット名がドメインと一致していなくても問題ない

[Google でドメインを取得して GCP で静的ホスティングその1 \- Qiita](https://qiita.com/watahani/items/f472b499488a1c273b27)  
上の参考サイト同様 https 対応していないが、補足情報として役に立った


# GCS (Google Cloud Storage) のバケット作成
ロケーション タイプは、想定されるアクセス元が日本だったため、 `Region`  
ロケーションは、 `asia-northeast1 (東京)`  
とした

ストレージ クラスは `Standard`  
アクセス制限は きめ細かい管理  
とした

参考：

- [ストレージ クラス  \|  Cloud Storage  \|  Google Cloud](https://cloud.google.com/storage/docs/storage-classes?hl=ja)  
- [【速報】GCP オブジェクトストレージ GCS（Google Cloud Storage）のバケット作成画面が改良！ \| apps\-gcp\.com](https://apps-gcp.com/newer-gcs/)

# 静的 IP アドレスの取得
VPCネットワーク -> 外部IPアドレス から予約可能  
グローバルアドレスとして予約

参考：

- [静的外部 IP アドレスの予約  \|  Compute Engine ドキュメント  \|  Google Cloud](https://cloud.google.com/compute/docs/ip-addresses/reserve-static-external-ip-address?hl=ja)

# DNS に A レコードの追加
[ホーム – Google Domains](https://domains.google/intl/ja_jp/)  
作成した G Suite のアカウントでログインし、 DNS のページの「カスタム リソース レコード」で A レコードの追加

```
NAME                  TYPE     DATA
@(何も入力しない)       A        xxx.xxx.xxx.xxx(先ほど取得した IP アドレス)
```

www.exapmle.com にもアクセスできるようにしたい場合は下記も追加する

```
NAME                  TYPE     DATA
www                   A        xxx.xxx.xxx.xxx(先ほど取得した IP アドレス)
```

この時点で、 http://example.com と http://example.com にアクセスできるようになる  
私の環境では、 S3 の設定 XML が表示された  
A レコードの浸透には少し時間(感覚的には數十分)がかかる

参考：

- [A レコードまたは CNAME レコードを作成する \- Google Domains ヘルプ](https://support.google.com/domains/answer/9211383?hl=ja)  
- [Google でドメインを取得して GCP で静的ホスティングその1 \- Qiita](https://qiita.com/watahani/items/f472b499488a1c273b27)

# ロードバランサの作成（合わせて Google Managed Certificates の作成）
ネットワークサービス -> Cloud CDN -> 「送信元の追加」

参考：

- [GCP managed SSL\(β版\)を利用したhttpsサーバ構築 \- Qiita](https://qiita.com/koshilife/items/a75a69d03e2524f33c8e)

## バックエンドの設定
バックエンドバケットの作成  
「Cloud Storage バケット」で、作成したバケットを選択し、参照する

## ホストとパスのルール
特に設定なし

## フロントエンドの設定
HTTPとHTTPS共に作成する  
IPアドレスはエフェメラルではなく、先ほど取得したIPアドレスにする  
HTTPSでは、証明書を作成する  
www.example.com のアクセスも https 対応したい場合、2つ証明書が必要となる  
ちょいハマった  
10 - 30 分ほどで、証明書は ACTIVE になるみたいなので、もし ACTIVE にならない場合は、エラーコードから原因を探る

参考：

- [Google Cloud Load Balancing マネージドSSL証明書の設定方法 \| あぱーブログ](https://blog.apar.jp/web/10750/)
- [SSL 証明書の作成と使用  \|  負荷分散  \|  Google Cloud](https://cloud.google.com/load-balancing/docs/ssl-certificates)

# コンテンツのアップロード＆外部公開
## サンプルファイルのアップロード
`Hello.html`

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>

    <body>
        Hello World！
    </body>
</html>
```
をバケットのルートに配置する

## 配置したファイルを外部公開する
バケットの「権限」タブから「メンバーを追加」  
`allUsers` に対し「役割」を「ストレージ」->「ストレージ オブジェクト閲覧者」を付与し、保存  

参考：

- [データの一般公開  \|  Cloud Storage  \|  Google Cloud](https://cloud.google.com/storage/docs/access-control/making-data-public?hl=ja#buckets)

# インデックスページとエラーページの設定
index.html と 404.html をアップロード  
バケットの設定から「ウェブサイトの構成を編集」にて該当の html をマッピングする

参考：

- [静的ウェブサイトのホスティング  \|  Cloud Storage  \|  Google Cloud](https://cloud.google.com/storage/docs/hosting-static-website?hl=ja)  

---
書くまでもないかもだが、後続のためメモしたので、記載
# 事前準備
## G Suite アカウントの作成
[サービス \| G Suite](https://gsuite.google.co.jp/intl/ja/features/)

必要な情報

- アカウント管理者の姓
- アカウント管理者の名
- 現在のメールアドレス
- 郵便番号
- 住所
- 電話番号
- パスワード
- 本人確認のための電話番号
- クレジットカード

## G Suite にて example.com のドメイン取得
G Suite アカウント作成時に、ドメインも取得できるので、取得する  
参考：
[Google パートナーからのドメインの購入 \- G Suite 管理者 ヘルプ](https://support.google.com/a/answer/53929?hl=ja)

## 作成した G Suite のアカウントにて GCP のプロジェクト作成
1. 作成した G Suite のアカウントにて、 [Google Cloud Platform](https://console.cloud.google.com/?hl=ja) にアクセスする
2. 無料試用を開始するために、クレジットカードを登録する
3. `My First Project` が作成されるので、プロジェクト名を適切なプロジェクト名に変更する（新しいプロジェクトを作成してもOKだが、使わない `My First Project` は削除した方が気持ち良さそう）