2025-05-04
CloudFront + S3 (SSG) + GitHub Actionsへ移行した話
これまでNext.jsで構築したサイトをVercelでホスティングしていましたが、今後のサイトの運営を考えると、ホスティングコストが気になるようになってきました。そこで、よりコスト効率の高いホスティング方法を検討した結果、CloudFront + S3 を利用した静的サイトジェネレーション（SSG）によるホスティング構成へと移行することを決断しました。
本記事では、その移行の背景から具体的な手順、そして Contentful のWebhook と GitHub Actions を連携させた自動デプロイの仕組みについて詳しく解説します。コスト削減だけでなく、コンテンツ更新時の開発効率向上も実現できた、この移行の全貌をご覧ください。
Vercelは、その優れた開発体験と簡単なデプロイフローで非常に魅力的なプラットフォームです。しかし、サイトのトラフィックが増加するにつれて、ビルド時間やサーバーレス関数の実行回数に応じたコストが無視できなくなってきました。
一方、Next.jsはSSG（Static Site Generation）を強力にサポートしており、事前に静的なHTMLファイルを生成することで、高速な配信と低いサーバー負荷を実現できます。静的なファイルであれば、安価なオブジェクトストレージである Amazon S3 と、高速なコンテンツ配信ネットワークである Amazon CloudFront を組み合わせることで、非常にコスト効率の高いホスティングが可能になります。
移行後のホスティング構成は以下の通りです。
コンテンツ管理:Contentful
サイトジェネレーション:Next.js (SSG)
ホスティング:Amazon S3
コンテンツ配信:Amazon CloudFront
デプロイ自動化:GitHub Actions
Webhook連携:Contentful
この構成により、コンテンツの更新はContentfulで行い、その変更をWebhookでトリガーしてGitHub Actionsが自動的にサイトをビルド・デプロイする流れを実現します。
今回の移行で特に重要な役割を果たすのが GitHub Actions を利用したデプロイパイプラインです。
ContentfulのWebhook設定:
Contentfulでコンテンツが更新・公開された際に、特定のURL（GitHub Actionsのディスパッチイベントエンドポイント）へPOSTリクエストを送信するように設定します。
GitHub Actionsのワークフロー:
ContentfulからのWebhookを受け取るトリガーを設定します。
Next.jsプロジェクトをチェックアウトします。
必要な依存関係をインストールします。
コマンドを実行して静的なHTMLファイルを生成します。
生成されたファイルをAWS CLIなどを利用してS3バケットへアップロードします。
必要に応じてCloudFrontのキャッシュを無効化します。
この自動化により、Contentfulでの作業に集中でき、デプロイ作業から解放されました。
CMSである Contentful との連携には、Webhook機能を活用します。Contentfulでコンテンツが公開されたタイミングでGitHub Actionsのワークフローを起動することで、常に最新のコンテンツが反映された静的サイトを自動的にデプロイできます。
Webhookの設定方法や、GitHub ActionsでのWebhookイベントの受け取り方についても詳しく解説します。
この構成に変更することで、以下のようなメリットが得られました。
大幅なコスト削減:
サーバーレス環境と比較して、S3のストレージコストとCloudFrontの配信コストは一般的に低く抑えられます。
高速なコンテンツ配信:
CloudFrontのエッジロケーションにより、世界中のユーザーに対して高速かつ低遅延でコンテンツを配信できます。
高い可用性と耐久性:
S3の高い可用性と耐久性により、安定したサイト運用が可能です。
開発効率の向上:
GitHub ActionsとContentfulの連携により、デプロイ作業が自動化され、開発者はより重要なタスクに集中できます。
具体的なコスト削減効果についても、Vercel利用時との比較データを交えながら紹介する予定です。
ここでは、GitHub Actionsのワークフローの具体的な記述例や、AWS CLIを使ったS3へのデプロイ方法、CloudFrontのキャッシュ無効化設定など、具体的なデプロイ手順についてはそれぞれ記事にまとめます。 今回は利用しているGithubActionsのworkflowを公開します。
on:
push:
branches:
- main
repository_dispatch:
types: [contentful-update]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 'lts/*'
- name: Install dependencies
run: npm install
- name: Build Next.js app
run: npm run build
env:
CONTENTFUL_SPACE_ID: ***************
CONTENTFUL_ACCESS_KEY: ***************
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN: ***************
CONTENTFUL_ENVIRONMENT: master
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }} # S3バケットがあるリージョンを指定
- name: Deploy to S3
run: aws s3 sync ./out s3://${{ secrets.AWS_S3_BUCKET_NAME }} --delete
# --delete オプションは、S3から存在しないファイルを削除します。必要に応じて追加・削除してください。
- name: Invalidate CloudFront cache (optional)
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths '/*'VercelからCloudFront + S3 (SSG) + GitHub Actionsへの移行は、コスト削減と開発効率の向上という点で大きな成果をもたらしました。特にContentfulとのWebhook連携による自動デプロイの仕組みは、今後のサイト運用において非常に重要な役割を果たすと考えています。
今後は、さらなるパフォーマンス改善やセキュリティ対策についても検討していきたいと考えています。
Recommend Books
