AWS CI/CD Pipelines

July 6, 2022

This document will outline how to use an Amazon Web Services (AWS) CodePipeline to push a static html website from a code repository to an S3 bucket.

Prerequisites:

AWS account
S3 bucket configured to host static html files
Git installed locally on your machine

Create the S3 bucket
Create Files for Git Repo
Create Git Repo
Create the pipeline
- Choose the source
- Skip the build stage
- Choose the deploy provider
- Review the pipeline
- Create the pipeline
Create a Change and push to Git Repo

Create the S3 Bucket to host static HTML files

A detailed webpage on how to carry this out is hosted here https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html.

You will need to enable the static site hosting by allowing public access, by unchecking the block all public access button:

(a dialogue will pop up to confirm that this is what you really want),

… and by enabling the static website hosting within the properties tab:

Edit the public policy and paste in the following code, replacing <bucket-name> for the name of your S3 bucket:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*"
        }
    ]
}

When you enable the static hosting, you will have the chance to identify the index document, and the error document. The error document is optional, but in this case, we should enter both. If a page is requested that does not exist, the requester will be sent to the error document (just like a 404 html page).

Create files for the Git Repository

Create a file named index.html with the following code:

<html>
  <head>
    <title>Sample Website</title>
  </head>
  <body>
    <h1>Your Sample Site</h1>
    <p>Website version 1.0</p>
  </body>
</html>

and a file named error.html with the following contents:

<html>
  <head>
    <title>Page not found</title
  </head>
  <body>
    <h1>Page not found</h1>
  </body>
</html>

Create a git repository

Navigate to CodeCommit and click create a repository.

Name your repository, and give a description if necessary.

If you are using a root user, you will not be able to commit to the website via ssh. You will only be able to use HTTPS. It is not recommeneded to use HTTPS for a root user, so if necessary, create a new user, via IAM service, and give that user access to AWS CodeCommit. This new user should have a public and private part of an ssh key. You can find more information on this at https://docs.aws.amazon.com/codecommit/latest/userguide/setting-up-ssh-unixes.html.

Then, navigate to CodeCommit and click the clone URL for SSH.

Then, open a terminal on your local machine, and type git clone and paste the URL that you copied in the previous step. Then press enter. Git will download the repository in to a new directory. You will need to change in to that directory with cd <your-directory>.

This is where your two files, index.html and error.html need to be. Place them here, (cp <path-to-file>/index.html . and cp <path-to-file>/error.html ..

Add these files to the repository and push them with these commands:

git add index.html
git add error.html 
git commit -m"Initial commit"
git push

You will be able to browse to the CodeCommit repository and see the files there.

Create the pipeline

Navigate to the CodePipeline page within the AWS console.

Click Create Pipeline. Name the pipeline. The pipeline needs an IAM role - this step will create one for you.

Choose the Source Setting

Choose artifact store location. You can choose the aws code repository.

Add source stage - you choose the source - here it will be your code repository. You will also need to choose the branch of the repo. Choose master or main, depending on your repo.

When choosing the Output Artifact format, you will be able to choose from a CodePipeline default, or Full clone. The full clone checks out the code, and needs an extra permission. For the sake of this tutorial, we will choose the CodePipeline default, which provides a zip package, which will then be unzipped in the S3 bucket.

You should choose the change detection options. You can choose AWSCodePipeline here for the changes (webhook).

Skip the Build stage

Skip Build stage (you do not need to build the static html files). You need a deploy stage.

Choose Deploy Provider

Choose a Deploy Provider. You will deploy here to S3, so choose AWS S3. Choose the bucket.

Ensure that unzip artifact is ticked before publishing.

Under Additional Configuration, you will not need to select public-read under the Canned ACL - optional setting. In this case, nothing should need changing.

Review the pipeline

Then you need to review your pipeline. Create the pipeline.

Create Pipeline

At the bottom of the review pipeline, you will see create pipeline. You can click this, and it will run the pipeline for the first time.

Then you should grab the URL endpoint for your S3 static website.

Create a change and push to the Git Repo

If you edit index.html or error.html and then push to the git repo, and then deploy to AWS S3 bucket.

git add index.html
git commit -m"Updating version"
git push

Once you push, you will notice that the pipeline runs, and that your changes are pushed to the S3 bucket.

Kabads