Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする

GitHub Actionsを利用するとNuxt.jsやNext.jsなどで作成したWebアプリケーションを簡単にAWS S3にデプロイすることができます。

AWS S3にアップできるIAMユーザーを作成する

まずはAWSの管理画面からAWS S3にデプロイ可能なIAMポリシーとIAMユーザーを作成しましょう。

IAMポリシーは作成画面でJSONを指定することで、当該S3バケットを操作可能なポリシーを作成します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::[バケット名]",
                "arn:aws:s3:::[バケット名]/*"
            ]
        }
    ]
}

IAMユーザーはアクセスの種類を「プログラムによるアクセス」を選択して、アクセス権の設定では既存のポリシーを直接アタッチを選択して先程作成したIAMポリシーにチェックを入れます。

これでAWS S3にデプロイ可能なIAMユーザーが作成できますのでアクセスキーIDとシークレットアクセスキーをメモしておきましょう。

GitHub ActionsにAWS S3にデプロイ設定をする

まずはGitHubの管理画面からSecretsとしてAWSの情報を登録します。
今回は以下のように設定しましょう。

S3_ACCESS_KEY_ID　: アクセスキーID
S3_SECRET_ACCESS_KEY : シークレットアクセスキー
S3_BUCKET : S3バケット名

コードでは、.github/workflows/deploy.ymlというファイルを以下の内容で作成します

これは aws-serverブランチにpushが行われた際にNuxt.jsアプリケーションのビルドを行い、先程のS3にアップを行います。
workflow_dispatchの指定を行っているのでGitHubの管理画面から手動でワークフローを実行することも可能です。

name: deploy to aws
  
on:
  workflow_dispatch:
  push:
    branches:
      - aws-server
  
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Build
        uses: actions/setup-node@v1
      - run: |
          npm install
          npm run generate
      - uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.S3_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.S3_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1
      - name: Copy Files to s3
        run: |
          aws s3 sync ./dist s3://${{ secrets.S3_BUCKET }}

Next.jsの場合

Next.jsの場合も基本的には同じですがいくつかコマンドが変わります。

package.jsonに以下のbuildコマンドを追加して

  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build && next export",
  },


.github/workflows/deploy.ymlは以下のように指定を行います。

name: deploy to aws
  
on:
  workflow_dispatch:
  push:
    branches:
      - aws-server
  
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Build
        uses: actions/setup-node@v1
      - run: |
          npm install
          npm run build
      - uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.S3_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.S3_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1
      - name: Copy Files to s3
        run: |
          aws s3 sync ./out s3://${{ secrets.S3_BUCKET }}

関連エントリー

Github Actionsのキャッシュ機能を利用してNext.jsのデプロイを高速化

スポンサードリンク

«AWS CloudFront FunctionsでBasic認証を設定する | メイン | AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる»