ReactJs CI/CD with AWS

10 min readJul 22, 2023

Below is a detailed step-by-step documentation for creating a CI/CD pipeline to deploy a ReactJS app using AWS CodePipeline, CodeDeploy, EC2 instance, CodeBuild, and GitHub.

Step 1: Set up a ReactJS App and GitHub Repository

1. Create a ReactJS application locally on your machine.

2. Initialize a Git repository for your project and commit your code.

3. Create a new repository on GitHub and push your local code to the remote repository.

4. Repository should contain the “buildspec.yml” file and “appspec.yml” and a scripts folder and the folder should contain the script files : “before_install.sh”, “after_install.sh” and “app_start.sh”.

Step 2: Create the required IAM Role

1. Sign in to the AWS Management Console and navigate to the IAM service.

2. Navigate to the “Roles” on the left Navigation menu. And click on “Create Role”

3. Create a Role for EC2 to have access for S3.

4. Add the “AmazonS3ReadOnlyAccess” or “AmazonS3fullAccess” policy on the EC2 Role.

4. Create a CodeDeploy Role for deployment groups .

5. Add the “AWSCodeDeployRole” policy for this role.

Step 3: Set up an EC2 Instance

1. Navigate to the EC2 service.

2. Launch a new EC2 instance using the desired AMI (Amazon Machine Image) and instance type.

3. Configure the instance details, such as VPC, subnet, security groups, and key pair.

4. Review and launch the instance, and then select an existing key pair or create a new one.

5. Once the instance is launched, Connect to the instance using PuTTy or ssh. In this document, instance connection is done through ssh.

6. For CICD AWSDeploy, “codedeploy-agent” is to be installed and for installation follow the below step.

Connect to the Linux Instance

i. Connect to the Linux instance using SSH or any other preferred method.

ii. Ensure that you gain the administration root access using “sudo su”\

Install the CodeDeploy Agent

i. Run the following commands to install the CodeDeploy agent:

yum update

yum install ruby

cd /home/ec2-user

wget https://bucket-name.s3.region-identifier.amazonaws.com/latest/install

wget https://bucket-name.s3.us-east-1.amazonaws.com/latest/install

chmod +x ./install

./install auto

Note: By following the below link you can identify what Bucket-name and what region to use for the current region.

https://docs.aws.amazon.com/codedeploy/latest/userguide/resource-kit.html#resource-kit-bucket-names

In the this document, us-east-1 region is being used as the instance was instantiated in that region

Step 4: Start the CodeDeploy Agent

1. Run the following command to start the CodeDeploy agent:

Systemctl start codedeploy-agent

2. Verify that the agent has started successfully by checking the agent logs:

tail -f /var/log/aws/codedeploy-agent/codedeploy-agent.log

3. Ensure that there are no errors in the log and that the agent is running.

You have successfully installed and started the CodeDeploy agent on your Linux instance.

Step 4: Set up CodeBuild and buildspec.yml

1. Go to the AWS Management Console and navigate to the CodeBuild service.

2. Click on “Create build project” and provide a name for your project.

3. Under “Source provider,” select “GitHub” and connect your GitHub account.

4. Choose the repository and branch you want to build.

5. Under “Environment,” select the desired environment type, such as Ubuntu or Amazon Linux.

6. Under the buildspec file select “Use a buildspec file” option. And the buildspec.yml file must be the repository that acts as source

7. Set any additional configurations as per your project requirements.

8. Review the settings and click on “Create build project” to save the configuration.

For buildspec.yml:

# Do not change version. This is the version of aws buildspec, not the version of your buildspec file.

# Do not change version. This is the version of aws buildspec, not the version of your buldspec file.
version: 0.2
phases:
  pre_build:
    commands:
      #installs dependencies into the node_modules/ directory
      - npm install
  build:
    commands:
      - echo Build started on `date`
      - echo Compiling
      - npm run build
  post_build:
    commands:
      - echo Build completed on `date`
# Include only the files required for your application to run.
artifacts:
  files:
    - public/**/*
    - src/**/*
    - package.json
    - appspec.yml
    - scripts/**/*

Step 5: Set up CodeDeploy and addspec.yml

1. Navigate to the AWS Management Console and go to the CodeDeploy service.

2. Click on “Create application” and provide a name for your application.

3. Under “Compute platform,” select “EC2/On-premises.”

4. Review the settings and click on “Create application” to save the configuration.

5. Create a deployment group by providing a name, choosing the EC2 instances to deploy to, and configuring deployment settings.

For the addspec.yml use the following code :

# This is an appspec.yml template file for use with an EC2/On-Premises deployment in CodeDeploy.
 
version: 0.0
# Specify "os: linux" if this revision targets Amazon Linux
os: linux
 
files:
  - source: /
    destination: /home/ec2-user/server
 
permissions:
  - object: /
    pattern: "**"
    owner: ec2-user
    group: ec2-user
 
hooks:
  # During the BeforeInstall deployment lifecycle event, run the commands
  #   in the script specified in "location".
  BeforeInstall:
    - location: scripts/before_install.sh
      timeout: 1000
      runas: root
  # During the AfterInstall deployment lifecycle event, run the commands
  #   in the script specified in "location".
  AfterInstall:
    - location: scripts/after_install.sh
      timeout: 1600
      runas: root
 
  # During the ApplicationStart deployment lifecycle event, run the commands
  #   in the script specified in "location".
  ApplicationStart:
    - location: scripts/app_start.sh
      timeout: 1600
      runas: root

For the scripts file:

before install.sh:

#!/bin/bash
cd /home/ec2-user/server
curl -sL https://rpm.nodesource.com/setup_14.x | sudo -E bash -
yum -y install nodejs npm

For after_install.sh:

#!/bin/bash
cd /home/ec2-user/server
npm install
npm install - save react react-dom react-scripts react-particles-js
npm install pm2 -g

For app_start.sh:

#!/bin/bash
# Change to your application's directory
cd /home/ec2-user/server/src
npm install
# Start the application using PM2
pm2 start npm - name "react-app" - start
# Save the PM2 process list
pm2 save
# Generate the startup script
pm2 startup
# Restart PM2 to ensure the application starts on system reboot
pm2 restart all

Step 6: Set up CodePipeline

1. Go to the AWS Management Console and navigate to the CodePipeline service.

2. Click on “Create pipeline” and provide a name for your pipeline.

3. Under “Source provider,” select “GitHub” and connect your GitHub account.

4. Choose the repository and branch you want to trigger the pipeline.

5. Under “Build provider,” select “AWS CodeBuild” and choose the CodeBuild project you created in Step 3.

6. Under “Deploy provider,” select “AWS CodeDeploy” and choose the CodeDeploy application and deployment group you created in Step 4.

7. Configure any additional pipeline settings, such as artifact storage location and encryption.

8. Review the settings and click on “Create pipeline” to save the configuration.

Step 7: Test the CI/CD Pipeline

1. Make changes to your ReactJS app locally and commit the changes to the GitHub repository.

2. The CodePipeline will automatically detect the changes and trigger the pipeline.

3. CodeBuild will build your application based on the build specifications and create the artifacts.

4. CodeDeploy will deploy the new version of your application to the EC2 instances.

5. Monitor the pipeline execution in the CodePipeline console.

6. Access your deployed ReactJS app by entering the EC2 instance’s public IP address in a web browser.

Step 8: Access your ReactJs app

1. Go to the instance in the EC2 dashboard and select the instance that is hosting the react site.

2. In the information section , select the public IPv4 DNS.

3. Copy the DNS and paste it into the browser followed by port ID :3000, it wouldn’t work and nothing will happen,

(For example: ec2–3–81–44–251.compute-1.amazonaws.com:3000)

4. Port 3000 would not work unless the port is open in the security group which is associated with our instance. And for that follow the below steps:

In the EC2 dashboard, on the left navigation menu select “security group” by scrolling down through the menu

Select security group that is associated with your instance

Then select the inbound rules, click on edit inbound rules

Then click on add rule, select custom TCP and enter the custom port 3000–3005 and set source as Anywhere.

Then click on save rules

After the completion of the these steps you can repeat step 8.3 and this time it would work and you would be able to see your react site on the browser

Congratulations! You have successfully set up a CI/CD pipeline for deploying your ReactJS app using AWS CodePipeline, CodeDeploy, EC2 instance, CodeBuild, and GitHub.

Documented by: Brishav U. Kuikel
https://www.linkedin.com/in/brishav-u-kuikel-b2b78025a/
2023 Jun 16

ReactJs CI/CD with AWS

Written by MSP Medium