Automate static website deployment to Amazon S3 - AWS Prescriptive Guidance

Automate static website deployment to Amazon S3

Created by Sankar Sangubotla (AWS)

R Type: N/A

Source: Application Development

Target: S3

Created by: AWS

Environment: PoC or pilot

Technologies: Websites & web apps; DevOps

AWS services: Amazon S3; AWS CodePipeline

Summary

This pattern describes the steps required to add a continuous integration and continuous delivery (CI/CD) pipeline to an existing bucket in Amazon Simple Storage Service (Amazon S3) on the Amazon Web Services (AWS) Cloud. This pattern uses GitHub as a source provider. The pipeline is initiated when new items are committed, and the changes are then reflected in the S3 bucket.

Prerequisites and limitations

Prerequisites 

  • An active AWS account

  • Knowledge of Amazon S3 and AWS CodePipeline

  • A static website, including output/source files such as HTML 4/5, CSS 2/4, images, fonts, and icons

  • A GitHub repository

Limitations 

  • This process is recommended for displaying read-only content. It isn't recommended for collecting or transferring sensitive information, because Amazon S3 uses the HTTP protocol.

  • Websites built using PHP, JSP, or APS.NET are not supported, because Amazon S3 doesn't support server-side scripts.

Architecture

Source architecture

 

Target technology stack

  • AWS CodePipeline

  • AWS CodeStar

  • Amazon S3

  • Any web server

Target architecture

Tools

Tools

  • AWS CodePipeline – A continuous delivery service you can use to model, visualize, and automate the steps required to release your software. You can quickly model and configure the different stages of a software release process. CodePipeline automates the steps required to release your software changes continuously.

  • AWS CodeStar – AWS CodeStar is a cloud-based service for creating, managing, and working with software development projects on AWS.

  • Amazon S3 – A highly scalable object storage service. It can be used for a wide range of storage solutions, including websites, mobile applications, backups, and data lakes.

Epics

Task Description Skills required
Create an S3 bucket.

Open the Amazon S3 console and choose Create bucket to create an S3 bucket for hosting the website and uploading content.

AWS General, Developer
Enter the bucket name.

Enter a unique DNS-compliant name for your bucket. An S3 bucket name must be globally unique, because the namespace is shared by all AWS accounts.

AWS General, Developer
Select a Region.

Choose either the default AWS Region or select a specific Region for where your bucket will be based.

AWS General, Developer
Set permissions.

Allow public access to your bucket by choosing Permissions and then choosing Edit. Choose Off for Block all public access. By default, this check box is selected for security purposes. Choose Save and review the information before choosing Create bucket. This closes the pop-up and creates the bucket.

AWS General, Developer
Upload folders and files.

Upload your folders and files by following the instructions in the Amazon S3 documentation. For links, see the Related resources section.

AWS General, Developer
Task Description Skills required
Enable static website hosting.

In the Properties tab for the S3 bucket, choose Static website hosting, and then Use this bucket to host a website.

AWS General, Developer
Define home and error pages.

Specify file names and extensions for the home page and error page (for example, index.html and error.html). Make sure that the root folder contains these files and that they serve as landing pages.

AWS General, Developer
Task Description Skills required
Attach bucket policy.

Create a bucket policy so that other AWS applications can access and perform actions on your bucket. In the Permissions tab, choose Bucket policy. In the Bucket policy editor, paste the bucket policy provided in the Additional information section.

AWS General, Developer
Access and test the website.

Enter the endpoint URL to access the website; for example: http://www.spsbuddy.xyz.s3-website-us-east-1.amazonaws.com. The endpoint follows two formats, depending on your Region. For more information, see the Related resources section.

AWS General, Developer
Task Description Skills required
Select a CodePipeline name.

Sign in to the AWS Management Console and open the AWS CodePipeline console. Choose Create pipeline and enter a name for the project.

AWS General, Developer
Create a service role.

Create a service role or select from the list of service roles if provided.

AWS General, Developer
Select an artifact store.

Choose a custom location and specify an existing bucket if you want Amazon S3 to create a bucket and store the artifacts in it. If not, use the default location.

AWS General, Developer
Choose a source provider.

Choose GitHub (Version 2) from the list of source providers.

AWS General, Developer
Connect to GitHub.

Authorize GitHub to grant CodePipeline access to your GitHub repository by following the instructions from Step 2: Create a connection to GitHub in GitHub connections from the AWS CodePipeline documentation.

AWS General, Developer
Create repository and branch.

Choose the repository and branch to create as part of the commit step.

AWS General, Developer
Change detection options.

This automatically starts your pipeline when a change occurs in the source code. If turned off, your pipeline only runs if you start it manually or on a schedule.

AWS General, Developer
Deploy provider.

Choose Amazon S3 as the target from the list of available targets.

AWS General, Developer

References 

Additional information

To grant public read access for your website, copy the following bucket policy, and paste it in the bucket policy editor: 

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