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.
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
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
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”
Congratulations, you have successfully created a CICD pipeline for deploying your apps to EC2.