Configure the S3 static website hosting to publish your site
Find out how to use the S3 static website hosting to publish a website.
If your website consists of only static content such as HTML, CSS, and JavaScript, you can use the S3 static website hosting feature to publish your site.
You can use Amazon S3 to host a static website. On a static website, individual webpages include static content. They might also contain client-side scripts.
Hosting a static website using Amazon S3
Environment
Create a single S3 bucket. Activate the static website hosting feature of the bucket.
Place an HTML file and attempt to access it via HTTP over the Internet. In this verification, we aim to create a configuration that achieves the following behavior
- Root page: Display index.html placed in the bucket
- Error page: Display error.html placed in the bucket
- Redirect: Redirect to “aws.amazon.com” when the URL prefix is “/s3/”.
CloudFormation template files
We will build the above configuration using CloudFormation.
Place the CloudFormation template at the following URL.
https://github.com/awstut-an-r/awstut-fa/tree/main/011
Template file points
We will cover the key points of each template file to configure this environment.
Enable static website hosting feature in WebsiteConfiguration
Define S3-related resources in fa-011.yaml.
Resources:
S3Bucket:
Type: AWS::S3::Bucket
Properties:
BucketName: !Sub "${Prefix}-bucket"
PublicAccessBlockConfiguration:
BlockPublicAcls: false
BlockPublicPolicy: false
IgnorePublicAcls: false
RestrictPublicBuckets: false
WebsiteConfiguration:
ErrorDocument: error.html
IndexDocument: index.html
RoutingRules:
- RoutingRuleCondition:
HttpErrorCodeReturnedEquals: '404'
KeyPrefixEquals: s3/
RedirectRule:
HostName: aws.amazon.com
Code language: YAML (yaml)Enable the static website hosting feature by setting the WebsiteConfiguration property.
The IndexDocument and ErrorDocument properties specify the root page and the page to be displayed when an error occurs. As mentioned earlier, set them to display index.html and error.html, respectively.
The RoutingRules property allows you to configure settings related to redirection. In this case, when the URL prefix is “/s3/” and the HTTP code is 404, we set it to redirect to a similar URL with the host name “aws.amazon.com”.
Allowing access to content in bucket policies
Then, check the access permission settings for the contents in the bucket.
Resources:
BucketPolicy:
Type: AWS::S3::BucketPolicy
Properties:
Bucket: !Ref S3Bucket
PolicyDocument:
Statement:
Action:
- s3:GetObject
Effect: Allow
Resource: !Sub "arn:aws:s3:::${S3Bucket}/*"
Principal: "*"
Code language: YAML (yaml)Access to the bucket itself and the objects in the bucket can be controlled by ACLs or bucket policies.
This time, we will use bucket policies for access control. Bucket policies can define access control in a notation based on IAM policies.
You can create and configure bucket policies to grant permission to your Amazon S3 resources…
Using bucket policies
Bucket policies use JSON-based access policy language.
This time, we will configure the bucket to publish all the contents in the bucket, using wildcards (*) in the Resource property to specify all the contents in this bucket, and using wildcards in the Principal property to target all the accessors. In the Action and Effect properties, set “s3:GetObject” and “Allow” to allow reading the contents in the bucket.
Architecting
Using CloudFormation, we will build this environment and check its actual behavior.
Create CloudFormation stack
Create a CloudFormation stack.
For information on how to create stacks and check each stack, please refer to the following page
After checking the resources in the stack, the main resource information that was created this time is as follows
- Bucket name: fa-011-bucket
Place the file in the bucket
The next step is to place the HTML file in the bucket.
The file placement is also performed from the AWS CLI.
$ aws s3 cp html s3://fa-011-bucket/ \
--recursive
upload: html/index.html to s3://fa-011-bucket/index.html
upload: html/error.html to s3://fa-011-bucket/error.html
Code language: Bash (bash)The installation was successful.
Check the status of the file installation from the AWS Management Console.
You can see that there are indeed two files installed.
Accessing hosted site
Now that we are ready, let’s actually access the site.
Accessing a site configured with the static website hosting feature is done through a website endpoint.
When you configure your bucket as a static website, the website is available at the AWS Region-specific website endpoint of the bucket… Depending on your Region, your Amazon S3 website endpoint follows one of these two formats.
Website endpoints
s3-website dash (-) Region ‐ http://bucket-name.s3-website-Region.amazonaws.com
s3-website dot (.) Region ‐ http://bucket-name.s3-website.Region.amazonaws.com
In the case of the Tokyo region (ap-northeast-1), it corresponds to the dash region above.
In the case of this bucket, the URL is as follows
http://fa-011-bucket.s3-website-ap-northeast-1.amazonaws.com
Normal page
You can actually access it.
I was able to access the site normally. As specified, index.html was returned as the root page.
Error page
The next step is to intentionally try to access content that doesn’t exist and generate an error.
The error.html was returned. This is also as specified.
Redirect
Finally, check the redirects.
Try to access the following URL.
http://fa-011-bucket.s3-website-ap-northeast-1.amazonaws.com/s3/
The AWS S3 page is now displayed. You can see that it has been successfully redirected.
Access via REST API endpoint
We just accessed the site via the website endpoint, but you can also access it via the REST API endpoint.
Amazon S3 endpoints follow the structure shown below:
Making requests using the REST API
s3.Region.amazonaws.com
In the case of this bucket, the content can be accessed as follows
For the differences between the website endpoint REST API endpoint, please refer to Key differences between a website endpoint and a REST API endpoint.
When controlling access with ACLs
In this case, we used bucket policies to set access privileges, but the same configuration can be done using ACLs.
Amazon S3 access control lists (ACLs) enable you to manage access to buckets and objects. Each bucket and object has an ACL attached to it as a subresource. It defines which AWS accounts or groups are granted access and the type of access.
Access control list (ACL) overview
In order to set up access privileges for static website hosting with ACLs, you need to set up ACLs for the bucket itself and the objects inside the bucket.
The following is an example of ACL configuration for a bucket body.
Resources:
S3Bucket:
Type: AWS::S3::Bucket
Properties:
BucketName: !Sub "${Prefix}-bucket"
#AccessControl: Private
AccessControl: PublicRead
Code language: YAML (yaml)Specify the Canned ACL for content publishing for the bucket itself. A canned ACL is an ACL that is prepared in advance for various uses.
Amazon S3 supports a set of predefined grants, known as canned ACLs. Each canned ACL has a predefined set of grantees and permissions.
Canned ACL
In this case, by specifying “PublicRead” for the AccessControl property, we will apply public-read to the bucket to grant read rights to all users.
The following is the result of configuring ACLs for the buckets.
Next is an example of ACL configuration for an object.
$ aws s3api put-object-acl \
--bucket fa-011-bucket \
--key index.html \
--acl public-read
$ aws s3api put-object-acl \
--bucket fa-011-bucket \
--key error.html \
--acl public-read
Code language: Bash (bash)Again, for the two objects, we apply public-read, which grants read rights to all users.
The following is the result of setting an ACL for a file.
As described above, the same behavior as the bucket policy can be achieved by setting appropriate ACLs for the bucket itself and the objects.
Summary
We have confirmed how to publish a website using the S3 static website hosting feature.
We have confirmed that access permissions to the bucket itself and its contents can be configured by using bucket policies or ACLs.