Hands-On Guide: Implementing CI/CD for your web application with AWS Codepipeline

Hello there. This time, we’ll use AWS Codepipeline to build a Continuous Integration and Continuous Deployment (CI/CD) pipeline. In my previous post, we successfully installed an EC2 instance with a React app. But how can we speed up the development process? Follow this step to learn how to configure CI/CD on AWS.

1. Create AWS CodePipeline

Go to the search bar at the top and search for “CodePipeline.”

Select “Pipelines” on the left-hand side and then click on “Create Pipeline.”

Enter the desired pipeline name. Choose “New service role” for the Service role option. Then, click on “Next.”

In the Source provider section, select “GitHub (Version 2)” and then click “Connect to GitHub” to establish the connection first.

After filling in the connection name and clicking “Connect to GitHub” you will be redirected to the GitHub authorization page. Follow this AWS documentation about connecting to GitHub for further instructions.

Choose the repository and branch you want to use. Then, click “Next.”

In the build provider option, select “AWS CodeBuild,” and then choose your region. After that, click on “Create project.”

After clicking “Create project,” a pop-up window will appear, prompting you to create a build project. Provide a name for the build project.

Select the “Managed image” option for the environment image and follow the instructions in the screenshot below for the remaining settings. For the Service role, choose “New service role,” and you can either provide a role name or leave it as the default.

In the build specifications option, select “Use a buildspec file” and name it “buildspec.yml.”

Click “Continue to CodePipeline”

You will return to the build stage interface. Select the Project name that we created earlier, then click “Next.”

Choose “AWS CodeDeploy” in the Deploy provider option and select your region. In the Application name option, you need to create the Application first.

To create an application, click on “Applications” on the left side under CodeDeploy.

Click Create application

Enter your application name and for the compute platform choose EC2/On-premises. Then click Create application

Click “Create deployment group”

Enter the deployment group name. For the service role, you need to create a role first.

Go to IAM and select “Roles” on the left-hand navigation menu.

Choose “AWS service” and for the use case, select “CodeDeploy.”

Add the policy named “AWSCodeDeployRole.”

Give the role a name and then click on “Create.”

Go back to the deployment group and refresh the page. The role you created earlier should now appear

For the deployment type, select “In-place,” and for the Environment configuration, choose “Amazon EC2 instances.”

Here, I’m providing a tag for the EC2 instance with key=react and value=codedeploy. This will instruct CodeDeploy to perform the deployment on EC2 instances based on the tag you’ve provided.

Apply a tag to your EC2 instances so that CodeDeploy can deploy our application.

For the CodeDeploy Agent, select “Now and schedule updates.”

In this tutorial, since we’re not using a load balancer, uncheck the option for “Enable load balancing.”

After creating the application and deployment group, go back to the CodePipeline creation and select the one we just made.

Review the configuration you’ve set up and then click on “Create pipeline.”

Once the pipeline is created, CodePipeline will start running automatically. Here, we can observe that there is an error in the build stage.

If you click “View in CodeBuild” and then navigate to the “build logs” tab, you’ll see an error log indicating that buildspec.yml was not found. You need to add buildspec.yml to your React project directory.

The buildspec.yml file is a fully managed build service provided by Amazon Web Services (AWS). CodeBuild helps automate the process of compiling source code, running tests, and producing deployable artifacts. The buildspec.yml file is a configuration file that defines the build process and its various phases.

Create a file named “buildspec.yml” in the root directory.

version: 0.2

phases:
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - echo Build completed on `date`
artifacts:
  files:
    - public/**/*
    - src/**/*
    - package.json
    - appspec.yml
    - scripts/**/*
    - build/**/*

git add .
git commit -am "add buildspec.yml"
git push

After pushing the changes, the CodePipeline will start running. However, in the deployment stage, the process takes a long time, and an error occurs. This is because we haven’t added appspec.yml to the React project directory.

Create a file named appspec.yml in the root directory of your React project.

The appspec.yml file is a configuration file used by AWS CodeDeploy to define how the deployment process should be executed. It typically resides in the root directory of your application source code. The file specifies the deployment lifecycle events and hooks, defining what actions should be taken at each stage of the deployment process.

version: 0.0
os: linux

files:
  - source: /
    destination: /home/ubuntu/my-app/rp-medium-react
    overwrite: true
file_exists_behavior: OVERWRITE

permissions:
  - object: /
    pattern: "**"
    owner: ubuntu
    group: ubuntu

hooks:
  BeforeInstall:
    - location: scripts/before_install.sh
      timeout: 300
      runas: root

  AfterInstall:
    - location: scripts/after_install.sh
      timeout: 300
      runas: root

  ApplicationStart:
    - location: scripts/app_start.sh
      timeout: 300
      runas: root

If we look at the appspec.yml file, there’s a “scripts” folder containing before_install.sh, after_install.sh, and app_start.sh. You should also add the “scripts” folder with these three files inside it.

Create a file named after_install.sh inside the “scripts” folder.

#!/bin/bash
cd /home/ubuntu/my-app/rp-medium-react
sudo cp -R build/ /var/www/html/my-react-app/

Create a file named before_install.sh inside the “scripts” folder

#!/bin/bash
cd /home/ubuntu/my-app/rp-medium-react
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

Create a file named app_start.sh inside the “scripts” folder.

#!/bin/bash
sudo nginx -t && sudo systemctl reload nginx

Make sure you’ve structured your project directory like this:

This picture is my EC2 instance that serve react app, in this case, I create folder structure call /home/ubuntu/my-app/rp-medium-react

After you’ve finished creating the files mentioned above, commit and push the changes again.

If you encounter an error during the deployment stage, click “View in CodeDeploy.”

The error occurs because the CodeDeploy agent is not installed on the EC2 instance. Follow this link to install the CodeDeploy agent.

Make sure the CodeDeploy agent is installed. Check using the command:

sudo service codedeploy-agent status

Then we need to attach role to our EC2. Search IAM at the top serach bar. After that click Create Roles.

Add permission, you can choose AmazonS3ReadOnlyAccess to allow your ec2 pull the file from S3.

After you finish creating a role. Now you must attach this role to the EC2. Open EC2 services then go to instances. Choose your EC2 then click Actions — Security — Modify IAM role

Choose the role that we already created

After you update the IAM role, reboot your instance.

Enter your EC2 Public IP into the browser to check the web page before we make changes through the pipeline

The web show page “hello world-cicd-2” before we doing perubahan

Edit the code on your local machine to “hello world-cicd-3” and make a commit & push.

CodePipeline successfully ran the build and deploy for our new code

Now refresh the browser again and the page has changed to “hello world-cicd-3”

After making code changes on the local machine the web page changes to the words “hello world-cicd-3”

Congratulations, you have successfully created a CICD pipeline for deploying your apps to EC2.