Building a Continuous Delivery Pipeline for Web Applications on AWS

Imagine making changes to your application and deploying them live with just a few steps. Continuous Delivery Pipeline makes this possible! In this blog, we’ll walk through setting up an automated pipeline using AWS services for a simple memory-matching game built with HTML, CSS, and JavaScript.

https://github.com/mohanapriyas1808/codepipeline-s3-game

What is a Continuous Delivery Pipeline?

Before we jump into the exciting process of building one, let’s first understand what a Continuous Delivery Pipeline is.

A Continuous Delivery (CD) Pipeline is a series of automated steps that streamline the journey of your application code from a developer's workstation to a live, production-ready environment. It ensures that:

• Code Changes are Tested: Each update is automatically verified for functionality.
• Changes are Reviewed: A manual or automated review step ensures quality control.
• Deployments are Seamless: Updates go live without interrupting the user experience. Think of it as an assembly line for your software. Just like cars in a factory pass through various stages assembly, painting, quality checks, and packaging your code moves through a pipeline: source control → build → test → review → deploy.

Why to use a Continuous Delivery Pipeline?

• Automation: Eliminates manual deployment tasks, saving time and effort.
• Faster Deployment: Speeds up the release of new features and fixes.
• Consistency: Ensures every deployment follows a reliable, tested process.

Pre-requisites

1. An AWS account
2. A GitHub account
3. Git installed on your computer

Application Architecture

How the Pipeline Works ?

Here’s a quick overview of what we’re building:

Source Stage: Fetches your code from GitHub.
Build Stage: Uses CodeBuild to test and package your game.
Approval Stage: Adds a manual review step to check your changes.
Deploy Stage: Automatically uploads your game to an S3 bucket with static web hosting.

Simple, right? Let’s break it down step by step.

Step 1: Set Up Your GitHub Repository

1. Create a repository on GitHub and push your game application source code.
2. Make sure your code is clean, well-structured, and ready to be deployed.

Step 2: Configure S3 for Hosting

1. Go to the S3 dashboard in AWS and create a new bucket with Block all public access disabled.
2. Enable Static Web Hosting in the bucket properties.
3. Update the bucket policy to make your application publicly accessible.

Bucket Policy
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

Step 3: Create a Build Project in CodeBuild

1. Open CodeBuild and create a new project.
2. Connect to GitHub using OAuth and select your source code repository.
3. Select Amazon Linux 2 from the Operating system dropdown menu.
4. Select Standard from the Runtime(s) dropdown menu.
5. Select aws/codebuild/amazonlinux2-x86_64-standard:5.0 from the Image dropdown menu.
6. Confirm that Linux is selected for Environment type.
7. Confirm that New service role is selected.
8. Select Insert build commands.
9. Choose Switch to editor.
10. Replace the Buildspec in the editor with the code below:

version: 0.2
phases:
  install:
    commands:
      - echo "No dependencies to install for static HTML application"
  build:
    commands:
      - echo "No build step needed for static HTML, CSS, and JavaScript files"
artifacts:
  files:
    - '**/*.html'  
    - '**/*.css'  
    - '**/*.js'    
    - 'images/**'  
  discard-paths: no  

11.Click the Create Project button and hit Start Build to test it!

Step 4: Set Up the Continuous Delivery Pipeline in AWS CodePipeline

1. Open CodePipeline and create a new pipeline.
2. Confirm that New service role is selected.
3. Select GitHub version 1 from the Source provider dropdown menu.
4. Connect to GitHub and select your source code repository.
5. Select main from the branch dropdown menu
6. Confirm that GitHub webhooks is selected.
7. Choose Next and select the CodeBuild project you just created.
8. Choose Next and select your S3 bucket which you have created for deployment with static web hosting enabled.
9. Review the pipeline and click the create pipeline button.

Access you application using the object's URL in the s3 bucket.

Step 5: Add a Review Stage

1. Choose the Edit button near the top of the page.
2. Choose the Add stage button between the Build and Deploy stages.
3. In the created stage, choose the Add action group button.
4. From the Action provider dropdown, select Manual approval.
5. Hit the Done button and the Save button in the top of the page to save the changes.
6. You will now see your pipeline with four stages: Source, Build, Review, and Deploy.

Step 6: Test the Pipeline

1. Commit a change to your source code in the github repository (in this case i have changed the name MEME Matching Game to Image Matching Game.
2. Watch the pipeline automatically start.
3. Approve the changes in the review stage.
4. Your updated game will be live now on the S3 bucket!

Once the Deploy Stage is complete refresh your application page to see the changes.

Conclusion

By combining AWS services like CodePipeline, CodeBuild, and S3, you can create a robust continuous delivery pipeline for your applications. This setup ensures a seamless deployment process, allowing you to focus on improving your application rather than worrying about deployments.

Ready to build your own pipeline? Start experimenting with AWS today!