Gatsby + S3/CloudFront + Circle CI (Automation)

ruucm
ruucm
Oct 24, 2019 · 4 min read

What

Complex configuration to automate the deployment process of Gatsby + s3/Cloudfront

How

Use gatsby-plugin-s3 with Circle CI

Here are full instructions

1. Make S3 bucket & AWS IAM settings

Add a IAM user with permissions

  • AmazonS3FullAccess
  • CloudFrontFullAccess
  • cloudfrontCreateInvalidation (inline)
{
"Statement": [
{
"Effect": "Allow",
"Action": "s3:*",
"Resource": "arn:aws:s3:::*"
},
{
"Effect": "Allow",
"Action": [
"cloudfront:CreateInvalidation",
"cloudfront:GetInvalidation",
"cloudfront:ListInvalidations"
],
"Resource": "*"
}
]
}

2. Add gatsby-plugin-s3

yarn add gatsby-plugin-s3

then config gatsby-config.js file like below

{
resolve: `gatsby-plugin-s3`,
options: {
bucketName: 'demo.harbor.school',
},
},

add deploy script like below

"deploy": "gatsby-plugin-s3 deploy -y"

3. Manual Deployment Test

Run this command on your project root

yarn build && yarn deploy

open the resulting URL after complete this process

4. Cloud Front settings

Let’s create a distribution

(Do this first) Request Custom SSL Domain

Route 53

5. Make automated deployment

Make .circleci/config.yml config file on your project

---
version: 2.1
jobs:
setup:
docker:
- image: circleci/node:10.15.3
working_directory: ~/application
steps:
- checkout
- run:
name: Update npm
command: "sudo npm install -g npm@latest"
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install npm wee
command: npm install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- node_modules
- save_cache:
key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
paths:
- ~/application
build_and_deploy:
docker:
- image: circleci/node:10.15.3
working_directory: ~/application
steps:
- restore_cache:
key: v1-repo-{{ .Environment.CIRCLE_SHA1 }}
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Deploy
command: |
npm run build && npm run deploy
workflows:
version: 2.1
build:
jobs:
- setup
- build_and_deploy:
requires:
- setup
filters:
branches:
only:
- master

Follow the repo on Circle CI

add IAM key & secret to project env

Then push your changes to master!

References

https://boredhacking.com/deploy-gatsby-s3-circleci/

Today I Solved

Today I Solved!