GitHub actions: Build node package & upload ./dist to S3 bucket

README.md

This is a simple CI/CD config for Github Actions. Hopefully it saves you some time. It runs npm run build, then overwrites a folder in a s3 bucket with the local dist folder.

I have not thoroughly tested the module cache system (.npm instead of node_modules).

This guide is licensed under CC0 (public domain).

Steps

1. Add .github/workflows/deploy-to-s3.yml to your repo

• Update BUCKETNAMEHERE, DIRNAMEHERE, and AWS_REGION.

2. Create a new IAM user with programmatic access and a standalone deploy-s3-IAM-policy.json

• For safety, make a new user for every repo
• Update BUCKETNAMEHERE and DIRNAMEHERE

3. Add key env vars to Github Secrets (under repo settings)

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY

4. Push master branch of repo

You should then direct Cloudwatch to serve bucket/folder/index.html.

Example output

Set up job
3s

Build jakejarvis/s3-sync-action@c33d061a8f4bddd78d8b5f9f4e5d2fd40a556980
37s

Run actions/checkout@v1
2s

Run actions/setup-node@v1
6s

Run actions/cache@v1
1s

Run npm install
20s

Run npm run build
36s

Run jakejarvis/s3-sync-action@c33d061a8f4bddd78d8b5f9f4e5d2fd40a556980
4s

upload: dist/test.4403abcb.js to s3://BUCKETNAMEHERE/FOLDERNAMEHERE/test.4403abcb.js
Run jakejarvis/s3-sync-action@c33d061a8f4bddd78d8b5f9f4e5d2fd40a556980
/usr/bin/docker run ...
upload: dist/index.html to s3://BUCKETNAMEHERE/FOLDERNAMEHERE/index.html
upload: dist/test.4403abcb.js to s3://BUCKETNAMEHERE/FOLDERNAMEHERE/test.4403abcb.js

Post actions/cache@v1
1s

Complete job
0s 

deploy-s3-IAM-policy.json

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKETNAMEHERE"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKETNAME/DIRNAMEHERE",
                "arn:aws:s3:::BUCKETNAME/DIRNAMEHERE/*"
            ]
        }
    ]
}

deploy-to-s3.yml

# Github Action - npm run build && s3 sync ./dist
# save to .github/workflows/deploy-s3.yml
name: deploy-to-S3 (2019-11-26)
on:
  push:
    branches:
    - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: npm install
      - run: npm run build
      # The following is pinned to a known-good commit for safety purposes
      # https://github.com/jakejarvis/s3-sync-action
      - uses: jakejarvis/s3-sync-action@c33d061a8f4bddd78d8b5f9f4e5d2fd40a556980
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_S3_BUCKET: 'BUCKETNAMEHERE'
          AWS_REGION: 'us-west-2'
          SOURCE_DIR: 'dist'
          DEST_DIR: 'DIRNAMEHERE'