Tutorial: S3 static site hosting over https with an external domain
The full tutorial: all you need to know and nothing more!
\AWS is AWeSome!™ at least most of AWS services are just a Head and Shoulder™ ahead of the rest of Cloud providers. there are, however, a few services that are either not as mature or are a bit more expensive comparing to alternatives.
For instance, routing traffic in Route53 cost 50 bucks per month compared to Zero in some other DNS providers( Of course we are comparing 🍏s to 🍊s here! ), Also Route53 supports only a limited portion of TLDs (Top Level Domains). So it may not be the To-Go choice for every project.
So what?! Just buy the domain somewhere else and CNAME it to AWS!
Well, even if you didn’t care about all the other possible disadvantages ( like additional redirects ), there are a few Gotchas that may not present themselves to you right off the bat.
SSL ENFORCED 👮🏻 TLDs!
Because some jerks in the domain of web security have pre-decided for us to use the more secure communication protocols, HTTPS, some of the top level domains (TLDs) like .app are preloaded and can not be reached over HTTP using most of the modern browsers!
It’s highly recommended to serve any domain, and especially these domains, exclusively with SSL encryption ( through https ) otherwise, your app may behave very differently in different browsers and platforms, especially through Mobile and Desktop. potentially compromising your users' security.
S3 static file hosting:
S3 is a great choice for the majority of web-app projects,
- It’s cheap
- It’s fast
- It’s secure
- It’s easy
- It’s robust and resilient
It has, however, one issue, it does not support SSL.
That means even if you were OK with serving your users without SSL ( which you should not be! ), you can NOT use S3 with preloaded TLDs mentioned above as browsers will prevent your S3 bucket to be used with those domain names ( again, they require your files being served through https which is not supported by S3 ).
In this article, I’ll try to help you to use S3 with CloudFront to make it possible to serve bucket contents over
httpswith many additional benefits coming from CloudFormation, while still being cheap and much more resilient.
OK! Just tell me HOW TO DO IT already!
1. Go to
AWS Certificate Management console on N.Virginia region.
2. Request cert.
Request a public certificate and click the button to proceed!
3. Add Domain Names
As shown, enter your domain and/or sub-domains. you can also use a wildcard sign (an asterisk (*) ) like me or enter
It’s OK if Amazon is not your registrar!
4. Validation methods
You have 2 options,
Email is self-explanatory and straight-forward, just know that you need to have email forwarding enabled for your domain or be able to check emails sent to admin@ihue.app for instance.
DNS option may be a lil bit more involved but not a biggy! here I’ll show you how to DNS validate through NameCheap but it’s pretty much the same with other registrars.
Keep this page open or store the values as you’ll need them.
5. DNS Validation
Go to the DNS settings where you manage your domains and add a new CNAME Record.
put only the first part (everything before the first dot!) of the filed Name ( from AWS ) to Host and Value to Value, then save and wait!
If it didn’t work, …wait! … may take up to several hours.
If after a few hours it still didn’t work, … just use the email darn it!! but it works! double check your strings!
OK!
We’ve got our certificate issued, now what?!
6. Go to CloudFront:
Go to the CloudFront console and select Create Distribution option. Next page is long so we shortened it in the screenshot.
For Origin Domain Name Paste your S3 bucket public static site endpoint,
Scroll down the page and look and change the rest of the settings as/if needed.
Then near the bottom, in the Distribution Settings section, enter your custom domain name you want to use, like ihue.app!
Then select the Custom SSL Certificate radio button and select the certificate we just created in the next field.
Then click Create to create your CloudFront Distribution!
Once done click on its ID to open the Distribution properties page.
Here take note of your distribution Domain Name.
You’ll need this string to create a CNAME in your DNS provider that directs the traffic to your domain to CloudFront!
8. Add the CNAME!
Go to your Registrar or DNS provider website and go to the DNS settings page and add a new CNAME record.
Put whatever subdomain you used earlier ( I used dev ) or enter www for the root ( it’s not recommended to have a CNAME for the naked domain (root) but you can redirect that to www by adding a redirect record for @ to www! although this strategy would NOT work for HTTPS!).
Put your CloudFront Domain Name with a . at the end in the value field.
9. Et voila! 🎉
You’re done, brothah!
go to your custom domain and check it out, it sometimes takes some times for some DNS servers to update their list, so if it didn’t work right away give it a few and try again!
💡 iHue.app ?!
Ihue is the domain name I use for the development of a project codenamed Kugelblitz which is a remote smart-home / smart-lights control panel which makes it possible to create lighting effects for your Philips-Hue smart lights!
If you want to try it out, the Production app is available at: hue-fx.com ! 💡
🔌 -—- Check it out! it’s free and it’s awesome!!
Connect!
Feel free to follow me on Twitter or connect with me on LinkedIn or let me know what you think bellow, also click on that pretty 👏 button for me!!
Also, No need to say, if you have any questions, feel free to let me know!
Much love, ❤
- mim
