Building a Seamless CI/CD Pipeline for Your Todo List Web App with AWS DevOps Services

Building a Seamless CI/CD Pipeline for Your Todo List Web App with AWS DevOps Services

Day 49 - 51 of #90DaysOfDevOps

ยท

3 min read

Introduction

In this comprehensive guide, we'll embark on a journey to create a robust CI/CD pipeline for deploying a Todo List web app using AWS DevOps services. Designed with beginners in mind, this tutorial will provide detailed steps for setting up CodeCommit, CodeBuild, CodeDeploy, and CodePipeline. By the end of this tutorial, you'll have a fully functional CI/CD pipeline that automates the deployment process, ensuring scalability, reliability, and efficiency.


Step 1: Setting Up CodeCommit

Begin your journey by creating a CodeCommit repository. Follow the steps outlined to create a repository and generate HTTPS Git credentials for an IAM user. Clone the repository locally and create the necessary project files. Finally, push your changes to the CodeCommit repository to kickstart the deployment process.

git add .
git commit -m "Initial commit"
git push origin main

Step 2: Configuring CodeBuild

Next, create a CodeBuild project and specify the provided buildspec.yaml file as the build specification.

# buildspec.yaml
version: 0.2
phases:
  install:
    commands:
      - echo Installing Nginx...
      - sudo apt-get update
      - sudo apt-get install nginx -y
  build:
    commands:
      - echo Build started on `date`
      - cp index.html /var/www/html/
      - cp styles.css /var/www/html/
      - cp app.js /var/www/html/
      - cp appspec.yml /var/www/html/
  post_build:
    commands:
      - echo Restarting Nginx...
artifacts:
  files:
    - index.html
    - appspec.yml
    - scripts/**
    - app.js
    - styles.css

This file contains instructions for installing Nginx and copying project files to the appropriate directory. Configure artifacts to store build outputs in an S3 bucket, and trigger a build to verify its success.


Step 3: Implementing CodeDeploy

Now, create a CodeDeploy application and deployment group, associating it with an EC2 instance. Install the CodeDeploy agent on the EC2 instance by executing the provided shell script.

#!/bin/bash 
# This installs the CodeDeploy agent and its prerequisites on Ubuntu 22.04.  
sudo apt-get update 
sudo apt-get install ruby-full ruby-webrick wget -y 
cd /tmp 
wget https://aws-codedeploy-us-east-1.s3.us-east-1.amazonaws.com/releases/codedeploy-agent_1.3.2-1902_all.deb 
mkdir codedeploy-agent_1.3.2-1902_ubuntu22 
dpkg-deb -R codedeploy-agent_1.3.2-1902_all.deb codedeploy-agent_1.3.2-1902_ubuntu22 
sed 's/Depends:.*/Depends:ruby3.0/' -i ./codedeploy-agent_1.3.2-1902_ubuntu22/DEBIAN/control 
dpkg-deb -b codedeploy-agent_1.3.2-1902_ubuntu22/ 
sudo dpkg -i codedeploy-agent_1.3.2-1902_ubuntu22.deb 
systemctl list-units --type=service | grep codedeploy 
sudo service codedeploy-agent status

Create appspec.yaml and scripts to define deployment actions, and trigger a deployment in CodeDeploy.

appspec.yaml:

# appspec.yaml
version: 0.0
os: linux
files:
  - source: /
    destination: /var/www/html/
hooks:
  AfterInstall:
    - location: scripts/install_nginx.sh
      timeout: 300
      runas: root
  ApplicationStart:
    - location: scripts/start_nginx.sh
      timeout: 300
      runas: root

Configure an EC2 role with appropriate permissions and restart the CodeDeploy agent on the instance.

install_nginx.sh

# scripts/install_nginx.sh
#!/bin/bash
apt-get update
apt-get install nginx -y

start_nginx.sh

# scripts/start_nginx.sh
#!/bin/bash
service nginx start

Step 4: Setting Up CodePipeline

Finally, configure a CodePipeline to orchestrate the entire CI/CD workflow.

Add CodeCommit as the source

CodeBuild as the build stage

CodeDeploy as the deploy stage

Create the pipeline, and watch as it automatically fetches code, builds it, and deploys the Todo List web app.

Test the Web App:

Access the public IP of the EC2 instance to verify that the Todo List web app is successfully deployed. Congratulations! You've successfully set up a seamless CI/CD pipeline for your Todo List web app using AWS DevOps tools.


Conclusion

By following the detailed steps outlined in this guide, you've built a robust CI/CD pipeline that streamlines the deployment process for your Todo List web app. Leveraging AWS DevOps services, you've automated key stages of the development lifecycle, ensuring scalability, reliability, and efficiency. This tutorial provides a solid foundation for implementing similar projects and empowers you to embrace the power of DevOps practices in your software development journey.

Happy Learning ๐Ÿš€

Follow me on LinkedIn.

ย