Implementing CI - CD Aws Code Pipeline

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.

Implementing CI - CD Aws Code Pipeline

Uploaded by

Copyright:

Available Formats

Implementing CI - CD Aws Code Pipeline

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Implementing CI - CD Aws Code Pipeline

Uploaded by

Copyright:

Available Formats

Hello there.

This time, we’ll use AWS Codepipeline to build a Continuous

1. Create AWS CodePipeline

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

Click “Create deployment group”

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

Here, I’m providing a tag for the EC2 instance

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

After creating the application and deployment group, go back to the

The buildspec.yml file is a fully managed build service provided by

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

The appspec.yml file is a configuration file used by AWS CodeDeploy to

If we look at the appspec.yml file, there’s a “scripts” folder

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

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

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

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

sudo service codedeploy-agent status

Add permission, you can choose AmazonS3ReadOnlyAccess to allow your

After you update the IAM role, reboot your instance.

Congratulations, you have successfully created a CICD pipeline for

You might also like