Static hosting on Amazon S3 - DNS Configuration

Question

I'm working on a little webapp (all client-side) I want to host it on Amazon S3. I've found several guides on this and have managed to create myself a bucket (with the same name as my domain), set it as a website and upload some content.

Where I'm struggling, and where all the documentation starts to get a bit vague, is how to properly configure my DNS.

All my registrar (123-reg) could suggest was web forwarding which gives me mydomain.com.s3.amazonaws.com

What do I have to configure, and where (ie. 123-reg / Amazon) can I get a clean URL?

Solution 1

Sounds like you've done most of the work already. For clarity I'll go over those steps again just to make sure you're set up properly:

1. Create an s3 bucket using your domain name as the bucket name (your bucket name should be www.example.com if you want your site to be example.com or www.example.com)

2. Upload your content to the s3 bucket. Choose a consistent name for your website index files (index.html usually). You can also upload a custom page for 404 Not Found errors. Call this 404.html. Give Read permissions to every file in your website so that the public can view it. Don't give any extra permissions to the bucket, just the files within.

3. Configure your bucket as a website. With the AWS console ( https://console.aws.amazon.com/s3/ ) you can select your bucket, click properties, then select the "Website" tab. Click enabled and set your index document to "index.html" and your error document to "404.html". You will also need to set your bucket with access permissions to allow access via the web (http://docs.amazonwebservices.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html)

4. Take a note of the "Endpoint" URL in the website configuration tab. This is where your website lives. You can open the link in a new window and you should see your website just as it will look. Click around and make sure everything works as expected.

You MUST use the endpoint address in all steps below. The normal www.example.com.s3.amazonaws.com won't work - you need to use the regional version (http://www.example.com.s3-website-us-east-1.amazonaws.com/)

Now, we can set up the DNS to give you a clean, custom URL.

First, we will map www.example.com to your site.

Using your DNS provider's tools, (123-reg in your case) you need to create a CNAME record to map www.example.com to www.example.com.s3-website-us-east-1.amazonaws.com

The CNAME is the only thing you need if you just want www.example.com. Most people also want "example.com" to work so we need another step.

example.com is often referred to as a naked domain or the apex record of the domain. The reason it's a problem is that it can't be a CNAME. CNAMEs only work on subdomains like "www." This makes it more difficult to point at s3.

The usual approach is to use a service to automatically redirect any request going to example.com to point to www.example.com. This will then pick up your CNAME record and your site will be served from s3.

The automatic redirect is not possible with plain old DNS so you have to use another service. Some DNS providers offer this service along with their DNS (godaddy does, amazon route53 does not. Not sure about 123-reg)

If your DNS provider doesn't do it, there are a few free services. One that I've used is http://wwwizer.com/naked-domain-redirect - it doesn't require any registration or payment.

To use this type of service, you need to create a DNS "A" record for your naked domain. For the wwwizer.com service, you would need to create an A record to point example.com to 174.129.25.170. That's all!

So, with this setup, if a user types example.com into their browser, the following would happen:

1. DNS query: example.com -> 174.129.25.170 (wwwizer.com's service)
2. HTTP request to 174.129.25.170 for example.com
3. 174.129.25.170 redirects example.com -> www.example.com
4. DNS query: www.example.com -> CNAME to www.example.com.s3-website-us-east-1.amazonaws.com
5. DNS query: www.example.com.s3-website-us-east-1.amazonaws.com -> points to Amazon S3
6. HTTP request for www.example.com is now served by Amazon S3

Enjoy!

Solution 2

I believe you must select all docs in your bucket, right click, and choose "Make Public". You must do this every time something changes in the bucket as well. I then usually right click on bucket, choose properties, choose permissions in right hand pane then add "Everyone as a "grantee" then give them only "list" permissions. The rest of your article is excellent. The part about the naked domain helped me resolve my issues. You can also have the naked domain redirected to the www domain within S3 under "Static Website Hosting" It's probably the easiest way. Thanks again for all your help.

Tim

Solution 3

Update 2019

As of today following DNS setting worked for me to get AWS S3 static website working :

Comments

[Merlin Mason]

Thanks so much for the clarity of all that! I've made the changes, just waiting for it to propergate, fingers crossed everything will work.

[Merlin Mason]

hmmm, still doesn't seem to be working. Here's a screengrab of the DNS config - cl.ly/CP6U The dot on the end seems suspicious, I didn't add that in there, and putting that URL in a browser with the dot on the end gives me a bucket unfound error. I tried removing it, but it comes back once I save, and I tried replacing it with a / but then I get an invalid error. Do you think this could be a problem at 123-regs end?

[secretmike]

Hi Merlin, I tried a lookup on your domain name (wpfill.me) and I don't see any of the records in your screenshot. Does 123-reg have a separate "publish" or "commit" step? It doesn't seem like your configuration has taken effect.

[Merlin Mason]

Hmmm, I think there must be a problem with 123-reg, I tried resetting the DNS records and waiting 48hours for it to propagate and still no joy. I then switched the DNS hosting over to Cloudflare and got the whole thing up and running in 20 mins :) Thanks for your help, really appreciate it!

[Merlin Mason]

ps, check out the site, maybe be helpful if you do any WordPress themes! — wpfill.me

[pri]

Amazon S3 now supports redirects with Route 53.

[tooluser]

This manual step is unnecessary if you apply a bucket policy as described above.

[Ryan Little]

CloudFlare now offers CNAME flattening for naked domains support.cloudflare.com/hc/en-us/articles/…