October 26, 2024
Do you need help with creating an AWS CI/CD pipeline? In this article, we will provide a step-by-step guide to setting up a CI/CD pipeline on AWS using various services such as CodePipeline, CodeBuild, S3, CloudFront, Elastic Beanstalk, and Route 53. Our guide is based on a video tutorial by Huzaifa Asif, which you can access here.
Before we get started with the details of this article, let’s take a moment to discuss what CI/CD is all about. CI/CD, short for continuous integration / continuous delivery, is widely recognized as a best practice for software development and deployment. Essentially, it involves a process where the code is continually built, tested, and deployed. This process can be automated, which makes it easier and quicker for developers to deploy changes and updates.
AWS provides a variety of cloud services that enable users to set up an automated CI/CD pipeline effortlessly. Among these services, AWS CodePipeline is a fully-managed offering that facilitates developers in rapidly building, testing, and deploying their code. In addition, CodeBuild is a build service that assists developers in compiling and testing their code. S3, on the other hand, is a storage service that can be utilized for storing code and other related artifacts. CloudFront is a content delivery network that can be employed to swiftly distribute code to end-users. Elastic Beanstalk is a service that streamlines the process of deploying and scaling applications. Finally, Route 53 is a DNS service that enables routing of traffic to the appropriate application.
The first step is to create a new CodePipeline. Navigate to the AWS console, and select CodePipeline from the Services menu. On the CodePipeline console, select Create pipeline.
On the next screen, you’ll be asked to select a source. For this tutorial, we’ll be using Github as our source. We have the following options (AWS CodeCommit, AWS ECR, Bitbucket, GitHub (Version 1), GitHub (Version 2), and GitHub Enterprise Server.
We will select GitHub (Version 2) as this will allow you to connect with your GitHub account, then login to your GitHub account and give permission to AWS to fetch code from Github, then select the repository you want to deploy.
Afterward, select the branch you want to deploy and keep the option of “Start pipeline on source code change” checked as this will cause the pipeline to deploy the code whenever source code changes occur in the selected branch.
Skip the build stage as the backend code is not required to be build, so we will skip it, In case you want to build your backend code you can go below in the Frontend CI/CD pipeline and check Step 3 Build Stage.
The next step is to add a deploy step. For this tutorial, we’ll be using AWS Elastic Beanstalk as our deploy provider.
Keep the Code pipeline tab open and open a new tab in your browser to open Elastic Beanstalk, then select the environment tier. We will select web server environment and then click on next.
Create the Elastic Beanstalk service by providing the application name, tags, environment name, domain name (optional), and description. Then select the Platform and the version of the platform, we will select Nodejs in the platform as we are deploying the Nodejs application and will select the version accordingly, after that we will select the sample application as we do not need to provide code yourself as the source code will be provided by the code pipeline to Elastic Beanstalk. Then finally click on “Create Environment” to create the Elastic BeanStalk application. Then wait for 3 to 4 mins and the Elastic Beanstalk sample application will be deployed.
Now go back to Code Pipeline and select Elastic Beanstalk and select the Elastic Beanstalk application you have just created and click on the next button.
In this step, you will see all the services you have selected for all the stages. after reviewing the setting click on “Create pipeline”
Now you can see the pipeline running to fetch the latest code and deploying the code to Elastic Beanstalk, when the stage process the request successfully it will turn green, and when the last step turns green that means the pipeline has executed successfully.
The first step is to create a new CodePipeline. Navigate to the AWS console, and select CodePipeline from the Services menu. On the CodePipeline console, select Create pipeline.
On the next screen, you’ll be asked to select a source. For this tutorial, we’ll be using Github as our source. We have the following options (AWS CodeCommit, AWS ECR, Bitbucket, GitHub (Version 1), GitHub (Version 2), and GitHub Enterprise Server.
We will select GitHub (Version 2) as this will allow you to connect with your GitHub account, then login to your GitHub account and give permission to AWS to fetch code from Github, then select the repository you want to deploy.
Afterward, select the branch you want to deploy and keep the option of “Start pipeline on source code change” checked as this will cause the pipeline to deploy the code whenever source code changes occur in the selected branch.
Next, you’ll need to add a build step. Select CodeBuild as your build provider, then select the region that you’d like to use and then click on “Create Project” to create a build project.
When the pop-up opens for creating Build Project, provide the project name, description, operating system, runtime, and image. I have selected Ubuntu as the operating system, Runtime is standard and the image is standard 6.0
To get details about the list of images provided by AWS Code Build go to this link: https://docs.aws.amazon.com/codebuild/latest/userguide/build-env-ref-available.html
Create a buildspec.yml file at the root of your project as it is required by AWS CodeBuild Service. We have the following phase in the buildspec file:
Then in the end we specify Artifacts in a buildspec file. These are files that are generated as a result of the build process and are then uploaded to the specified output location. This could include compiled code, static website files, or other build artifacts.
The next step is to add a deploy stage. For this tutorial, we’ll be using AWS S3 Bucket as our deploy provider.
Keep the Code pipeline tab open and open a new tab in your browser to open S3, then click the “Create Bucket” button. Give your bucket a name and select the region you want to use.
Once the S3 bucket is created, select the S3 Bucket from the list and go to the Properties Tab then scroll to the bottom, then you will see the option of “Static Website Hosting” click on that and select enable. and then add an index document and an error document. We will add index.html in both as we are deploying react app and it is a single-page application so all the requests should land to index.html, it is the same for all the SPA applications (React, Angular, Vue, etc).
Then go to the permissions tab, and add your bucket policy.
Now go back to the Code Pipeline tab, and select the S3 bucket as the deploy provider, then select the bucket you have created and configured for Static Hosting.
In this step, you will see all the services you have selected for all the stages. after reviewing the setting click on “Create pipeline”
Now you can see the pipeline running to fetch the latest code from GitHub, Code is building using Code Build, and the code is deployed to S3. When the stage process the request successfully it will turn green, and when the last step turns green that means the pipeline has executed successfully.
Now the pipeline is created successfully but we will attach CloudFront with S3 Static website Hosting URL
AWS CloudFront is a content delivery network (CDN) service from Amazon Web Services (AWS). It is designed to deliver content to end users with low latency and high transfer speeds. CloudFront can be used to deliver content from anywhere in the world with fast, reliable performance.
First, go to the S3 bucket on which the frontend website is hosted, then click on the properties tab and scroll to the bottom and copy the Static Website URL, you can also visit this URL to check if the website is working fine.
Now open CloudFront and click on create Distribution, then paste the S3 Static Website Hosting URL in the Origin Domain and leave the rest of the option as it is and click on “Create Distribution”
Once the distribution is created you can open the distribution to check the URL for the CloudFront website.
Now open Route 53 and perform the following steps.
1. Click “Create Hosted Zone” and enter the domain name you want to associate with CloudFront.
2. Now you will get a set of nameservers with this Hosted Zone. So now you have to add these nameservers to your domain account. Go to the domain provider and add these nameservers provided by hosted zone record.
3. Create a record set by clicking “Create Record Set” in the top-right corner.
4. Enter a name for the record set and select “A — IPv4 address” from the Type drop-down menu.
5. Enter the CloudFront distribution’s domain name in the “Value” field.
6. Click “Create” to create the record set.
7. Go to the CloudFront console and click the “Edit” button next to the distribution you want to associate with the domain. Enter the domain name you created a record set for in the “Alternate Domain Names” field. Click “Yes, Edit” to save the changes.
8. Go back to the Route 53 dashboard and click the “Create Record Set” button again.
9. Enter the same domain name as before and select “CNAME — Canonical name” from the Type drop-down menu. Enter the CloudFront distribution’s domain name in the “Value” field. Click “Create” to create the record set.
10. Your domain is now associated with CloudFront.
In this article, we walked through a comprehensive tutorial for setting up an AWS CI/CD pipeline for Backend Applications and Frontend applications using CodePipeline, CodeBuild, S3, CloudFront, Elastic Beanstalk, and Route 53. We discussed what CI/CD is and why you should use AWS for CI/CD. We then walked through the steps for setting up the pipeline and then ran the pipeline. By following this tutorial, you should now have a working CI/CD pipeline for your application.
