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 |
Related resources
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/*" ] } ] }
