Configure redirection to website endpoint on AWS S3 and CloudFront

I had created this website hosting on the custom domain (note.hommalab.io) and separated the main domain (hommalab.io) from this page. I liked to redirect access to the main domain to the custom domain automatically (the main reason for it is to pass the validation process of Google Adsense).

1. S3 : Redirect configuration on Website endpoint

Amazon S3 > Buckets > Properties > Static Website Hosting > Edit

• Static website hosting: Enable
• Hosting type: Redirect request for an object
• Host name: (your bucket address or personal domain)
• Protocol: https

After “save” configuration, the pagenshows bucket website endppoint at static website hosting section.

Check redirect response as below;

1
2
3
4
5
6
7
8

$ curl -i http://xxxx.xxxxx.s3-website-us-east-1.amazonaws.com
HTTP/1.1 301 Moved Permanently
x-amz-id-2: +jdAxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x-amz-request-id: xxxxxxxxxxxxxx
Date: Mon, 09 May 2022 06:28:05 GMT
Location: https://note.hommalab.io/
Server: AmazonS3
Content-Length: 0

This shows:

• status code: 301 Moved permenently

2. CloudFront: Add origin for S3 static website hosting

After you configure S3 bucket, you need to add origin for S3 static website endpoint directly to origin setting on CloudFront.

“Origin type” of CloudFront distribution needs to be changed to “Custom Origin” from “S3 Origin” because “Custom Origin” can use redirection on S3 static website hosting.

CloudFront > Distributions > Origins > Check your origin and Edit it.

This enables CloudFront to access bucket website endpoint on S3 static website hosting.

Then you will see “Custom Origin” at “Origin Type” at Origin tab at your distribution on CloudFront.

Additionally, you may need to invalid cache on CloudFront for removing past cache from CloudFront and enabling redirection.

References

• dev.classmethod.jp|S3のリダイレクト機能を改めて整理してみた
• dev.classmethod.jp|CloudFront - S3オリジンの構成でリダイレクトさせる方法を教えてください