Creating a CI/CD Pipeline with AWS CodePipeline to Deploy a Static Website on S3

Create a CodeCommit Repository from the Management Console

1. Navigate to CodeCommit.
2. Under Repositories, click Create repository.

3. In Repository name, enter “sample-static-site”.

4. Under Tags, click Add.

5. Set the following values:

• Key: CreatedBy
• Value: Your name

6. Click Create.

Add an index.html and JPG File to the Repository

1. Scroll to the bottom of the page and click Add file > Upload file.

2. Click Choose file and select the index.html file downloaded from GitHub.

3. In Commit changes to master, set the following values:

• Author name: Your name
• Email address: Your email
• Commit message: Landing page

4. Click Commit changes.

5. Click Repositories.

6. Click sample-static-site to open the repository page.

7. Click Add file > Upload file.

8. Click Choose file and select the **Mount.jpg** file downloaded from GitHub.

9. In the Commit changes to master section, set the following values:

• Author name: Your name
• Email address: Your email
• Commit message: Photo

10. Click Commit changes.

Create an S3 Bucket and Configure It To Host a Static Website

Create an S3 Bucket

1. Navigate to S3.
2. Click Create bucket.

3. Set the following values:

• Bucket name: Unique bucket name
• Region: US East (N. Virginia)

4. Click Next > Next.

5. Deselect Block all public access.

6. Select I acknowledge that the current settings might result in this bucket and the objects within becoming public.

7. Click Add tag.

8. Set the following values:

• Key: CreatedBy
• Value: Your name

8. Leave the rest as their defaults and click Create bucket.

Enable Static Website Hosting

1. Click the newly created bucket to open it and select the Properties tab.
2. Scroll to Static website hosting at the bottom and click Edit.
3. In Static website hosting, select Enable.
4. Set the following values:

• Index document: Index.html
• Error document: error.html

5. Click Save changes.

Create an S3 Bucket Policy

1. Select the Permissions tab.
2. Scroll down to Bucket policy and click Edit.
3. Copy the bucket ARN number above the policy editor.
4. Click Policy Generator.
5. In Select Type of Policy, select S3 Bucket Policy.
6. In Add Statement(s), set the following values:

• Effect: Allow
• Principal: *
• AWS Service: Amazon S3
• Actions: GetObject
• Amazon Resource Name (ARN): **<BUCKET_ARN_NUMBER>/***

7. Click Add Statement.

8. Click Generate Policy.

9. Copy the generated policy to your clipboard.

10. Return to the bucket policy editor in S3 and paste in the policy.

11. Click Save changes.

Create a Pipeline in AWS CodePipeline That Deploys a Static Website

1. Navigate to CodePipeline.
2. Under Pipelines click Create pipeline.

3. In Pipeline name, enter “sample-static-site-pipeline” and click Next.

4. On the Source page, set the following values:

• Source provider: AWS CodeCommit
• Repository name: sample-static-site
• Branch name: main

5. In Change detection options, select AWS CodePipeline and click Next.

6. Click Skip build stage > Skip.

7. In Deploy on the next page, select Amazon S3 as the deploy provider.

8. Set the following values:

• Region: US East (N. Virginia)
• Bucket: Your bucket name

9. Click Extract file before deploy.

10. Leave the rest as their defaults and click Next.

11. Click Create pipeline.

12. Once the deploy stage completes, click the Amazon S3 URL under Deploy to verify deployment.

13. Select the Properties tab and scroll down to Static website hosting at the bottom of the page.

14. Click the bucket website endpoint URL to view the static website.

This guide explains how to set up a pipeline with AWS CodePipeline to automatically deploy a static website to Amazon S3. The process includes:

1. Creating a CodeCommit Repository:

A repository is created in AWS CodeCommit to store website files like index.html and images, with proper commit messages.

2. Setting Up an S3 Bucket:

An S3 bucket is created and configured for static website hosting by enabling hosting options and setting access policies for public viewing.

3. Building the CodePipeline:

A pipeline is created in AWS CodePipeline to pull the website files from CodeCommit and deploy them to the S3 bucket. The build stage is skipped since no processing is required for static files.

4. Deploying and Testing the Website:

The pipeline deploys the site to the S3 bucket, which can be accessed via the static website hosting endpoint to confirm successful deployment.

This setup automates the delivery process, making it easy to keep the website up to date.

Conclusion

Building a CI/CD pipeline using AWS CodePipeline to deploy a static website on Amazon S3 is an efficient way to automate the deployment process. By integrating AWS CodeCommit, S3, and CodePipeline, you ensure that any updates to your website files are automatically deployed, saving time and reducing the chances of manual errors. This setup is particularly useful for simple, static websites and demonstrates the power of AWS’s integrated services for streamlining workflows.

FAQs

Q: Why use AWS CodePipeline for deploying a static website? A: CodePipeline automates the deployment process, ensuring that changes in the repository are quickly and reliably delivered to the hosting environment (S3). It simplifies managing and deploying updates without manual intervention.

Q: Do I need a build stage for a static website? A: No, static websites typically don’t require a build stage as the files (like HTML, CSS, and images) are directly deployable.

Q: Can I use a custom domain for the S3-hosted website? A: Yes, you can configure Amazon Route 53 or another DNS provider to point your custom domain to the S3 bucket hosting your static website.

Q: How do I make my S3 bucket publicly accessible? A: You can configure the bucket policy to allow public access and enable static website hosting. Ensure the settings are aligned with your security requirements.

Q: What happens if there is an error in the deployment process? A: CodePipeline provides detailed logs and error messages to help identify and resolve issues during deployment.

Q: Is this setup suitable for dynamic websites? A: No, this setup is designed for static websites. Dynamic websites require additional infrastructure, such as servers or serverless architectures, to process backend logic.