12 ms·

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

74 points by startupflix 8y ago

dewey 8y ago
Or just use Netlify or Github pages that also do that for free now and are as simple as pushing to your linked repository.
- Hasz 8y ago
  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.
- tambre 8y ago
  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 https://twitter.com/netlify/status/933104630925426688
- tootie 8y ago
  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.
bitmapbrother 8y ago
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.
fsiefken 8y ago
If it's low bandwidth and you have your own ip address you could also host on your own internet connection.
- bdcravens 8y ago
  Ignoring the party that is keeping your server up etc, don't most ISPs block 80/443?
  - Zekio 8y ago
    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
    - StudentStuff 8y ago
      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).
      - RKearney 8y ago
        Port 25 is blocked for every residential Comcast customer.
      - jdofaz 8y ago
        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-blocked-or-restricted-by-cox.html https://www.cox.com/residential/support/internet-ports-block... They don't block 443 though
alban23 8y ago
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/cloudfrontcloudformation/ https://correctme.ifiamwrong.com/posts/cloudfrontcloudformat... [2] https://developers.google.com/speed/pagespeed/insights/?hl=en https://developers.google.com/speed/pagespeed/insights/?hl=e...
deleted 8y ago
[deleted]
always_good 8y ago
I liked CloudFront until I realized that getting DDoSed also DDoSes your wallet.
- ryanf323 8y ago
  Geo Restrictions on the Cloudfront distribution and a WAF will go a long way in mitigating against abuse and unnecessary costs.
  - diggan 8y ago
    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?
    - ryanf323 8y ago
      I never said WAF was free. Where did you read that?
      - diggan 8y ago
        Sorry, assumed you hinted at that since that was the premise of the article linked here.
    - ryanf323 8y ago
      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-mitigation/ https://aws.amazon.com/answers/networking/aws-ddos-attack-mi...
      - diggan 8y ago
        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 :)
erncl 8y ago
Sorry, these are terrible instructions. It would be good if someone with more experience could take another stab at this.
- Blackstone4 8y ago
  Check out the Servless Stack guide. I used it to deploy my React app. https://serverless-stack.com/chapters/deploy-the-frontend.html https://serverless-stack.com/chapters/deploy-the-frontend.ht...
joobus 8y ago
This setup isn't free. The title is misleading.
Zaheer 8y ago
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.
- billrobertson42 8y ago
  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.
  - Zaheer 8y ago
    >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.
roadbeats 8y ago
If this post gets very popular, we might see a second post from same author titled "How CloudFront charged me 300$ in one day?" :)
- kostarelo 8y ago
  "Lessons learned from hosting my personal website on AWS"
- joshribakoff 8y ago
  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.
flother 8y ago
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.
- rabidrat 8y ago
  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/ https://visidata.org/releases/ which is definitely served via CloudFront and definitely does not use a Lambda@Edge request function.
  - flother 8y ago
    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 > http://www.example.com/index.html http://www.example.com/index.html). It does not work on any subdirectory (such as http://www.example.com/about/ 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-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge/ https://aws.amazon.com/blogs/compute/implementing-default-di... A request for https://visidata.org/releases https://visidata.org/releases (no trailing slash) also results in an HTTP 302 to https://visidata.org/releases/ https://visidata.org/releases/ (with a trailing slash). Is there something other than Lambda@Edge functions handling this on visidata.org?
- fallenhitokiri 8y ago
andrewkslv 8y ago
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 https://console.aws.amazon.com/quickstart-website/home
amingilani 8y ago
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-github-pages-cloudflare#contract-just-respected-software-architects https://www.toptal.com/github/unlimited-scale-web-hosting-gi...
davidjnelson 8y ago
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.
scarface74 8y ago
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/ 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.
- CSDude 8y ago
  But wouldn't ApiGateway will be more expensive than Cloudfront+S3?
  - scarface74 8y ago
    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.
xz0r 8y ago
Also make sure to set X-Frame-Options appropriately to avoid clickjacking! It is not set by default.
minicoolva 8y ago
I'm using firebase hosting and netlify

74 points by startupflix 8y ago

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

Hasz 8y ago
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.
tambre 8y ago
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 https://twitter.com/netlify/status/933104630925426688
tootie 8y ago
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.

bitmapbrother 8y ago

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.

fsiefken 8y ago

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

bdcravens 8y ago
Ignoring the party that is keeping your server up etc, don't most ISPs block 80/443?
- Zekio 8y ago
  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
  - StudentStuff 8y ago
    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).
    - RKearney 8y ago
      Port 25 is blocked for every residential Comcast customer.
    - jdofaz 8y ago
      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-blocked-or-restricted-by-cox.html https://www.cox.com/residential/support/internet-ports-block... They don't block 443 though

alban23 8y ago

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/cloudfrontcloudformation/ https://correctme.ifiamwrong.com/posts/cloudfrontcloudformat... [2] https://developers.google.com/speed/pagespeed/insights/?hl=en https://developers.google.com/speed/pagespeed/insights/?hl=e...

deleted 8y ago

[deleted]

always_good 8y ago

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

ryanf323 8y ago
Geo Restrictions on the Cloudfront distribution and a WAF will go a long way in mitigating against abuse and unnecessary costs.
- diggan 8y ago
  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?
  - ryanf323 8y ago
    I never said WAF was free. Where did you read that?
    - diggan 8y ago
      Sorry, assumed you hinted at that since that was the premise of the article linked here.
  - ryanf323 8y ago
    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-mitigation/ https://aws.amazon.com/answers/networking/aws-ddos-attack-mi...
    - diggan 8y ago
      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 :)

erncl 8y ago

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

Blackstone4 8y ago
Check out the Servless Stack guide. I used it to deploy my React app. https://serverless-stack.com/chapters/deploy-the-frontend.html https://serverless-stack.com/chapters/deploy-the-frontend.ht...

joobus 8y ago

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

Zaheer 8y ago

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.

billrobertson42 8y ago
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.
- Zaheer 8y ago
  >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.

roadbeats 8y ago

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

kostarelo 8y ago
"Lessons learned from hosting my personal website on AWS"
joshribakoff 8y ago
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.

flother 8y ago

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.

rabidrat 8y ago
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/ https://visidata.org/releases/ which is definitely served via CloudFront and definitely does not use a Lambda@Edge request function.
- flother 8y ago
  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 > http://www.example.com/index.html http://www.example.com/index.html). It does not work on any subdirectory (such as http://www.example.com/about/ 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-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge/ https://aws.amazon.com/blogs/compute/implementing-default-di... A request for https://visidata.org/releases https://visidata.org/releases (no trailing slash) also results in an HTTP 302 to https://visidata.org/releases/ https://visidata.org/releases/ (with a trailing slash). Is there something other than Lambda@Edge functions handling this on visidata.org?
fallenhitokiri 8y ago

andrewkslv 8y ago

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 https://console.aws.amazon.com/quickstart-website/home

amingilani 8y ago

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-github-pages-cloudflare#contract-just-respected-software-architects https://www.toptal.com/github/unlimited-scale-web-hosting-gi...

davidjnelson 8y ago

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.

scarface74 8y ago

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/ 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.

CSDude 8y ago
But wouldn't ApiGateway will be more expensive than Cloudfront+S3?
- scarface74 8y ago
  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.

xz0r 8y ago

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

minicoolva 8y ago

I'm using firebase hosting and netlify