Hosting your static site with AWS S3, Route 53, and CloudFront for free(vickylai.com)
vickylai.com
Hosting your static site with AWS S3, Route 53, and CloudFront for free
https://vickylai.com/verbose/aws-static-site/
50 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.
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.
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.
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.
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.
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.
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?
> 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?
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.
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...
I gave an example of running a React app[1]
[1]: https://www.toptal.com/github/unlimited-scale-web-hosting-gi...
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.
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.
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.
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
[1] https://console.aws.amazon.com/quickstart-website/home
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
Or just use Netlify or Github pages that also do that for free now and are as simple as pushing to your linked repository.
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.
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.
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
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
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.
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.
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
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).
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
https://www.cox.com/residential/support/internet-ports-block...
They don't block 443 though
Port 25 is blocked for every residential Comcast customer.
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...
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...
[deleted]
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?
WAF also doesn't seem to be free, where did you read that?
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...
"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.
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". 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.
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!
[deleted]
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...
https://serverless-stack.com/chapters/deploy-the-frontend.ht...
This setup isn't free. The title is misleading.