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

1 hour
  • 3 Learning Objectives

About this Hands-on Lab

As a budding DevOps engineer, you want to use a variety of AWS services to smooth your development pipeline. Specifically, you want to set up an AWS native CI/CD workflow. In this hands-on lab, we look at how to use AWS CodeStar to automate the setup of a CodeStar project, including AWS CodeCommit, AWS CodeDeploy, and AWS CodePipeline.

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.

Additional Resources

Log in to the live AWS environment using the credentials provided.

Make sure you're in the N. Virginia (us-east-1) region throughout the lab.

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?