React website deployment with AWS CodePipeline, CodeBuild & Git

Few days ago I came across a task that required deployment & hosting of static react website on AWS S3 bucket. I did not find much helping material online and completed the task after doing some struggle myself. So I decided to share the steps with AWS enthusiast out there. So that other won’t go through the same trouble as I did.

Pipeline

What is AWS CodePipeline?

First lets briefly talk about codepipeline itself. It’s a continuous delivery service that enables you to automate your release pipelines for fast and reliable application and infrastructure updates. CodePipeline automates the build, test, and deploy phases of your release process every time there is a code change, based on the release model you define.

Artifacts & Services used

In this article we will use

1- Git hub repository as code source

2- AWS Codebuild to build code

3- AWS CodeDeploy to deploy code

4- AWS S3 bucket to host website

5- AWS CodePipeline for CI\CD

Creation of React App

We can simply create a react app using the following command in terminal. Our app name will be “app” in this example. You can use any name.

npx create-react-app <your_app_name>       

After creating app, use these commands to open react app in your browser to check if app is working or not.

cd <your_app_name>
npm start

I prefer using visual studio code and it’s terminal. You can use any other as per you convenience.

VS Code Terminal & React App Files

Pushing Code to Git Repositroy

Now we will create a repository on git.

Go to git hub create a new repository name it any thing as you want.

Commit & push your code to the repository & skip node_modules folder.

Git Repo with buildspec.yml

Here you are looking at a strange file buildspec.yml.

We will have to create buildspec.yml file on our own. The creation of this file mandatory. It contains all the build specifications required for building the project through codebuild.

buildspec.yml

In this file we have defined the build stages and commands to run at each stage. You can get this file from git repository link shared. Take care of the indentation in this file otherwise it won’t work.

Creation of S3 Bucket for Hosting

Now we will go to our AWS management console and create S3 bucket for hosting static website. After creation of bucket open it and open it’s properties.

In properties tab of S3 Bucket go to “Static website hosting” and select the check box “Use this bucket to host website”. Enter “index.html” in Index document text box and “error.html” in Error document. As shown below.

S3 Bucket Static website hosting

After that go to Permissions tab and change Block all public access to off.

Permission of S3 Bucket

After that go to “Bucket Policy” tab and insert following policy and save it. Enter the name of your bucket at resource attribute by replacing “your_bucket_name” with bucket name.

{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::your_bucket_name/*”
}
]
}

Finally go to “CORS configuration” tab and insert this information and save it.

<?xml version=”1.0" encoding=”UTF-8"?>
<CORSConfiguration xmlns=”http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Creation of Codepipeline

After setting up S3 bucket. We will select codepipeline from AWS management console and open the service. We will select create pipeline and Name our pipeline. We will select these settings and press next.

Pipeline settings

Source for pipline: Next it will ask for source provider, as our source is git hub we will select that and click on connect to git hub. It will connect us to git hub. We will select our required repository and it’s branch where we have committed our react app code . Press next.

Source information

Create build Project: After that it asks for build details we will select AWS codebuild and select “create a project” it will open a window to create a new project.

Here We will write name of the project.

Build Project settings

We will create a codebuild project with Amazon Linux 2 as Operating System, Runtime as Standard and image as 3.0. As below

Build Configurations

Select New service role. After that Select Use a build file as we have buildspec.yml file in our git repository. As below.

No more changes required click on continue to pipeline. Then click next.

Deploy stage: Then we add a deploy stage where we select our S3 bucket that we created earlier to host website. Press next

Click on create pipeline and that will create the codepipeline.

Stages of Pipeline
The pipeline will have 3 stages. Failure of any one stage will rollback all.

First one will be Source stage where our code will be automatically pulled from github.

Source Stage

Second stage will be the Build stage, after pulling code from git hub source codebuild will build the code.

Build Stage

In the third step after successfully building the code, it will be deployed to S3. Through the Deploy stage.

Running the website

Now we go back to our S3 bucket. In the bucket we go to the properties tab. Inside properties tab we navigate to Static website hosting tab and click on the Endpoint link available for our website.

This will open our react app deployed on this S3 Bucket in a browser.

Congratulations we have deployed are website successfully. Any change in our code committed in git hub will rerun the pipeline automatically and deploy the change in the website automatically.

Git Hub Repo link

https://github.com/zaminhassnain06/cicd-demo/blob/master/buildspec.yml

About the Author

Zamin Hassnain is a Senior Software Engineer having working experience of notable Software Companies. He has also worked as technical trainer. He has worked on multiple projects containing technology stack related to AWS Services,Dev Ops, Big Data, ETL, DWH, Python, C# & SQL.