2024.7.29

Next.js(SSG)+WP RESTAPI+AmazonS3の静的配信サイトを作ってみよう②デプロイ環境構築

1 Next.js+WP REST API + Amazon S3 の静的配信でWebメディアを作ってみたい
2 第一回記事の振り返り
3 AWSのアカウントを作って、Amazon S3にデプロイする準備を行う
4 Github Actions でNext.jsでSSG静的配信サイトをAmazon S3にデプロイ
5 まとめ

Next.js+WP REST API + Amazon S3 の静的配信でWebメディアを作ってみたい

Next.js＋WP REST API + Amazon S3で静的配信サイトを作るための環境構築についてご紹介しました。

Next.js(SSG)+WP RESTAPI+AmazonS3の静的配信サイトを作ってみよう①開発環境構築

第二回の本記事では、Amazon S3 で静的配信を行うための準備をしていきたいと思います。

第一回記事の振り返り

第一回記事では、Next.js の開発環境構築手順（といっても、node.js の環境があればそこまで難しくもないですが…）や、WP REST API で記事情報を取得するための準備を行いました。また、なぜこの環境で制作を試行錯誤してみるか、について解説しました。この点は大事なポイントなので改めて述べておきますと、WordPressのシェアが大きい中で、WordPressで蓄積したコンテンツは活かしつつ静的サイト配信によるセキュリティ向上施策が今後価値に繋がるのでは、という点があります。

AWSのアカウントを作って、Amazon S3にデプロイする準備を行う

Amazon S3 で静的ウェブサイトをホスティングする場合のチュートリアルが公開されています。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html

こちらのStep1～7（クリーンアップは不要ですね）を実施して、index.html が謎の長ったらしいURL文字列で表示されることを確認しましょう。独自ドメインで作成したindex.html を表示するには、他にも色々と設定が必要となるため、まずはhtml表示まで実施できることを確認しましょう。

※index.html のサンプルも上記チュートリアルに記載されています

Github Actions でNext.jsでSSG静的配信サイトをAmazon S3にデプロイ

Next.js でSSG（Static Site Generation）で生成したサイトをAmazon S3でデプロイする方式を実現したいと思います。まずは、Next.js の設定をSSGにするため、next.config.mjs で output の設定に’export’を追記します。

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
};

export default nextConfig;

これにより、next build するとSSGでの静的サイト生成モードとなります。なおこちらの記法はNext.js v13.3以降での環境となっています。デフォルトで”out”フォルダが作られ、その中に静的ウェブページ一式がビルドされて生成されます。

これらのoutフォルダの中身を、Github Actions でブランチにコミットされた時にAmazon S3へデプロイするymlファイルを生成します。参考までに、簡単なymlのサンプルを下記に紹介します。GithubやAWSの仕様変更などで、この内容がそのまま利用できるとは限りませんのでその点はご了承ください。

name: Deploy to S3

on:
  push:
    branches:
      - main  # main ブランチにプッシュされたときに実行するという定義例

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@main
      - name: Install dependencies
        run: npm install
      - name: Build the project
        run: npm run build
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Sync S3 bucket
        run: |
          aws s3 sync ./out s3://[Amazon S3のバケット] --delete
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

aws s3 sync を利用することで、./out ディレクトリとS3のバケットを同期させることができます。これにより、都度生成されたファイルの過去のものは削除されるため、バケット内のファイルが増え続けることが回避できます。

なお、ACCESSKEY については、それぞれAWS側で作成してくださいね。IAMでgithub actions 用のユーザーを登録し、S3へのアクセス権限を付与するといいでしょう。

github action 実施後に、Amazon S3 へ各種ファイルがデプロイされていれば、設定完了です。