みなさんこんにちは。massu159です。
今回はJAMstack構成のWebサイトを作りましたので、そのお話です。
使用技術
- Next.js
- React
- Typescript
- TailwindCSS
- eslint
- prettier
システム構成
基本的な流れとしては、microCMSでコンテンツを更新した時に、Webhookを利用してGitHub Actionsが動作します。GitHub ActionsでCI/CDを構築しており、ビルド時の静的ファイル生成からデプロイまで自動で行うことで、常に最新のコンテンツを高速かつ快適にユーザーに届けることができます。
ホスティング先
当初、ホスティング先としてはVercelを選択していましたが、再度検討を行いFirebase Hostingを採用しました。
他の候補に、
- レンタルサーバー
- Netlify
- AWS Amplify
- AWS S3
- Firebase
...
等があり、いろいろと比較しました。
まずVercelをやめた理由としては、
- サーバー費用を抑えるためです。今回は商用利用でしたので、商用利用可を条件にサーバーを選択する必要がありました。（
Vercelは商用利用の場合$20/月かかる ←ヤダ） - サーバーサイドでのデータフェッチ・レンダリングを行わず、すべてのページにSSGを採用したこと。
次にFirebase Hostingを選んだ理由としては、
- 無料枠が大きいこと。DAU（デイリーアクティブユーザー）を確認して、費用感を算出しました。他の候補としては
AWS AmplifyやS3×CloudFrontがあるが、費用面で若干Firebase Hostingが優位でした。今後DAUが大幅に増加するようであれば、AWSへ移行した方がメリットが大きいので、移行も視野に入れています。 - 全世界にCDNがあること。すべてのページが静的コンテンツで作成するので、自動的にCDNでキャッシュに保存してくれるので、レスポンスが高速になることはありがたいです。また、
Firebase Hostingの場合デプロイ時に自動でCDNのキャッシュをクリアしてくれるので、常に最新の情報を公開できます。AWS S3×CloudFrontの場合、デプロイ時に自動ではキャッシュがクリアされないので、自分でクリアする必要があり、率直に言うと、、面倒なので今回はラクさせていただきました(笑)。
GoogleのCDNのキャッシュについてはこちらを参照。
他にもドメイン費用が無料であったりと色々メリットが多かったので、Firebase Hostingにしました。
みなさんも、脳死でVercelを選んでしまう自分をぶん殴って、クライアントの要件に寄り添いながらベストを尽くしましょう。
まとめ
次回は実際にNext.jsのプロジェクト作成からCI/CDの構築までサンプルコードを使って紹介できたらと思います。