この前のre:Invent 2018でAWS Amplify Consoleっていうのが発表されて、丁度使う機会があったので使ってみたよ。
以前
あと2ヶ月弱でGCPのクレジット消滅するからどうすっか
— はぜ (@haze_it_ac) 2018年12月20日
GCPの無料枠を使って、g1-small のCompute Engineにnginxを入れて、ソースコードを中に投げて運用してました。
で、deployは 手元で npm run build して、生成された /build ディレクトリをsshでぶん投げる っていうのを雑にスクリプト書いて叩いてやってました。
まあ、それもそれで面倒なのでどこかのタイミングでgithubにpushしたら良い感じにデプロイしてくれるように仕組みを作ろうかなーと思っていたところ。
AWS Amplify Console やるぞ
そもそもAWS Amplifyっていう静的サイトのホスティングサービスがAWSにはあって、それにいろいろ機能が付きましたよっていうのが、re:Inventで発表された内容。
その追加機能の中に、GitHub/GitLab等にpushすると勝手にデプロイしてくれるCD機能があったので、それを使っていこうという感じです。
今回デプロイするリポジトリはこれ。
手順
AWS コンソール画面のサービス一覧から AWS Amplify を選んで作成を押すと、トリガ/ソースコード元となる連携先を選ぶ画面になる
で、認証したらリポジトリとブランチを選んで
buildの設定（create-react-appで作ってたらそのままでおっけーっぽい）をして、環境変数を設定して、
ポチッと押すと、
デプロイがはじまる。
で、うまく行ったら、デプロイ先のURLリンクが出てくるからそれを押せば、デプロイされたページが出てくる。
便利じゃん。。。
ドメインはお名前.comで取っていたんですが、お名前.com側でDNSネームサーバをRoute53に向けて、Amplify側でドメインを設定すればおっけーでした。
お名前.com <-> Route53 の部分はこのエントリを参考にした。わかりやすい。
上記エントリに従ってRoute53側でドメイン設定ができていれば、Amplify Consoleの「ドメイン設定」で連携が一瞬でできます。便利。
というわけで https://haze-page.tokyo をAWS Amplifyに移したログでした。
サーバレスだしCompute Engineよりは安いやろ！という勘で移行したんですが実際毎月いくらぐらいの請求になるんでしょうね。
ところで、東京リージョンがまだ対応してなくてオハイオリージョンでやっているので結構遅いです。画像も小さくしてないから更に描画が遅い。。。
ちゃんとWebサービス作ってその上に乗っけるんだったらCDN必須っぽいですね。そういうのも今後やっていきたいです。
