2年ほど前に Next.js + RailsでポートフォリオサイトをISR対応＆メンテナンスフリー化 しました。
当初の思惑どおり、登壇スライドや執筆記事を自動的にクローリングし、これといったメンテナンスをほとんどしないまま2年間運用することができました。
しかし、バックエンドに使っている Heroku のFreeプランが無くなってしまったことで、金銭的な運用コストがかかるようになってしまいました。
どうせお金を払うのであれば、もっと少額で運用できるだろうということで、AWSを使ったサーバーレスな環境に移行をしました。
リニューアル後のページ
見た目やコンテンツはリニューアル前とほとんど変わっていません。
ソースコード
ソースコードは以下リポジトリで公開しています。
ポートフォリオサイト(AWS Amplify)
クローラー(AWS SAM)
AWS構成
ポートフォリオサイトそのものはAWS Amplifyを使って、自分が書いた記事やスライドを収集するLambda FunctionはAWS SAMを使って構築しています。
実装上のポイント
WebアプリケーションはNext.jsを使って構築
Webアプリケーションにはリニューアル前と同様Next.jsを使用しています。画面の仕様もリニューアル前とほとんど同じなので、大半のコードを流用することができています。
APIを使ってコンテンツをfetchする部分のみ、AWS Amplifyによって自動生成されたクライアントを利用するよう修正しています。
あと、AWS AmplifyはNext.jsを使ったISRに対応しています。ポートフォリオサイトのコンテンツは頻繁には変わらないので、1時間ページの内容をキャッシュするようにしています。万が一、何かがバズってサイトへアクセスが殺到するような事態になっても安心ですね。
参考: https://aws.amazon.com/jp/blogs/news/5-next-js-features-that-are-better-with-aws-amplify/
クローラーはAWS SAMで別管理に
リニューアル前はcronによってRuby on Rails上で定義したrakeタスクを定期実行していました。今回の構成ではバックエンドサーバーであるRuby on RailsをAWS Amplifyに置き換えたため、クローラーに相当する処理はAWS Lambdaで実行することにしました。
AWS Amplifyでも Functions を利用することでAWS Lambdaのリソースを定義することが可能です。しかし、以下のような理由からAWS SAMとは別管理にしました。
- Functionsで作成する場合、AWS LambdaのランタイムにRubyを選択できない
- Amazon DynamoDBへの書き込み時の認証等がややこしくなりそう
- Webアプリケーションとは疎結合にしたい
クローラーのソースコードは以下です。
画像はStorageを使用
リニューアル前は Ruby on Railsを介してAmazon S3へ画像をアップロード していました。こちらも、Ruby on RailsをAWS Amplifyに置き換えたので、 Storage を活用してAmazon S3へアップロードする方針に変更しました。
良かった点
コストを下げられた
リニューアルから既に1ヶ月が経過したのですが、6月は$0.49で運用できていました。
コストの大半はAWS Amplifyのホスティングで、あとはECR, DynamoDBといった感じです。AWS Lambdaも1日に1回動いているはずなのですが、無料枠に収まっているようですね。
日本円で100円もかかっていない計算になるので、Herokuに比べるとかなりコストを下げることができました。
管理画面を廃止できた
リニューアル前はコンテンツを変更するための管理画面も用意していました。そのために、ユーザー認証の仕組みを考慮したり管理画面を実装したりするコストがかかっていました。
AWS Amplifyでは Amplify Studio と呼ばれる管理画面が提供されています。(以前はAmplify Admin UIと呼ばれていた機能です)
正直、コンテンツの変更は年に数回だけなので、これを使ってコンテンツを変更する運用としました。画面上でコンテンツの内容を変更できるので十分便利です。
まとめ
シンプルなWebアプリケーションであればAWS Amplifyで十分に運用できると、改めて実感させられました。お仕事でもAWS Amplifyを使うシチュエーションが徐々に増えているので、ノウハウを蓄積していきたいです。
ちなみに1年ほど前にAWS Amplifyに関する技術同人誌を書いているので、こちらも良かったら参考にしてください。
Discussion