How to deploy gatsby static website on S3 and Cloudfront

Overview

In this page we will walks through how to deploy a Gatsby static website to AWS using S3 bucket and Cloudfront to improve loading time of site.

Prerequisite

• Assume that you already have a AWS account and setup profile from local workstation. Check out the document to setup AWS profile at local machine.
• A Gatsby application deploped from machine and ready for deploy to AWS S3 and CloudFront.
• From AWS console, go to S3 bucket and create an S3 bucket e.g demobucket.com, the bucket name also is domain name for the static websit (it is optional to have bucket name match domain name if you using CloudFront). Follow the document to config website hosting for S3 bucket ## Implement To allow deploying to S3 we need to install additional S3 plugin and config gatsby-config.js file to to ready for use. First make sure npm installed, then run the following to install s3 plugin npm install gatsby-plugin-s3 Now the plugin already installed, we start adding configuration in gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-s3`,
    options: {
      bucketName: "<put-your-bucket-here>",
    },
  },
]

To allow deploy to S3 bucket, first add the following code block to package.json file

{
  "scripts": {
    "deploy": "gatsby-plugin-s3 deploy"
  }
}

then connect to the AWS by export the profile, follow the link to config AWS profile from your local machine. After that, run build and deploy to do a build and deploy to the S3 bucket.

npm run build
npm run deploy

Now you can access to the S3 bucket and access from web browser for the static web. If you need an integration between Amazon S3 and Cloudfront check out the document Static website on Amazon S3 and Cloudfront.