はぜにっき

日記です。(毎日更新ではない)

ポートフォリオサイトをAWS Amplifyに移した

dev.classmethod.jp

この前のre:Invent 2018でAWS Amplify Consoleっていうのが発表されて、丁度使う機会があったので使ってみたよ。

以前

GCPの無料枠を使って、g1-small のCompute Engineにnginxを入れて、ソースコードを中に投げて運用してました。
で、deployは 手元で npm run build して、生成された /build ディレクトリをsshでぶん投げる っていうのを雑にスクリプト書いて叩いてやってました。

まあ、それもそれで面倒なのでどこかのタイミングでgithubにpushしたら良い感じにデプロイしてくれるように仕組みを作ろうかなーと思っていたところ。

f:id:hazeblog:20181220224347p:plain:w300
あと51日で無料枠も消滅するので丁度良かった

AWS Amplify Console やるぞ

そもそもAWS Amplifyっていう静的サイトのホスティングサービスがAWSにはあって、それにいろいろ機能が付きましたよっていうのが、re:Inventで発表された内容。
その追加機能の中に、GitHub/GitLab等にpushすると勝手にデプロイしてくれるCD機能があったので、それを使っていこうという感じです。

github.com

今回デプロイするリポジトリはこれ。

手順

AWS コンソール画面のサービス一覧から AWS Amplify を選んで作成を押すと、トリガ/ソースコード元となる連携先を選ぶ画面になる

f:id:hazeblog:20181220225038p:plain:w300
BitBucketもあるよ

で、認証したらリポジトリとブランチを選んで

f:id:hazeblog:20181220225233p:plain:w400
master以外も設定できる、便利

buildの設定(create-react-appで作ってたらそのままでおっけーっぽい)をして、環境変数を設定して、

f:id:hazeblog:20181220225349p:plain:w400
確認画面

ポチッと押すと、

[f:id:hazeblog:20181220225427p:plain:w400
でぷろい開始

デプロイがはじまる。

で、うまく行ったら、デプロイ先のURLリンクが出てくるからそれを押せば、デプロイされたページが出てくる。

便利じゃん。。。

f:id:hazeblog:20181220225648p:plain:w300
ビルドがこけるとこうなります


ドメインはお名前.comで取っていたんですが、お名前.com側でDNSネームサーバをRoute53に向けて、Amplify側でドメインを設定すればおっけーでした。

お名前.com <-> Route53 の部分はこのエントリを参考にした。わかりやすい。

tech.tanaka733.net

上記エントリに従ってRoute53側でドメイン設定ができていれば、Amplify Consoleの「ドメイン設定」で連携が一瞬でできます。便利。

f:id:hazeblog:20181220230447p:plain
ドメイン設定画面


というわけで https://haze-page.tokyoAWS Amplifyに移したログでした。
サーバレスだしCompute Engineよりは安いやろ!という勘で移行したんですが実際毎月いくらぐらいの請求になるんでしょうね。

ところで、東京リージョンがまだ対応してなくてオハイオリージョンでやっているので結構遅いです。画像も小さくしてないから更に描画が遅い。。。
ちゃんとWebサービス作ってその上に乗っけるんだったらCDN必須っぽいですね。そういうのも今後やっていきたいです。