Nuxt.jsのプロジェクトをGitHub ActionsからAWS S3へデプロイする

Nuxt.jsのプロジェクトをGenarateして静的ファイルを作成し、そのファイルをS3にアップロードする作業をGitHub Actionsで行いました。
とても簡単だったので、今後の備忘録としてまとめておきます。
今回はNuxt.jsのプロジェクトで行いましたが、特にフレームワークなどの縛りはなくS3へアップロード可能です。

GitHub Actions用のIAMユーザーを作成する

まずはGitHub Actionsを使用するためのIAMユーザーをAWS側に作成します。
今回はとりあえず AmazonS3FullAccess の権限を与えたユーザーを作成しました。

GitHub上にSecretsを登録

IAMユーザーのアクセスキーを、GitHub上の Setting -> Secrets から登録します。
また、デプロイするS3のバケット名も登録しておきます。（バケットはすでに作成している想定です）

Name は任意ですが、今回は下記のような Name を設定して、それぞれ登録しました。

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY
• S3_BUCKET_NAME

workflowを作成

プロジェクトの .github/workflows/ 内に、GitHub Actionsで行いたい処理を記述したファイルを作成します。
今回は deploy_to_s3.yml という名前のYAML形式のファイルを作成しました。

develop ブランチがpushやmergeなど更新された場合、指定したS3のバケットにデプロイされます。

.github/workflows/deploy_to_s3.yml

name: deploy to s3

on:
  push:
    branches:
      - develop

jobs:
  build:
    runs-on: ubuntu-latest
    timeout-minutes: 5

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

      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - 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

      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Install packages
        run: npm ci

      - name: Run test
        run: npm run lint

      - name: Genarate files
        run: npm run generate

      - name: Upload dist files to S3
        env:
          S3_BUCKET_NAME: ${{ secrets.S3_BUCKET_NAME }}
        run: aws s3 sync ./dist s3://$S3_BUCKET_NAME/ --quiet

簡単ですね！