Building a Continuous Deployment Pipeline for your Static Website on AWS with CodePipeline

By Bhuvaneswari Subramani / Apr 27, 2023

Regardless of whether your website is static with unchanging content or dynamic with a blend of personalized and external data-sourced content, Amazon S3 bucket is an optimal hosting solution for static content. In this article, we will explore the steps to set up a Continuous Deployment Pipeline for your static website on AWS using AWS CodePipeline.

To fast-track the continuous deployment pipeline setup, let’s assume that a secured static web site is hosted on Amazon S3, routing to a custom domain example.pro using Route 53, deployed SSL using Amazon Certificate Manager and Amazon CloudFront for serving the content with low latency using global network of Amazon CloudFront edge locations.

Let's set up the continuous integration and continuous deployment using AWS CodePipeline to get the source from GitHub and deploy it to the static website (https://example.pro), hosted in the Amazon S3 bucket using AWS CodePipeline.

With Developer Tools on AWS, such as AWS CodePipeline, you have the flexibility to seamlessly integrate with various third-party toolsets, allowing customers to reuse parts of their existing DevOps tools while migrating to the cloud.

Table of Contents

  • AWS Services Used
  • Create & Configure Pipeline
    • Step 1: Pipeline
    • Step 2: Source
      • Connection String
    • Step 3: Build
    • Step 4: Deploy
    • Step 5: Review
  • Pipeline Output
  • Can I disable Pipeline?
  • AWS CodePipeline pricing
  • Cleanup Instructions

AWS Services Used

  • Amazon S3
  • AWS CodePipeline
  • Identity & Access Management

Amazon S3

Amazon Simple Storage Service (Amazon S3) is storage for the internet and static website hosting functionality helps you to host a static website on S3 bucket without the need to provision and manage servers to meet the scale. Read here for more details on how to use S3.

AWS CodePipeline

AWS CodePipeline is a fully managed continuous delivery service that helps you automate your release pipelines for fast and reliable application and infrastructure updates. CodePipeline automates the build, test, and deploy phases of your release process every time there is a code change, based on the release model you define. Click here to read more.

CodePipeline Components

Pipeline - A pipeline is a workflow construct that describes how software changes go through a release process. You define the workflow with a sequence of stages and actions.

Stage - A stage is a group of one or more actions. A pipeline can have two or more stages.

Action - An action is a task performed on a revision. Pipeline actions occur in a specified order, in serial or in parallel, as determined in the configuration of the stage.

Transition - The stages in a pipeline are connected by transitions, and are represented by arrows in the AWS CodePipeline console. Revisions that successfully complete the actions in a stage will be automatically sent on to the next stage as indicated by the transition arrow. Transitions can be disabled or enabled between stages.

Identity and Access Management

AWS Identity and Access Management (IAM) is a web service that helps you securely control access to AWS resources. You use IAM to control who is authenticated (signed in) and authorized (has permissions) to use resources. Click here to read more

Create & Configure Pipeline

You will see a two-stage pipeline to setup automated deployment for every commit into GitHub to the static website hosted on Amazon S3.
The Pipeline setup is a five-step process as detailed below

Step 1: Pipeline

  • Sign into the AWS Management Console and open the CodePipeline console at http://console.aws.amazon.com/codesuite/codepipeline/home
  • Create a new Pipeline with the following settings in the same region as that of S3 bucket. Leaving the New Service Role as default will create a new service role and assign required permissions

Step 2: Source

Choose GitHub (Version 2) as source provider, connection string, repository name, and the ch.
Enable the change detection option by checking Start the pipeline on source code change so that your pipeline starts automatically when a change occurs in the source code. Leave the Output artifact format to CodePipeline default.

Note: The GitHub (Version 1) action is not recommended since it uses OAuth apps to access your GitHub repository. Instead, choose the GitHub (Version 2) action to access your repository by creating a connection. Connections use GitHub Apps to manage authentication and can be shared with other resources.

Connection String

In order to connect to GitHub, first Create a connection and then Connect to Github

Click Connect to GitHub, enter the connection name, select the GitHub App, if it is already configured else click Install a new app to authenticate against your GitHub account.

Step 3: Build

The build stage is not required, since we are going to deploy a static website to the Amazon S3 bucket and no code compilation involved

Step 4: Deploy

Choose Amazon S3 as deploy provider with the region where your S3 bucket hosting the static website is created, the bucket name, and check Extract file before deploy in order to deploy the artifact before deployment (you may ignore Deployment path & Additional configuration as default).

Step 5: Review

When all the configuration is done, preview to verify your changes and create the pipeline

Pipeline Output

As soon as the pipeline is created, the first execution is initiated. Subsecued deployments will be triggered whenever a change is committed to the integrated branch or when you explicitly click Release Change button. Your resulting pipeline will look as follows when the deployment is successful and will show the commit id and comment added for commit.

Can I disable a Pipeline?

You can disable a transition from one state to another (in our case from source to deploy) but cannot disable or deactivate a pipeline.

AWS Code Pipeline Pricing

  • You pay only for what you use. AWS CodePipeline costs $1.00 per active pipeline* per month.
  • An active pipeline is a pipeline that has existed for more than 30 days and has at least one code change that runs through it during the month. There is no charge for pipelines that have no new code changes running through them during the month. An active pipeline is not prorated for partial months.
  • As part of the AWS Free Tier, AWS CodePipeline offers new and existing customers one free active pipeline each month.
  • You may incur additional charges for storing and accessing your pipeline artifacts in Amazon S3 and for triggering actions from other AWS and third-party services that you connect to your pipeline.

So in the above example, you can expect a $1 bill per month if there are changes committed to the GitHub repo.

 

Cleanup Instructions

Here you go with instructions to clean-up the resources that you have created as part of this article.

Delete Pipeline

  • Go to AWS CodePipeline console, select the Pipeline which you would like to delete (example.pro-pipeline in this example) and click Delete Pipeline
  • Enter the expected value for the delete confirmation box and click Delete button

Delete Github Connection

  • In AWS CodePipeline console, go to Settings -> Connections and select the connection that you would like to delete, accept the confirmation and proceed for deletion.

Delete CodePipeline Service Role

  • Go to IAM console -> Roles, search for the specific AWSCodePipelineServiceRole name, click on Delete button to follow the instructions for deletion.
Main Logo
Rocket