Deploy to S3 Github Action

Allows you to deploy either a static website or React project to S3.

Static Website Usage

name: Upload Static Website to S3

on:
  push:
    branches:
    - master # Change to main if you use that instead

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@main
    - uses: jbelelieu/react-deploy-to-s3-action@main
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        NODE_ENV: development # optional: defaults to production
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: us-west-1 # optional: defaults to us-east-1
        SOURCE_DIR: . # Upload from the root directory of the repo
        RUN_BUILD_STEP: false # Tells the action to skip the build steps.

React Usage

This action runs the equivalent of this oversimplified example:

$ yarn
$ yarn build
$ aws s3 sync public s3://your.website.com/
 # Optionally
$ aws cloudfront create-invalidation --distribution-id XYZ --paths /\*

With the previous in mind:

1- Make sure there is a build script in your package.json. 2- Place in your .github/workflows directory a .yml similar to the following:

name: Upload Website

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@main
    - uses: jbelelieu/react-deploy-to-s3-action@main
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        NODE_ENV: development # optional: defaults to production
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: us-west-1 # optional: defaults to us-east-1
        SOURCE_DIR: bundle # optional: defaults to public
        USE_NPM_OVER_YARN: true # optional: defaults to false

Configuration

The following settings must be passed as environment variables as shown in the example. Sensitive information, especially AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, should be set as encrypted secrets — otherwise, they'll be public to anyone browsing your repository's source code and CI logs.

Key	Value	Suggested Type	Required	Default
NODE_ENV	This environment variable is commonly used by the web packager to select the appropriate variables for the environment you will deploy to	env	No	production
AWS_ACCESS_KEY_ID	Your AWS Access Key. More info here.	secret env	Yes	N/A
AWS_SECRET_ACCESS_KEY	Your AWS Secret Access Key. More info here.	secret env	Yes	N/A
AWS_S3_BUCKET	The name of the bucket you're syncing to. For example, jarv.is or my-app-releases.	secret env	Yes	N/A
AWS_REGION	The region where you created your bucket. Set to us-east-1 by default. Full list of regions here.	env	No	us-east-1
AWS_S3_ENDPOINT	The endpoint URL of the bucket you're syncing to. Can be used for VPC scenarios or for non-AWS services using the S3 API, like DigitalOcean Spaces.	env	No	Automatic (s3.amazonaws.com or AWS's region-specific equivalent)
SOURCE_DIR	The yarn build output directory you wish to sync/upload to S3.	env	No	public
DEST_DIR	The directory inside of the S3 bucket you wish to sync/upload to. For example, my_project/assets. Defaults to the root of the bucket.	env	No	/ (root of bucket)
CLOUDFRONT_DISTRIBUTION_ID	If you include a CloudFront Distribution Id using this variable, the action will run aws cloudfront create-invalidation for the wildcard path *, meaning it will completely flush the cache (Note: AWS considers this a single invalidation even though it affects all files in the distribution) so that the new changes synced to S3 are available immediately.	secret env	No	N/A
USE_NPM_OVER_YARN	Set to true if you want to use NPM over Yarn.	env	No	false
RUN_BUILD_STEP	Set to true if you are uploading a static website that doesn't need a build step.	env	No	false

TROUBLESHOOTING

• Errors such as /bin/sh: react-scripts: not found or To import Sass files, you first need to install node-sass. are usually caused by these or other libraries being within devDependencies in the package.json. ALL dependencies should be under the dependencies entry within package.json. A react application which gets pushed to S3 will be bundled with all its dependencies, there is no such thing as dependencies that are used for development vs production, all dependencies are needed to build the final package of html, js, css, etc.

License

This project is distributed under the Apache-2.0 license.