Intro
Suppose that you want to host a static public website on Amazon S3. You’ve registered a domain (e.g. example.com) either with Amazon Route53 or another domain registrar. Now, you want to use S3 to serve for the request htttp://www.example.com and http://example.com. I will show you how to host a static public website on AWS S3 with practical example. So follow these simple steps below and host your website on S3 easily.
Before we begin, let me explain basically two AWS services you work with: S3 and Route53.
What is Amazon S3?
You will use Amazon S3 to create buckets, upload a sample website page, configure permissions so that everyone can see the content, and then configure the buckets for website hosting.
What is S3 bucket and object?
Amazon S3 stores data in buckets as objects. A bucket is a logical storage unit used to store objects in AWS. Stored objects in a bucket may be in the form of any files such as text, image, movie, video, etc. A bucket can also be considered as a container and also the first thing we create in S3.
What is Amazon Route53?
You will use Route 53 to register domains -if you haven’t registered yet- and to specify where you want to route internet traffic for your domain. You will learn how to create Route 53 alias records that route traffic for your domain example.com and subdomain www.example.com to an Amazon S3 bucket that contains your HTML file.
Step 1. Create two S3 buckets
You need to create two buckets to support requests from both the root domain and subdomain.
- Root Domain bucket – example.com
- Subdomain bucket – www.example.com
You will keep your website content (HTML, CSS files etc.) in the root domain bucket. Subdomain bucket works only for creating redirect requests to the root. When someone enters on www.example.com, they will be redirected to example.com. So they will view your website content which is in this bucket.
a. Create root domain bucket
- First, sign in to the AWS Management Console using your credential.
- Use the search bar to access the S3 service homepage.
- Enter the Bucket name (e.g. example.com)
- Choose the Region where you want to create the bucket
- Untick Block all public access
- Tick and accept the result of opening to public access
- Click Create bucket at the bottom
b. Create subdomain bucket
- Click on the Create Bucket
- Enter your subdomain name (e.g. www.example.com).
- Choose the Region where you want to create the bucket.
- Click Create bucket at the bottom
NOTE: The best practice is to use the region close to your target clients to minimize latency and costs. We leave the settings other than the specified ones as default.
Step 2. Enable to host static website on S3 bucket
a. For Root domain
- First, navigate to the S3 home page in the AWS Console
- In the Buckets list, choose the name of root domain bucket (example.com)
- Choose the Properties section
- Click Edit next to Static website hosting at the bottom of the page
- Choose Enable to turn on the hosting
- Provide the file name of the index document, typically index.html
- You can skip the error document because Amazon S3 returns a default HTML error document
- Save changes and note the Bucket website endpoint under the Static website hosting.
b. For Subdomain
- Navigate to the S3 dashboard again
- In the Buckets list, choose the name of root domain bucket (example.com)
- Choose the Properties section
- Click Edit next to Static website hosting at the bottom of the page
- Choose Enable to turn on the hosting.
- Choose “Redirect requests for an object” as Hosting type
- Type your root domain name (example.com) in the Host name bar.
- Choose http as Protocol
- Save changes and close.
Step 3. Attach a bucket policy to the root domain bucket on S3
After you open your S3 Bucket to Public Access, you are required to add a bucket policy to grant public read access to your bucket. So, anyone on the internet can access and read your bucket so do your website.
- Under Buckets, choose the root domain bucket (example.com)
- Follow Permissions >> Bucket Policy>>Edit
- Copy the following bucket policy, and paste it in the Bucket policy editor.
- This step will grant public-read-access for your website
- !!! Don’t forget to replace “Bucket-Name” with yours!!!
You can use this page to get any policy templates suitable for your needs.Save changes and you need to see a message appears indicating that the bucket policy has been successfully added. If you see an error that says “Policy has invalid resource, …” make sure that the bucket name in the bucket policy matches your bucket name.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}Step 4. Upload index and website content on root domain S3 bucket
- Navigate to the S3 dashboard again
- Under Buckets, choose the root domain bucket (example.com)
- Click Upload
- Drag and drop all the contents of the webisite including index page
- Click Upload and wait. It may takes times to finish the process.
- Go back to inside of the root domain bucket.
- Check if the content was uploades successfully.
Step 5. Test your website endpoint on S3 bucket
You create and configure your domain buckets to host a public website. Now, you can test your endpoint.
- Under Buckets, choose the name of your bucket
- Choose Properties
- Scroll down the bottom of the page
- Under Static website hosting, choose your Bucket website endpoint.
- Your index document opens in a separate browser window
Step 6. Add alias records for your domain and subdomain
When you enter your domain name example.com or www.example.com into adress bar of your browser, you will not acess your website. The reason is that you are required to create the alias records that you add to the hosted zone for your domain maps example.com and www.example.com. So the alias records use the Amazon S3 website endpoints instead of using IP addresses.
a. For Root domain
- Use the search bar to access the Route53 console
- Choose Hosted zones
!!! If you’ve used Route53 to register your domain name, skip the following three steps.!!!
- Click Create hosted zones
- Enter your root domain name (example.com) into Domain name box
- Let other option be default, and click Create hosted zone at the bottom.
!!! Continue from this step.. !!!
- In the list of hosted zones, choose the name of the hosted zone that matches your domain name (example.com)
- Follow Create record>> Switch to wizard>>Simple routing
- Choose Next and Define simple record
- In Record name, keep the default value, which is the name of your hosted zone (example.com)
- In Value/Route traffic to, choose Alias to S3 website endpoint.
- Choose the Region
- Choose the the Amazon S3 website endpoint for the Region where the bucket was created, for example,
s3-website-us-east-1.amazonaws.com - In Record type, choose A ‐ Routes traffic to an IPv4 address and some AWS resources.
- For Evaluate target health, choose No
- Choose Define simple record.
b. For Subdomain
- In the list of hosted zones, choose the name of the hosted zone that matches your domain name (example.com)
- Click Create record
- Tick Simple routing and click Next
- Choose Define simple record
- In Record name for your subdomain, type
www - In Value/Route traffic to, choose Alias to S3 website endpoint.
- Choose the Region.
- Choose the the Amazon S3 website endpoint for the Region where the bucket was created, for example,
s3-website-us-east-1.amazonaws.com - In Record type, choose A ‐ Routes traffic to an IPv4 address and some AWS resources.
- For Evaluate target health, choose No.
- Choose Define simple record.
Step 7. Test the website
It is time to verify that the website and the redirect work properly. In your browser, enter your URLs. You can try the both root domain and subdomain URLs:
- Domain (
http://example.com) – Displays the index document in theexample.combucket. - Subdomain (
http://www.example.com) – Redirects your request tohttp://example.com. You see the index document in theexample.combucket.
Conclusion
In this post you learned more about AWS via a practical example, hosting a static public website on Amazon S3 by routing traffic with Amazon Route53 from end to end. Following seven simple and easy steps, you can have a static public website on Amazon S3.
Please contact us if you have any issues!
Thanks.
