Introduction

Continuous integration (CI) and continuous delivery (CD) are the development practices of committing code to a shared repository frequently and reliably, allowing for continuous software improvement. Each commit triggers automated workflows on a CI/CD server, which can alert the development team of a potential issue.

In this article, you'll learn how to use DevOps tools like Amazon EC2, Jenkins, and Docker to build a CI/CD integration of a simple React app.

Prerequisites

The following is required to follow along smoothly with the tutorial:

• An AWS account
• A simple React application you would like to deploy. Here is the repository for the React app used in this tutorial.

Tools

• Amazon EC2 (Elastic Compute Cloud) is a cloud computing service that allows for the deployment of virtual servers within an AWS environment.

• Jenkins is an open-source automation tool that allows developers to build, test and deploy software.

• Docker is an open-source software development platform that uses virtualization technology to ease the development and deployment of applications in containerized environments.

You can learn more about What Docker is and why it is important

Module 1: Create an EC2 Instance

Step 1: Go to the AWS management console and sign in with your AWS account credentials.

Step 2: Use the services search box in the console to look up "EC2". Click on it to navigate to the dashboard, and then select the "Launch instance" button.

Step 3: Launch an EC2 instance

• Give the instance any name e.g. tasky.
• Select the Ubuntu AMI and the t2.micro free tier instance type.
• Choose "Create new key pair," then pick either RSA or ED25519 as the key-pair type. Afterward, select the Private key file format as .pem and .ppk. Then, click the "Create key pair" button.

In this tutorial, RSA and the .pem format were specifically chosen.

• Under the network settings, click edit and set the inbound security group rules as shown in the image below;

The custom TCP with port range 8080 is for the Jenkins that will be installed later in this tutorial.

• Finally, launch the instance.

Step 4: Choose the instance you recently created from the instances table, click the connect button, and opt for the "EC2 Instance Connect" tab to enable SSH access to the CLI.

Module 2: Configure Jenkins on the EC2 Instance

Jenkins utilizes Java as its underlying framework, so be sure to install it on your EC2 virtual server instance by doing the following:

Step 1: Update its package source list to acquire the latest versions of packages from the repositories by running

sudo apt update

Then install Java and validate the installation.

sudo apt install openjdk-11-jre

java --version

Step 2: The next step is to install Jenkins by running the following command;

sudo wget -O /usr/share/keyrings/jenkins-keyring.asc \
  https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key

echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
  https://pkg.jenkins.io/debian-stable binary/ | sudo tee \
  /etc/apt/sources.list.d/jenkins.list > /dev/null

sudo apt-get update

sudo apt-get install jenkins

You can always check for the updated Jenkins releases here.

Step 3: Start Jenkins by running the following commands;

sudo systemctl enable jenkins

sudo systemctl start jenkins

sudo systemctl status jenkins

Step 4: Open the Jenkins application in your web browser by entering the public IP address of your instance, followed by port 8080.

http://<your-ec2-ip>:8080

You should see this in your browser

To access your administrator password, enter sudo cat /var/lib/jenkins/secrets/initialAdminPassword in your instance terminal.

Then, copy the password, return to your browser, paste it into the Administrator password field, and click "Continue."

Next, select "install suggested plugins." Create first admin user; upon clicking "Save and Continue," it leads you to the dashboard as shown below

Step 5: Set up Jenkins;

• On the left side of the dashboard, select "New Item" and type in any name.

• Choose "Freestyle Project" and click Ok.

• Add a short project description, select "Github Project," and paste the link to your project repo as shown below

Step 6: Run the following in your EC2 instance terminal so you can access your instance RSA private and public keys

ssh-keygen

cd .ssh

ls

The expected output will be authorized_keys id_rsa id_rsa.pub. To get the public key, run sudo cat id_rsa.pub while to get the private key, run sudo cat id_rsa.

Step 7: Go to your Github profile settings and look for "SSH and GPG keys" on the left pane. Click on "New SSH key."

Enter a name, type in your RSA public key, and click "Add SSH key."

Step 8: Copy your .git URL and paste it into the "Repository URL" within the "Source Management" section of your Jenkins dashboard.

Click on the "Add" button to add credentials and select "Jenkins Credentials Provider." In the dialog box, under kind, select "SSH with private key" and type an ID and description, and set the username to ubuntu

In the private key, tick "Enter directly" and enter your private key, then click Add.

You can then select the created credential in the "Credentials" field.

The next step is to click "Save" and "Build Now."

You can check the "console output" for build details.

Step 9: In your instance terminal, run the command below to access your Jenkins workspace

cd /var/lib/jenkins/workspace/{your-project-name}
ls

Next, proceed to install the necessary dependencies listed below.

sudo apt install nodejs

sudo apt install npm

sudo npm install

Step 10: In your AWS console, navigate to Instance -> Security -> Security groups -> Edit inbound rules. Add the rule as illustrated below and save the changes to enable access to the app from your instance server later on.

Module 3: Set up Docker

Step 1: Inside your Jenkins workspace on your instance terminal, install Docker by executing the following command:

sudo apt install docker.io

Step 2: Create a Dockerfile. This file will be used to build an image

vim Dockerfile

Step 3: Add the following content to the Dockerfile;

FROM node:12.2.0-alpine
WORKDIR app
COPY . .
RUN npm install
EXPOSE 3000
CMD ["npm","start"]

To exit vim, type :wq

Step 4: Then, build your image

docker build . -t tasky

To fix any permission issues, execute the commands below:

sudo usermod -a -G docker $USER

sudo reboot

Create a container from the image

docker run -d --name tasky -p 3000:3000 tasky

Verify if it is running

docker ps

Access your application in the web browser by entering the public IP address of your instance, followed by port 3000

http://<your-ec2-ip>:3000

Module 4: Automate Jenkins

Step 1: Now configure "Build Steps" in your Jenkins dashboard as shown below

Then, click Save -> Build Now

Step 2: Navigate to Manage Jenkins -> Plugins -> Available Plugins, search for the "GitHub Integration" plugins, and install.

Step 3: Go to your Github project repo settings and look for "Webhook" on the left pane. Add your Jenkins URL, appended with /github-webhook/, select the content type as "application/json," and click "Add webhook."

Step 4: Navigate to Jenkins configuration for your project and check the "GitHub hook trigger for GITScm polling."

You can test your modified Jenkins build job by making changes to any file in your project repository. After completing the update, Jenkins will automatically trigger a build job.

Conclusion

In this article, you learned how to integrate a simple CI/CD practice into an application by utilizing DevOps tools such as AWS EC2, Jenkins, and Docker.

Integrating Jenkins with AWS EC2 and Docker creates an effective CI/CD pipeline that automates software delivery. This combination allows for easy scalability and repeatability in the development, testing, and deployment of applications. Adopting these technologies allows development teams to easily detect errors, accelerate release cycles, while maintaining high quality requirements.