I wrote GitHub Actions deploing Nuxtjs page to S3 / CloudFront

Base package

my package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "Nuxt.js & TypeScript project",
  "author": "Sonoko Mizuki <sonoko@mizuki.io>",
  "private": true,
  "scripts": {
    ...
    "generate": "nuxt generate",
    ...
  },
  ...
}

Add workflows’s yml

Add .github/workflows/deploy.yml to project root.

name: Deploy my site
on:
  push:
    branches:
    - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: checkout
      uses: actions/checkout@master

    - name: setup node
      uses: actions/setup-node@v1
      with:
        node-version: '12'
    - 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
      run: npm install
    - name: ci
      run: npm ci
    - name: generate
      run: npm run generate
    - name: sync s3
      uses: jakejarvis/s3-sync-action@master
      with:
        args: --follow-symlinks --delete
      env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'ap-northeast-1'
        SOURCE_DIR: 'dist' 
    - name: invalidate CloudFront
      uses: chetan/invalidate-cloudfront-action@master
      env:
        PATHS: '/*'
        DISTRIBUTION: ${{ secrets.AWS_DISTRIBUTION }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'ap-northeast-1'

Add secrets to GitHub

• AWS_DISTRIBUTION: Distribution ID like EXAINIAAAB92S
• AWS_ACCESS_KEY / AWS_SECRET_ACCESS_KEY: maybe you know…
• AWS_S3_BUCKET: bucket name like bucket-name-desu-dev not contians s3://, arn:aws:s3:::, and ap-northeast-1

Note

AWS returned An error occurred (AccessDenied) when calling the PutObject operation: Access Denied, even though I didn’t mistake AWS_KEY, BucketName… In this case, you should check whether --acl public-read is in args of sync s3 step and S3 setting is Block all public access

Ref

jakejarvis/s3-sync-action
chetan/invalidate-cloudfront-action