title: 雰囲気で構築するオレオレwebサイト
author: AnaTofuZ
profile: GCPUG
lang: Japanese

## 自己紹介

- 名前
	- アナグラ ( @AnaTofuZ)
- 所属
	- 琉球大学工学部情報工学科4年次
	- 並列信頼研
- 普段
	- Perlを書いています
	- Okinawa.pmやPerl入学式などやってます


<img src="DZZDN8pVQAAJv18.jpg" style="width:auto;height:200px;margin-left: auto;" alt="message">

!SLIDE
## 今回のLT

- Googleドメインを利用して独自ドメインを購入
- 静的サイトをGoogleAppEngineで公開してみた

!SLIDE
## こじつけ

**意思決定した結果をwebサイトに公開するぞ!!!**

!SLIDE
## 独自ドメイン

- 憧れの独自ドメイン
- 基本はお名前.comで買うのが主流な気がしている。
- しかしここはGCPUG

!SLIDE
## Googleドメイン!!!

<img src="images/Screen%20Shot%202018-04-15%20at%2021.02.37.png" style="width:auto;height:800px;">


!SLIDE
## Googleドメインとは

- Googleが提供をし始めたドメインサービス
- 基本料金などは他のドメインサービスと同じ
- 特徴
    - Gmailを利用する場合ドメインから直接利用できる
    - DNSもGoogleが管理
    - 管理がGoogleなので安全
    - Googleアカウントを利用しての共同管理が可能
    - GoogleAppEngineなどと組み合わせることが手軽にできる

!SLIDE
## ドメイン購入

- Google検索の用に購入できるドメインが選択可能
- 購入するドメインは自動更新のオプションを付けることが可能
![](images/Screen%20Shot%202018-04-16%20at%2012.19.43.jpg)

!SLIDE
## 登録はほぼワンクリック
- クレジットカードでお支払さえできればほぼワンクリック
- 買ってすぐにwebサイトを構築することやメールの設定も可能
![](images/Screen%20Shot%202018-04-16%20at%2012.21.32.jpg)

!SLIDE
## ここまででドメインは手に入った

!SLIDE
## webサービスの構築
- 自前の静的ファイルを置く程度で問題はない
- プレゼンでの発表資料などを別途起きたいので拡張性も欲しい
- かと言ってsinatraなどでのwebアプリを書くほどでもない

!SLIDE
## 戦略
- hugoやHexoなどの静的サイトジェネレーターで良い感じに作る
- 作ったものをAppEngineに乗っける
- 完成!!!!

!SLIDE
**いやまてよ……**

!SLIDE
**AppEngine高いな…?**

!SLIDE 
**そういえばA◯SではS3で静的サイトがホスティングできたな…???**

!SLIDE
![](https://o3vdxh6s.user.webaccel.jp/wp-content/uploads/2017/07/ogp-gcs.png)

!SLIDE
## GoogleCloudStrage
- Googleで静的サイトをホストする際に使える奴
- 今回はGoogleドメインでドメインを購入しているので手続きが楽
    - 具体的に言うと「ドメインの所有権系の手続き」をしなくていい
- 残念ながらhttpsには対応していない?
    - CloudFlare使えばできそうですが今回は省略

!SLIDE
## バケットを作成する
- GoogleCloudStrageの保存単位であるバケットを作成
- **バケット名はドメインでなければホスティングされない**
- 今回は`www.anatofuz.net` で作成
- リージョンは「アジア」を選択
<img src="images/backet.jpg" style="width:auto;height:500px;">

!SLIDE
## ハマリポイント

- GoogleCloudStrageは今のところトップレベルドメインに対応していない
- その為 `anaofuz.net` でバケット作ると死ぬぞ!!!!気をつけろ!!!!
- `www.anatofuz.net` で強い意志を持ってバケットを作る
- `anatofuz.net`にアクセスするとリダイレクトされる
    - 今回は念のために `anatofuz.net` のバケットも作成している

!SLIDE
## DNSの設定

- CloudDNSから設定する

<img src="images/r1.jpg" style="width:auto;height:500px;">

!SLIDE
## DNSの設定
- この辺をGoogleドメインの方に設定する
<img src="images/r2.jpg" style="width:auto;height:500px;">

!SLIDE
## CANEMエイリアスの設定

- `c.storage.googleapis.com.` をCNAMEのエイリアスに設定する

!SLIDE
## CUIからの操作

- `gsutil` を使う
    - 何故かPython2系で書かれていて不安がある
- `gsutil rsync -R public gs://anatofuz.net`
    - ディレクトリごと転送
- `gsutil iam ch allUsers:objectViewer gs://www-anatofuz-net`
    - 全てをpublickに公開

!SLIDE
## viewの設定

- 何を表示するかを設定する必要がある

![](images/webs.jpg)

!SLIDE
## SUCESS!!

![](images/CrGRgQ_UsAELCN3.jpg)

!SLIDE
## まとめ

- わりと簡単に作れる
- あなたとGoogle今すぐ静的サイト