Hosting your static site with AWS S3, Route 53, and CloudFront for free | Hacker News Reader

Hosting your static site with AWS S3, Route 53, and CloudFront for free

vickylai.com

74 pointsstartupflix48 comments

This isn't really free - it's just free for first year until your free tier runs out. It's still super cheap though. I host several sites with this setup and never have a bill over $2 / month. Benefit of this setup over github pages / netlify / etc is it uses standard primitives and will always exist. I used to use Heroku to host several sites and had to go through a massive migration when they stopped offering a free tier.

The odds are good that it will "always" exist, not really always of course but long enough that we don't care. However, Amazon may come to the decision that it's not worth keeping this low spending tier of customer and price them out of the service.

Hopefully, it's a good enough of a hook to get you started on AWS that it is worth it to keep it cheap like it is now.

>Amazon may come to the decision that it's not worth keeping this low spending tier of customer and price them out of the service.

Given the downward pricing trends of cloud providers for past few years as well as increased competition (Azure & GCP primarily) I think we can safely assume pricing tiers will remain reasonable.

The article's from December 2017 and you can see from the response headers that it's hosted on GitHub Pages again.

There are plenty of gotchas when serving a static site via CloudFront. Let's say you have a page at example.com/foo/index.html. If you want it serve it from example.com/foo/ then you need to write a Lambda@Edge request function to handle the directory index — the article implies that CloudFront's default root objects handle this, but they don't. That's for the domain root only.

There's also the case of redirecting example.com/foo to example.com/foo/ (adding the trailing slash). That requires a Lambda@Edge response function. It's all a lot of fun to get working, but you do start to wonder if your static site really is static.

Hm, while I agree that there are some gotchas serving static sites via AWS, the one you mention seems to work fine for me. See e.g. https://visidata.org/releases/ which is definitely served via CloudFront and definitely does not use a Lambda@Edge request function.

Well that's interesting. An AWS blog post from October 2017 says:

> CloudFront does allow you to specify a default root object (index.html), but it only works on the root of the website (such as http://www.example.com > http://www.example.com/index.html). It does not work on any subdirectory (such as http://www.example.com/about/). If you were to attempt to request this URL through CloudFront, CloudFront would do a S3 GetObject API call against a key that does not exist.

https://aws.amazon.com/blogs/compute/implementing-default-di...

A request for https://visidata.org/releases (no trailing slash) also results in an HTTP 302 to https://visidata.org/releases/ (with a trailing slash). Is there something other than Lambda@Edge functions handling this on visidata.org?

Both problems you mentioned are solved by using S3 configured to serve the buckets contents as static site as origin for CloudFront.

While it’s not strictly CloudFront only doing the work, it’s still a static site.

Ah, that explains it. I store my websites in private S3 buckets, and give CloudFront access using an IAM policy. I must need to jump through extra hoops because of that.

To get default index.html files to serve properly, use the http url from the static site pane in your s3 bucket setup. Don't use the bucket listed in the drop-down on cloudfront. Then it will work properly. You don't need a lambda function.

If this post gets very popular, we might see a second post from same author titled "How CloudFront charged me 300$ in one day?" :)

"Lessons learned from hosting my personal website on AWS"

The exposure could be worth $300 suppose for example it landed the author a lucrative job offer or business opportunity. The other alternative is generally your site goes down.

Nice post. You can go one step further and automate most of the process with CloudFormation [1].

I also switched some time ago from Gitlab to CloudFront and S3 because it lets me optimize things that get you to 100% at Pagespeed Insights [2] such as Cache Control.

[1] https://correctme.ifiamwrong.com/posts/cloudfrontcloudformat... [2] https://developers.google.com/speed/pagespeed/insights/?hl=e...

Or just use Netlify or Github pages that also do that for free now and are as simple as pushing to your linked repository.

Netlify is an awesome service, it's amazing that it doesn't cost anything.

I push, they build.

I can specify versions, build parameters, etc, easy SSL certs, never noticed any down time, etc.

Granted my site sees like <100people/mo, but still -- for a personal/CV site, I don't think you can do much better.

Neither supports IPv6 officially, though.

GitHub Pages actually had IPv6 support, but they removed it, because they added HTTPS support (that's what their support said). But I checked and the old IPv6 CDN endpoints actually still work, even with HTTPS.

Netlify actually has also promised IPv6 support "at the start of the year"[0], but I wouldn't count it.

[0] https://twitter.com/netlify/status/933104630925426688

I'm using Firebase hosting right now and it's super easy. Connected my own domain and adding a cert is just a checkbox. They don't do the DNS though, but that part is pretty simple. Just register on namecheap and add some A records.

I liked CloudFront until I realized that getting DDoSed also DDoSes your wallet.

Geo Restrictions on the Cloudfront distribution and a WAF will go a long way in mitigating against abuse and unnecessary costs.

Which locations are you gonna restrict from using your website? Is that how you want the web to generally work?

WAF also doesn't seem to be free, where did you read that?

I never said WAF was free. Where did you read that?

Sorry, assumed you hinted at that since that was the premise of the article linked here.

Typically, you restrict countries that you receive abusive traffic from and do not have any business in.

"Is that how you want the web to generally work?"

My suggestions on ways to prevent paying for CloudFront charges from junk requests are not prescriptive. However, they are AWS best practices when dealing with DDoS.

https://aws.amazon.com/answers/networking/aws-ddos-attack-mi...

Guess we're living very different lives on the same web. "do not have any business in." is not something I'm familiar with on the web, as the part of the web I love is the one without borders. But each to their own :)

As an American expat living in Vietnam, I find it annoying when companies decided they "do not have any business" where I live.

For example, if I want to purchase southwest airline tickets, I have to use a VPN.

Tell me about it! I'm Swedish, I live in Spain but I prefer all my technology text (OS language, websites and everything) to be in English. But services don't realize this. So to buy from Apple, I need to be on the Spanish website, that doesn't offer a English version, while the Swedish version does offer English, even though they have exactly the same content and everything looks the same... Same goes for almost all shops, Amazon, PSN, AppStore, Google Play and so on. The world is not ready for a global web it seems.

Off-topic but interesting anyways, I've noticed that people who move from the US to elsewhere, often call themselves "expats", while people who move from elsewhere to the US, are called "immigrants". Why is that?

Off-topic but interesting anyways, I've noticed that people who move from the US to elsewhere, often call themselves "expats", while people who move from elsewhere to the US, are called "immigrants".

I think it depends on how you view the move. Expat (which in my experience I've heard more Brits use than anything else), implies that you still 'belong' to your home country but are choosing to live elsewhere for a (perhaps very long) while. Immigrant implies that you are leaving your old country with a view of 'belonging' to your new country.

Simplified slightly, if you ask someone where they're from and they answer "I'm from X, but living in Y" they are an expat. If they answer "I'm from Y, but was born in X" they're an immigrant.

CloudFront is AWS's CDN product, and is charged on volume. CloudFlare is a separate company that sits in a similar place in your service map, but is very differently priced.

Oops, I misread, sorry!

Shameless plug, but if you're trying to avoid eating into your free tier, I documented GitHub pages + Cloudflare for the same effect. Just turn your Cloudflare cache to super high, and GitHub shouldn't ever get any real load.

I gave an example of running a React app[1]

[1]: https://www.toptal.com/github/unlimited-scale-web-hosting-gi...

Sorry, these are terrible instructions. It would be good if someone with more experience could take another stab at this.

Check out the Servless Stack guide. I used it to deploy my React app.

https://serverless-stack.com/chapters/deploy-the-frontend.ht...

If you use cloudflare instead of cloudfront and route53, you don’t have to pay the $.50/mo for dns, but much more importantly you get free bandwidth from cloudflare, and will pay next to nothing in s3 costs if you cache liberally with cloudflare at the cdn level.

Requires a credit card to setup and you will be charged if your usage exceeds the free tier limit.

Please type your payment information so we can verify your identity. We will not charge you unless your usage exceeds the AWS Free Tier Limits.

Your website doesn't have to be static to host it for free on AWS. You can do server side stuff with Lambda and if you can get away with the 128MB instance (easy enough to do for one function) you get 1 million request a month for free and 888 hours of processing time. (https://aws.amazon.com/lambda/pricing/). The free tier for Lambda doesn't expire.

The only free hosted database that I am aware of is Mongo Atlas a 3 Node cluster with 500MB oh storage.

But wouldn't ApiGateway will be more expensive than Cloudfront+S3?

Good point, API Gateway is $3.50 per 1 million requests after the first year. Data out is .09 - .12 per gigabyte depending on the region.

This setup isn't free. The title is misleading.

Why this stuff so complicated? Previously AWS has a link on the homepage where you could run a static website in couple clicks [1]. Now they removed it.

[1] https://console.aws.amazon.com/quickstart-website/home

If it's low bandwidth and you have your own ip address you could also host on your own internet connection.

Ignoring the party that is keeping your server up etc, don't most ISPs block 80/443?

I think that depends highly on which country you are in, I've never experienced this in Denmark before

EDIT: and I've used pretty much all the ISPs we have around

Same here stateside, neither Comcast, Centurylink, Cox, Charter, Wave, Verizon or Frontier blocks port 80 or 443. Some do block mail ports 25 & 587, Comcast & Centurylink leaves these mail ports open unless you do some spamming (then you have to call and have 'em unblock them).

Port 25 is blocked for every residential Comcast customer.

Cox has blocked port 80 for residential customers for a long time, probably since around when @home went away.

https://www.cox.com/residential/support/internet-ports-block...

They don't block 443 though

Also make sure to set X-Frame-Options appropriately to avoid clickjacking! It is not set by default.

I'm using firebase hosting and netlify

Reply on news.ycombinator.com