GitHub Actions deploing Nuxtjs page to S3 / CloudFront
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 likeEXAINIAAAB92S
AWS_ACCESS_KEY
/AWS_SECRET_ACCESS_KEY
: maybe you know…AWS_S3_BUCKET
: bucket name likebucket-name-desu-dev
not contianss3://
,arn:aws:s3:::
, andap-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
Read other posts