AWS_EN

Publish your site with S3 static website hosting

スポンサーリンク
Publish your site with S3 static website hosting with CloudFormation AWS_EN
スポンサーリンク
スポンサーリンク

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

Diagram of publishing your site with S3 static website hosting with CloudFormation

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.

awstut-fa/011 at main · awstut-an-r/awstut-fa
Contribute to awstut-an-r/awstut-fa development by creating an account on GitHub.

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: 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…
Bucket policies use JSON-based access policy language.

Using bucket policies

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.

S3 for HTML files to be published.

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.
s3-website dash (-) Region ‐ http://bucket-name.s3-website-Region.amazonaws.com
s3-website dot (.) Region ‐ http://bucket-name.s3-website.Region.amazonaws.com

Website endpoints

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.

Accessing a public Web site.

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.

Access the error page.

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/

When you access a specific URL, you will be redirected.

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:
s3.Region.amazonaws.com

Making requests using the REST API

In the case of this bucket, the content can be accessed as follows

Accessing HTML files published in REST API format.

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.

Make sure that the S3 bucket is publicly exposed by the ACL.

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.

Make sure that the HTML file is publicly exposed by the ACL.

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.

タイトルとURLをコピーしました