{"componentChunkName":"component---src-templates-blog-post-js","path":"/gatsby-gitlab-aws/","result":{"data":{"markdownRemark":{"html":"

Gatsby is an open-source web framework that lets you build really fast and secure websites. I love because it gives me a lot of control without a lot of complexity. This replaced Wordpress for any of my personal projects.

\n

I've used and deployed Gatsby before using Netlify. It provided a lot of features without a lot of effort such as built-in CI/CD, domain and DNS management, and even automated previews of every commit to your Git repo. The best part: they provide these features on the free tier!

\n

I wanted to replicate some of that here. I will provide a walkthrough of how to deploy your GatsbyJS site to AWS S3 using GitLab CICD pipelines.

\n

Prerequisites

\n\n

Steps

\n

The walkthrough is didvided into two parts: the AWS and GitLab setup

\n

AWS Setup

\n\n

GitLab Setup

\n\n

AWS Setup

\n

Step 1: Create the S3 bucket

\n

Create a new S3 bucket that is publicly accessible.

\n

\n \n \n

\n
    \n
  1. Once you are at the S3 console in AWS and click Create bucket
    2. \n
  2. Name the bucket
    3. \n
  3. Select a region
    4. \n
\n

\n npm run build on your local machine. However, I'm sure you're reading this for the CI/CD part. Keep reading!

\n\n\n

Step 4: Create new policy for new IAM user

\n

Here, you are creating a new policy to use for a new user we will be creating in Step 5. The policy provides seeing what buckets are available as well as read and write permissions on the specified S3 bucket.

\n
    \n
  1. Go to the IAM console and select \"Policies\" on the left navigation
    2. \n
  2. Click create policy
    3. \n
  3. Select the JSON tab
    4. \n
  4. Copy & paste the policy below
    5. \n
  5. Click \"Review Policy\"
    6. \n
  6. Name the policy
    7. \n
  7. \n

    Click \"Create policy\"

    \n
    {\n\"Version\": \"2012-10-17\",\n\"Statement\": [\n    {\n        \"Sid\": \"VisualEditor0\",\n        \"Effect\": \"Allow\",\n        \"Action\": [\n            \"s3:PutAccountPublicAccessBlock\",\n            \"s3:GetAccountPublicAccessBlock\",\n            \"s3:ListAllMyBuckets\",\n            \"s3:HeadBucket\"\n        ],\n        \"Resource\": \"*\"\n    },\n    {\n        \"Sid\": \"VisualEditor1\",\n        \"Effect\": \"Allow\",\n        \"Action\": \"s3:*\",\n        \"Resource\": [\n            \"arn:aws:s3:::mydomain.com/*\",\n            \"arn:aws:s3:::mydomain.com\"\n        ]\n    }\n]\n}\n
    \n
    8. \n
\n

Step 6: Create IAM User

\n

\n \n \n

\n
    \n
  1. Name the user
    2. \n
  2. Check \"Programmatic Access\"
    3. \n
  3. Click \"Next: Permissions\"
    4. \n
  4. Select \"Attach existing policies directly\"
    5. \n
  5. In the search box, type in the name of the policy you created above
    6. \n
  6. Click \"Next: Tags\"
    7. \n
  7. Click \"Next: Review\"
    8. \n
  8. Click \"Create User\"
    9. \n
  9. You will be brought to a page to get the Access Key ID and Secret Access Key. Don't close this window yet, you will need this for the next step.
    10. \n
\n

\n \n \n

\n

GitLab

\n

Step 1: Add CI/CD Variables

\n

\n \n \n

\n
    \n
  1. Go to your repository in GitLab
    2. \n
  2. Select settings and CI/CD
    3. \n
  3. Expand the Variables section
    4. \n
  4. Add the key \"AWS_ACCESS_KEY_ID\" and \"AWS_SECRET_ACCESS_KEY\" and their values from the previous step
    5. \n
\n

Step 2: Create and configure .gitlab-ci.yml

\n
    \n
  1. Create a file called .gitlab-ci.yml at the root of your repository
    2. \n
  2. Copy and past the following code
    3. \n
  3. Change the bucket name variable with yours
    4. \n
\n
variables:\n  BUCKET_NAME_PRODUCTION: mydomain.com\n\nstages:\n  - build\n  - deploy\n\n# This folder is cached between builds\n# http://docs.gitlab.com/ce/ci/yaml/README.html#cache\ncache:\n  paths:\n    - node_modules/\n\nbuild-assets:\n  image: node:latest\n  stage: build\n  artifacts:\n    paths:\n      - public/\n  script:\n    - npm install\n    - npm run build\n\ndeploy-s3:\n  stage: deploy\n  image: python:3.8\n  before_script:\n    - pip3 install awscli --upgrade\n  script:\n    - aws s3 sync public s3://$BUCKET_NAME_PRODUCTION/ --delete\n  environment: production\n  only:\n    - master\n
\n

variables allows you to define values that you can use throughout your CICD configuration file. Here, we are specifying the bucket name

\n
cache:\n  paths:\n    - node_modules/\n
\n

We will be building our Gatsby site and we will need to grab all of our dependencies. This allows us to specify folders or files to cache in between runs

\n
build-assets:\n  image: node:latest\n  stage: build\n  artifacts:\n    paths:\n      - public/\n  script:\n    - npm install\n    - npm run build\n
\n\n

Step 3: Commit and Push Code

\n

\n \n \n

\n\n

\n \n

Stay tuned for Part II where we use a custom domain for your website and setup a staging environment to test prior to going to production

","fields":{"slug":"/gatsby-gitlab-aws/"},"frontmatter":{"title":"Part I: Deploying Gatsby to AWS S3","description":"Use GitLab's CI/CD to deploy a Gatsby site to AWS S3","date":"2020-07-20T12:32:00.000Z","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsSAAALEgHS3X78AAABnklEQVQoz2NgAILmyDWMDGigwG8j438zBP+BoyYTjL3XVhdDPRw0hK4CK0wznmE8IXvr0v6sLXOq/Zcrww1y1VR84KypAGY7a8rdd9FUBbH9TSzYVPVteYGYSVnPjlndwJbXytKcFazJhbVJcnL+9lf9ybv/T0jZ+7/YZeFFbwYnbpDcQ3vN7kcumjUgNpCufGCv2Q9i6xnYugIN6QTibCCuVdO3LZbUdLQFG5hhOitgRceJ/+VeS77k28//MTFn6/8YpclGILnvLerXP8er/b1no3nyc5zanx8tardB4hp6Ni6cim5uLPLuTsxy7m4iak7mng7GvmADzRkqpRe3HHy3f8mt/4tqTvyfXrLzGjNDACdI7u9ateLfDWr//wXq/P8DoteqloPE/89k0P43g8Hp/yoG5f+bGOQ+TWJ2A4oFMbQnrAcHcKb5bPP2+PVrgHhhuEK/GkisRHUVWO73TDWbT9nqO39PV7OHhe3/xWyMQAM0/kxnCP49nTHw/xygwbMZmMGSk/K2YcayKyTmf/eoMSGL/wHy/58WxxnJADbcln+caIuUAAAAAElFTkSuQmCC","aspectRatio":2.985074626865672,"src":"/static/c95d8439318a54049791aaafc01d9cbc/ee604/gatsby-gitlab-aws.png","srcSet":"/static/c95d8439318a54049791aaafc01d9cbc/69585/gatsby-gitlab-aws.png 200w,\n/static/c95d8439318a54049791aaafc01d9cbc/497c6/gatsby-gitlab-aws.png 400w,\n/static/c95d8439318a54049791aaafc01d9cbc/ee604/gatsby-gitlab-aws.png 800w,\n/static/c95d8439318a54049791aaafc01d9cbc/f3583/gatsby-gitlab-aws.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},"pageContext":{"slug":"/gatsby-gitlab-aws/"}}}