CI/CD Pipeline - Deploy Website using AWS CodeStar.
Tags: aws, devops, community, cicd
Published: 2023-04-13 06:14:25


## Deploy Website using AWS CodeStar CI/CD Pipeline.

### AWS Cloud Hands on Lab Practice Series 2023.
>  **Project Overview —**

To Deploy HTML Website using CI/CD Pipeline using AWS Services.
>  **SOLUTIONS ARCHITECTURE OVERVIEW -**

![](https://cdn-images-1.medium.com/max/2000/1*i34zrl-uB-R2Dhc--wJG8w.png)
>  **First Lets understand CI/CD -**

**CI —**

* **Continuous Integration** is a DevOps software development practice where developers regularly merge their code changes into a central repository, after which automated builds and tests are run.

* The key goals of continuous integration are to find and address bugs quicker, improve software quality, and reduce the time it takes to validate and release new software updates.

**CD —**

* **Continuous Delivery** is a software development practice where code changes are automatically prepared for a release to production.

* It expands upon continuous integration by deploying all code changes to a testing environment and/or a production environment after the build stage for Modern application development.

![](https://cdn-images-1.medium.com/max/2362/0*x4lA_9gOyEhvigtp.png)
>  **STEP BY STEP GUIDE -**

* we will create a Continuous Integration/Continuous Delivery (CI/CD) pipeline using AWS, and then use that pipeline to automatically deploy a new version of the website.

* We’ll implement this with **AWS CodeStar**, a frontend tool that will automatically configure AWS DevOps Services — AWS CodeCommit, AWS CodeBuild, AWS CodeDeploy, and AWS CodePipeline.

* By the end of the lab, we should understand what a CI/CD pipeline is, as well as the basics of how to set one up and push an update to a source code repository to trigger a new deploy.

* **PREREQUISITE —** AWS Account with Admin Access.

**STEP 1** :

* Navigate to **AWS CodeStar.**

* Click Create project.

* If the Create service role dialog appears, click Create service role.

**STEP 2** : Click the HTML card & Click on Next.

![](https://cdn-images-1.medium.com/max/2000/1*lfkpiZjxm81HO-xTl8dCFw.png)

**STEP 3 :**

* Give Project name.

* For the repository, select **AWS CodeCommit**.

![](https://cdn-images-1.medium.com/max/2142/1*CttV5WNo6EbHxT33_wIfzw.png)

**STEP 4 :**

* Open EC2 in a new tab.

* Click KeyPairs located in the navigation menu.

* Click Create key pair.

* For Name, enter MyPipeline.

* Click Create key pair.

* Back in the CodeStar browser tab, close the key pair dialog.

* Click Next.

![](https://cdn-images-1.medium.com/max/2000/1*UDBiH8Ffh0FkbLxAvVzJOg.png)

**STEP 5 :**

* For the Instance type, select t2.micro.

* Choose the Subnet from one of the Availability Zones.

* Choose the MyPipeline Key pair and click Next.

![](https://cdn-images-1.medium.com/max/2000/1*aEDOBdQ52hzp8YC7nJZDAg.png)

**STEP 6 :**

* Click Create Project.

* It could take 5–10 minutes for the project to finish being set up.

* Behind the scenes AWS creates cloudformation stacks for necessary resources. ( Tip: Check Cloudformation Stacks for list of resources)

![](https://cdn-images-1.medium.com/max/2000/1*hiRXSU425kKQLo09kdh8ZA.png)

![](https://cdn-images-1.medium.com/max/3248/1*gCB4A6FcG5uvfiFkvI9K_w.png)

**STEP 7 :**

* Click View application to navigate to our CI/CD HTML web application.

![](https://cdn-images-1.medium.com/max/3122/1*q7XvaujHYcMsmWjHwySuvA.png)

![](https://cdn-images-1.medium.com/max/3206/1*2ERaBUJXc1Jux6bWbyhQNw.png)

**STEP 8 :**

* Back in the CodeStar browser tab, click IDE.

* Click Access your project code.

* Click Edit in AWS CodeCommit. This opens our repositories.

* Click the webpage folder.

* Click the index.html file. This is the code used to generate the website we just visited.

* Click Edit.

![](https://cdn-images-1.medium.com/max/3144/1*_p3P75a9Y4fPmmegPECiPw.png)

![](https://cdn-images-1.medium.com/max/3164/1*kyHIrmgak4em3gLhHEQuPA.png)

**STEP 9 :**

* Scroll down to line 61 & 62.

* Change the content as you want for it.

![](https://cdn-images-1.medium.com/max/2000/1*WDT33VgG1PYv0xs-Wll8HA.png)

**STEP 10 :**

* In the Commit changes to master section, set the following values:

- Author name: Your name
- Email address: test@anything.com
- Commit message: Update the website.
- Click Commit changes.

![](https://cdn-images-1.medium.com/max/3098/1*99SSawi52htI38AH-Uptog.png)

* Refresh the web app we visited before after 2 mins, where we should see our new message we just edited in the code.

* Congratulations on successfully completing this hands-on AWS lab!

![](https://cdn-images-1.medium.com/max/3452/1*8avRF43izjZj7Eo9LfA2hA.png)

* Source code & detailed steps can be found at [My Github Repo](https://github.com/Kunal-Shah107/AWS-CodeStar-CI-CD-Pipeline).

* **IMP NOTE** - This DEMO/POC might incur some charges if kept active for long time. So please make sure to clean up the environment once done.

*I am Kunal Shah, AWS Certified Solutions Architect, helping clients to achieve optimal solutions on the Cloud. Cloud Enabler by choice, DevOps Practitioner having 7+ Years of overall experience in the IT industry.*

*I love to talk about Cloud Technology, DevOps, Digital Transformation, Analytics, Infrastructure, Dev Tools, Operational efficiency, Serverless, Cost Optimization, Cloud Networking & Security.*

#aws #community #builders #devops #tools #CI/CD #infrastructure

*You can reach out to me* @ [acloudguy.in](https://acloudguy.in/)