AWS CI/CD 101: Create A Simple Pipeline to an S3-hosted Static website
A step-by-step guide using the AWS console to create a pipeline to an S3 bucket used to host a static website
In this blog post, using the AWS Console I will walk through how to create a simple pipeline using AWS CodePipeline to deploy code files to an S3 bucket used for hosting a static website. The code files will be sourced from an S3 bucket.
Requirements
An AWS Account and IAM user with Admin permissions
Overview of main steps
- Create an S3 bucket to host a static website and deploy v1.0 of the website
- Create an S3 bucket for the source stage of the pipeline
- Create a Pipeline and deploy v2.0 of the website via the AWS CodePipeline
Let’s get started! 🍿
1. Create an S3 bucket to host the website
To host a static website on S3, the S3 bucket should be publicly accessible, and static website hosting must be enabled on the bucket. Note that S3 bucket names must be globally unique.
Create the S3 bucket by navigating as follows on the AWS Service console.
- S3 → Create Bucket
- Bucket Name: static-website-11111 (provide a globally unique name)
- Region: Select a region of your choice
- Uncheck the box: Block All Public Access
- Acknowledge the previous selection to Enable Public Access
- Accept remaining defaults and Create Bucket
After Creating the Bucket, go to Properties → Static Website Hosting → Edit. Enter the following settings:
- Static website hosting: Enable
- Hosting type: Host a static website
- Index Document: index.html
- Error Document: Error.html
- Save Changes
Note the URL under the static Website hosting section after Enabling Static website hosting. This URL will be used to view the website.
Enable Public Read Access on the S3 bucket by navigating to:
Permissions → Bucket Policy → Edit and paste the bucket policy below. Replace theBucketName in the policy below with the Name of your bucket.
See the screenshot below for reference.
Create two files named index.html and error.html with the content below.
Upload the index.html and error.html files to the bucket.
Go to a web browser and paste the website endpoint URL noted previously. Verify Access to your static website now hosted on S3. Good job so far 🙌
2. Create the Bucket for the Source stage of the pipeline
To use an S3 bucket as the source stage of a pipeline
- The bucket must be in the same region as the pipeline you intend to create
- Versioning must be enabled on the bucket
Create the bucket by navigating as follows on the AWS Service console.
- S3 → Create Bucket
- Bucket Name: source-bucket-demos3-pipeline (globally unique name)
- Region: select a region of your choice
- Bucket Versioning: Enable
- Accept remaining defaults and Create Bucket
You must enable versioning on the bucket as the Pipeline uses the version IDs of an S3 object to identify different revisions of your source file.
Update Line 8 of the index.html file from “Website Version: 1.0” to “Website Version: 2.0” as shown below. Zip both files into a file named website.zip
Upload the website.zip file to the newly created bucket.
3. Create a Pipeline using AWS CodePipeline
You must create the pipeline in the same region as the S3 Bucket in step 2. Create a CodePipeline by navigating as follows on the AWS Service console.
- CodePipeline → Pipelines → Create Pipeline
- Pipeline Name: DemoS3Pipeline
- Service role: New service role
- Under Advanced settings: Accept defaults and Click Next
With the setting and defaults under the Advanced settings section:
- An S3 bucket will be created in the same region as the pipeline and used as the storage location for artifacts generated from the pipeline
- A Bucket Policy will be added to ensure only encryption in transit and server-side encryption with AWS KMS is used for S3 objects.
- A new service role will also be created for Codepipeline with the required permissions to get and put objects to the artifact and website bucket.
Select the following for the source stage:
- Source Provider: Amazon S3
- Bucket: Select Bucket created in step 2
- S3 object key: Enter the zip file name previously uploaded (website.zip)
- Change detection options: Amazon CloudWatch Events
- Click Next
The settings above will enable the following:
- A Cloudtrail trail will be automatically created or an existing one will be updated to log data events for the specified bucket and zip file.
- An Eventbridge rule will also be created to start the pipeline whenever the specified zip file is uploaded to the bucket.
Skip the build stage as the source HTML files don't need to be built.
Select the following for the Deploy Stage.
- Deploy Provider: Amazon S3
- Region: The region where the S3 bucket for the static website was created
- Bucket name: Select the bucket name used to host the static website.
- Check the box: Extract file before deploy
It is important you check the box shown below to ensure the output artifact of the source stage which is a zipped file is extracted into the S3 bucket you use to host your website.
Review the Pipeline settings on the review page and click Create Pipeline.
4. Observe Pipeline Executed and the New Website Version
As soon as the pipeline is created, it will be automatically triggered using the website.zip file as input to the pipeline. The file will be unzipped and deployed to the bucket used to host your static website after the Deploy stage succeeds.
Refresh your browser with the same URL and see the Updated version 2.0 of your website 🙌
Congratulations 🎉👏 on building a pipeline for your S3-hosted static website using AWS CodePipeline. That was easy as 123!
Till my next post, I leave you this quote from Albert Einstein.
“Try not to become a man of success, but rather become a man of value.” — Albert Einstein
