title: 雰囲気で構築するオレオレwebサイト
author: AnaTofuZ
profile: GCPUG
lang: Japanese
## 自己紹介
- 名前
- アナグラ ( @AnaTofuZ)
- 所属
- 琉球大学工学部情報工学科4年次
- 並列信頼研
- 普段
- Perlを書いています
- Okinawa.pmやPerl入学式などやってます
!SLIDE
## 今回のLT
- Googleドメインを利用して独自ドメインを購入
- 静的サイトをGoogleAppEngineで公開してみた
!SLIDE
## こじつけ
**意思決定した結果をwebサイトに公開するぞ!!!**
!SLIDE
## 独自ドメイン
- 憧れの独自ドメイン
- 基本はお名前.comで買うのが主流な気がしている。
- しかしここはGCPUG
!SLIDE
## Googleドメイン!!!
!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` で作成
- リージョンは「アジア」を選択
!SLIDE
## ハマリポイント
- GoogleCloudStrageは今のところトップレベルドメインに対応していない
- その為 `anaofuz.net` でバケット作ると死ぬぞ!!!!気をつけろ!!!!
- `www.anatofuz.net` で強い意志を持ってバケットを作る
- `anatofuz.net`にアクセスするとリダイレクトされる
- 今回は念のために `anatofuz.net` のバケットも作成している
!SLIDE
## DNSの設定
- CloudDNSから設定する
!SLIDE
## DNSの設定
- この辺をGoogleドメインの方に設定する
!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今すぐ静的サイト