Deploying and Updating a Web Application with a CI/CD Pipeline Using AWS CodeStar

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Create a CodeStar Project

1. Navigate to the AWS CodeStar console page.
2. Click Start a project.
3. In the Create service role dialog box, select Yes, create role.
4. In the Filter text box toward the upper left, type "Website".
5. Select the HTML 5 Website card option to create a CodeStar project based on a website.
6. For the Project name, enter "Lab Project".
7. Notice the Project ID and the Repository name have been auto-filled for you.
8. Select AWS CodeCommit as your repository type and click Next.
9. Click Create Project.
10. When prompted, click Amazon EC2 Management Console link to create an EC2 key pair.
11. Return to the CodeStar console, press the refresh button located to the right of the Select a Key Pair dropdown menu, select the key you just made, check the box to acknowledge you have the key, and click Create Project.
12. When prompted, enter your name as the Display Name and an email address (can be fake) in the Email text box.
13. Click Next.
14. For Pick how you want to edit your code, select AWS Cloud9.
15. Click Next.
16. Accept the default options for the Cloud9 environment, and click Next.

Review the Deployed Website

1. Within the CodeStar project page, click the link in the Application endpoints card.
2. The web page we deployed should now load.

Deploy a Change to the Website

1. From the CodeStar project page, from the AWS Cloud9 environments card, click See my environments.

2. From the card that shows the Cloud9 environment, click Open IDE.

3. When Cloud9 loads, navigate to the folder lab-project > lab-project > webpage, and load the file index.html.

4. Locate some text within the HTML that is displayed on the page (e.g., "Congratulations") and change this text to something else (e.g., "This lab is great!").

5. Save the file index.html.

6. In the Bash console panel at the bottom of the Cloud9 IDE, enter the following commands:

   cd ~/environment/lab-project/
   git add .
   git commit -m "This is my change."
   git push

7. Navigate to the CodeStar project console page, where you should now see CodePipeline deploying the changes you made.

8. Navigate back to the application endpoint (if the tab was already open, refresh it), and see the changes you made to the website.