Setup CI/CD Pipeline to deploy React App using AWS CodePipeline, CodeBuild, S3

Amazon Web Services (AWS) DevOps

In this article, we will setup a continuous integration and continuous delivery (CI/CD) for React application. We will be deploying react application to Amazon S3.

Tools and Technologies Used

  • GitHub as code provider
  • AWS CodePipeline
  • AWS CodeBuild
  • Amazon S3 for hosting static website

Creating a S3 bucket

Let’s create a S3 bucket to host a static website.

Login to AWS Console and search for the service S3. 

Click on “Create Bucket” 

Give a unique name, select region and click on Create. 

Now, click on the bucket name, select properties, click on “static website hosting” and select “Use this bucket to host a website”. Enter “index.html” in the index document field and click Save. 

Since we are hosting a website on the bucket, we need to allow public access to the bucket. 

Click on the bucket, click on “Permissions”, Click on “Block public access” and click on “Edit” 

Uncheck all and click on Save.

Navigate to the bucket policy and add following JSON. Replace the BUCKETNAME with your actual bucket name.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKETNAME/*"
        }
    ]
}

Creating a Pipeline

We’ll be connecting CodePipeline using GutHub webhooks and we will inform CodePipeline where our repository exists. 

CodePipeline will look for any changes happening on the branch which we configure and it will pull the code and start building it whenever a change is detected. 

We’ll be using AWS CodeBuild to run build commands. 

Once the build is successfully completed, the code will be deployed to S3. 

Let’s create a pipeline!

  1. Login to AWS Console and search for a service CodePipeline
  2. Click on “Create Pipeline” button. 
  1. Give a name as per your wish. I’ll be naming this pipeline as “react-cicd-gcp-insider”
  1. Click on Next and you’ll be directed to “Add Source Stage” page. Select a service provider. We’ll be using GitHub for this demo. 
  2. Click on “Connect to GitHub”
  1. Select a repository name and branch name. 

Build Stage

Now, we have to configure build stage. Select build provider as “CodeBuild”.

Now click on the “Create Project”. A new popup will open.

Give it a name. I’ll be naming it as “react-cicd-build-project-gcp-insider”.

Select “Managed Instance” and select Amazon Linux 2 as an operating system. Select runtime as “Standard”.

Select image version “x86_64-standard:3.0”

In the Build Spec section, we have 2 options. Use a buildspec file and insert build commands. I’m selecting the first option for this demo. We’ll be creating buildspec.yml file in our application code. 

Now, click on “Continue to CodePipeline”. 

Now we have to inform CodePipeline to deploy the code in S3. Select the deploy provider as Amazon S3. 

Select a S3 bucket on which you would like to deploy the code. Check the box “Extract file before deploy” 

Click Next and click “Create Pipeline”. It will take few seconds to create a pipeline. 

Now, we have to configure our build commands. For that, we need to add buildspec.yml in our code. 

Go to your React project which you have created or cloned from here. 

Create a new file and name it as “buildspec.yml”. 

Copy paste the following code: 

#buildspec.yml demo from http://googlecloudinsider.net/ 
#Specifies what build spec version this file is.
# This helps AWS CodePipeline parse the file correctly.
version: 0.2
# We can listen for specific phases and execute commands per phase.
phases:
  # The build server won't have access to our node_modules folder
  # This is because we have it inside of our .gitignore file
  # To give our build server access, we can simply run "npm install"
  pre_build:
    commands:
      - npm install
  # Now we want to actually build our React app
  build:
   commands:
      - npm run build
# Artifacts will specify what files will be uploaded to s3
# This will include all files within the "build" folder
artifacts:
  files:
    - '**/*'
  discard-paths: no
  base-directory: build

Now push the code to GitHub. CodePipeline will detect the change, pull the code, build it and will deploy it to S3. 

Now go back to the S3 bucket and you would be able to see the files.