Google でドメインを取得して GCP で静的ホスティングその1

# 経緯

仕事相手の外人が、自分の名前のドメインをとっていてかっこいいなあと思っていた。
Google がいつの間にかドメインサービスも始めていたので Google でドメイン取得して GCP でWebページ公開までやってみよう、と思ったため。

8年間支払い続けたニコニコ動画へのお布施をやめるきっかけが欲しかったという理由もある。
よく意味が分からないかもしれないが、私もこの気持ちの意味はよくわかっていない。

## 2017/1/8 追記 Firebase 使ったほうがよさそうです。

>今回はカスタムドメインで個人のページをSSLで公開するのが最終目標で、その場合 Firebase を使ったほうがよさそう。


やりたかったのは AWS だとこんな感じ
>![2018-01-08_16h46_20.png](https://qiita-image-store.s3.amazonaws.com/0/83984/dc5cdacf-26cf-cee0-0f73-bcb39d076577.png)
>AWS だと CloudFront をお手軽な SSL サイト作成に使える


この記事 + その2 で実現可能な構成
![2018-01-08_17h13_50.png](https://qiita-image-store.s3.amazonaws.com/0/83984/2fdeb7a1-ed9e-53f1-05ab-275927f06ded.png)

>GCP の Cloud CDN は LoadBalancer とセットで使うしかない。

ということで、今回の用途だと Firebase を Hosting に使って [カスタムドメインを設定する](https://firebase.google.com/docs/hosting/custom-domain?hl=ja)のがよさそう。

![2018-01-08_16h47_03.png](https://qiita-image-store.s3.amazonaws.com/0/83984/6bcc6a7d-2d0c-744d-3a9e-cdfeae2ca639.png)

参考：[Firebase Hostingで公開したWebサイトにカスタムドメインを設定するやり方](https://qiita.com/gupuru/items/dc453a15147e2e2a3578)
Simple...

せっかく調査したので、その2 までは書くかなぁ…。


## やること

基本的に CI で回せるように CLI で行う。

* 今回やること
  * ドメインは Google Domains で取得
  * Webページは GCP Storage で公開

* 次回やる予定
  * HTTPS を設定する(多分 Google Cloud CDN)
  * コンテンツは GitHub でバージョン管理し CI ツールでアップロードする

## Google Domains で ドメインの取得

CLIでやるって言ったな、ありゃ嘘だ。
ブラウザで以下のページを開く。

<https://domains.google/>

![2018-01-04_19h29_52.png](https://qiita-image-store.s3.amazonaws.com/0/83984/3a4a449e-3239-56b3-25f9-d69b207efeb9.png)

取得したいドメインを入力して、検索を押す。
個人用ドメインなので `.me` や `.life` と迷ったが、無難に `.com` を選択した。
バケットに入れて購入処理をすれば完了。

`.com`ドメインだと、通常は ￥1400/year ポッキリ

![2018-01-04_19h34_43.png](https://qiita-image-store.s3.amazonaws.com/0/83984/57b2da62-bcd6-4118-c374-a32494144529.png)

## DNS での CNAME 設定

参考：Cloud Storage >ドキュメント > [静的ウェブサイトのホスティング](https://cloud.google.com/storage/docs/hosting-static-website?hl=ja&_ga=2.96822239.-152820456.1515058369)


[Google Domains の管理画面](https://domains.google.com/registrar)で、先ほど購入したドメインの DNS アイコンをクリックする。

![2018-01-04_19h43_53.png](https://qiita-image-store.s3.amazonaws.com/0/83984/a7d0eba2-66ca-ba66-7c01-c2747885edda.png)

ページの一番下までスクロールして「カスタム リソース レコード」に GCP Storage の CNAME `c.storage.googleapis.com.` を登録する。

![2018-01-04_19h52_36.png](https://qiita-image-store.s3.amazonaws.com/0/83984/d377853f-da19-3099-cac7-6ce0518a8d8d.png)

Google Domains の設定は以上。
なぜこの CNAME を設定するだけでOKなのかはよくわからないけれど、 `c.storage.googleapis.com.` がヘッダなんかをみて良しなに処理してくれるのだろう。


## GCP Storage を作成

### Google Cloud SDK のインストール

CI のことを考えると、CLI に触れておきたい。
Google が提供している SDK に含まれる gsutil で Storage の操作ができるので、[Google Cloud SDK](https://cloud.google.com/sdk/docs/?hl=ja) をインストールする。

Scoop なら、以下のようにして GCloud SDK を落としてくる。

```ps1
# extras bucket の登録
PS> scoop bucket add extras

# gcloud sdk のインストール
PS> scoop install gcloud
Installing 'gcloud' (183.0.0) [64bit]
```

インストールが終了するとそのまま Google へのログインを促されるので、そのままログインする。

```ps1
Welcome! This command will take you through the configuration of gcloud.

Your current configuration has been set to: [default]

You can skip diagnostics next time by using the following flag:
  gcloud init --skip-diagnostics

Network diagnostic detects and fixes local network connection issues.
Checking network connection...done.
Reachability Check passed.
Network diagnostic (1/1 checks) passed.

You must log in to continue. Would you like to log in (Y/n)? #y
```

自動でブラウザが立ち上がるので、対象のGoogleアカウントでログイン

```ps1
# ログイン成功
You are logged in as: [yourmail@gmail.com].

# (デフォルト)プロジェクトの選択
Pick cloud project to use:
 [1] fir-demo-project
 [2] janken-12837
 [3] janken2-6ade1
 [4] Create a new project

# 新しいプロジェクトを作成
Please enter numeric choice or text value (must exactly match list
item): 4 

# プロジェクト名の設定
Enter a Project ID. Note that a Project ID CANNOT be changed later.
Project IDs must be 6-30 characters (lowercase ASCII, digits, or
hyphens) in length and start with a lowercase letter. 
# web-yourdomain-com など
```

適当なIDを作成。グローバルな名前なので、被っていると後ろに番号が付いたり…する？
細かい挙動はよく検証していない。

失敗したら、

```ps1
PS> gcloud init --skip-diagnostics
```

もしくは

```ps1
PS> gcloud projects create --name web-domain --set-as-defalut
```

で、設定しなおせる。

### Bucket の作成

Domain を 同一のアカウントで購入していれば、ドメイン名のバケットが作成可能。

```ps1
PS> gcloud domains list-user-verified
ID
yourdomain.com ## 購入したドメインが Verify 済みになっているはず


PS> gsutil ls gs://
BadRequestException: 400 Unknown project id: 0 # バケットが存在しない

PS> gsutil mb -c multi_regional -l asia gs://www.yourdomain.com
Creating gs://www.yourdomain.com/...

PS> gsutil ls gs://
gs://www.yourdomain.com/ # 作ったバケットが表示されていればOK
```

### htmlファイルのアップロード

とりあえずテスト用のhtmlをアップしてみる。

```ps1
# Htmlファイルの作成
> echo "Hello GCP Storage" > index.html
> echo "page not found" > 404.html

# 公開設定でアップロード
> gsutil cp -a public-read .\index.html .\404.html gs://www.haniyama.com
Copying file://.\index.html [Content-Type=text/html]...
Copying file://.\404.html [Content-Type=text/html]...
\ [2 files][   74.0 B/   74.0 B]
Operation completed over 2 objects/74.0 B.
```

とりあえず、これで `http://www.yourdomain.com/index.html` に アクセスできるようになる。
しかし、 `http://www.yourdomain.com/` にアクセスすると Access Denaied になってしまう。
そこで以下のコマンドで main_page_suffix と error_page を設定する。

```ps1
# main_page_suffix と error_page を設定
> gsutil web set -m index.html -e 404.html gs://www.yourdomain.com
```

これで `http://www.yourdomain.com/` で index.html が、 `http://www.yourdomain.com/not_exsit` で 404.html が表示されればOK

今回はここまで。