GitHub ActionsでNext.jsをS3にデプロイする

GitHub ActionsでNext.jsをS3にデプロイする

November 13, 2021

Next.js の Static HTML Export で生成した資産を Amazon S3 にデプロイする方法について。

昔初めて作った上記ワークフローが見つかったので、削除する前に思い出として残しておきます。

GitHub Actions のワークフロー定義ファイルだけ載せれば十分かもしれませんが、振り返りも兼ねてゼロから手順を書いておきます。

１．package.json を編集する #

npm run export で Static HTML Export されるように package.json にコマンドを追加しておきます。

（npm run build などとコマンド名は好みで変えていただいて良いですが、以降に載せている GitHub Actions のワークフローファイルは npm run export で動く前提で書いています。ここを変えた場合は以降も適宜書き換えてください。）

package.json

{
  "scripts": {
    "export": "next build && next export"
  }
}

２．GitHub Actions のディレクトリを作成する #

ルートディレクトリ直下に .github ディレクトリを、その中に workflows ディレクトリを作成します。

└ .github/
  └ workflows/

３．ワークフロー定義ファイルを作成する #

上記で作成したディレクトリの中に定義ファイルを作成します。（deploy.yml の名称は任意です）

└ .github/
  └ workflows/
    └ deploy.yml

deploy.yml

name: Deploy to Amazon S3

on:
  push: # プルリクのマージもプッシュと同じ
    branches: [main] # ワークフロー起動対象のブランチ

jobs:
  deploy: # ジョブ名(名前は任意)
    runs-on: ubuntu-latest
    timeout-minutes: 10 # デフォルトは360（6時間）のため短い時間で設定しておく
    env:
      NODE_ENV: production

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 15.x
        run: npm ci
        run: npm run export

      - 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: ap-northeast-1
        run: aws s3 sync ./out s3://${{ secrets.AWS_BUCKET_NAME }}

４．デプロイ用ユーザを AWS IAM で作成する #

GitHub から S3 へのデプロイを実行するユーザを作成します。

AWS にログインし IAM からユーザを追加します。ポリシーは以下とします。

（デプロイ先の S3 バケット名を example-bucket としている場合の例です）

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:ListBucket", "s3:GetObject", "s3:PutObject", "s3:DeleteObject"],
      "Resource": ["arn:aws:s3:::example-bucket", "arn:aws:s3:::example-bucket/*"]
    }
  ]
}

５．GitHub リポジトリにシークレットを設定する #

ここで設定した内容は deploy.yml にて参照されます。具体的には deploy.yml の以下にシークレットが反映されます。

${{ secrets.AWS_ACCESS_KEY_ID }}
${{ secrets.AWS_SECRET_ACCESS_KEY }}
${{ secrets.AWS_BUCKET_NAME }}

GitHub にログインし、リポジトリのページからシークレットを設定します。

Settings > Secrets > New repository secret

以下３つを追加します。

  • Name: AWS_ACCESS_KEY_ID
  • Value: ********

Value には先ほど作った IAM ユーザの アクセスキー ID を設定します。

  • Name: AWS_SECRET_ACCESS_KEY
  • Value: ********

Value には先ほど作った IAM ユーザの シークレットキー を設定します。

  • Name: AWS_BUCKET_NAME
  • Value: ********

Value にはデプロイ先バケット名を設定します。（例：example-bucket）

以上 #

あと deploy.yml で指定した対象ブランチ（今回で言えば main）に対してプッシュがあればワークフローが動き出し、S3 へのデプロイまで完了するはずです。

GitHub リポジトリの Actions タブからワークフローの状況が確認できるため、うまくいかない時にはこちらをご参照ください。

FYI #