10 ms·

Hosting your entire web application using S3 and CloudFront

119 points by root993 6y ago

mike503 6y ago
Am I missing something? This is not "your entire web application" - this is the static piece of it, it still requires an application server doing the dynamic stuff via XHR. Bad title. Should say "how to host the frontend to your SPA for pennies on CloudFront + S3"
bobblywobbles 6y ago
This is a great guide, thanks for sharing!
- root993 6y ago
  Happy to help :)
nabaraz 6y ago
Why do we need to make everything so complicated and fancy? I am not trying to be rude but I hate this trend of everything needs to be hosted on AWS and pay hundreds of dollars. Why not dump these static files into a shared hosting? It shouldn't cost you more than couple of bucks a month. You get SSL, Email, sub-domains, SSL, logs and much more for couple of bucks a month.
- root993 6y ago
  Not exactly sure what you mean by shared hosting. Could you elaborate? Also would this be hosted behind a CDN?
  - travbrack 6y ago
    I think they mean a traditional web host that has a ton of sites crammed into a single server and a cpanel. Like bluehost, dreamhost, etc.
    - root993 6y ago
      Ah, I see but hosting the site behind a CDN is imperative in our case so this would not work
- docsapp_io 6y ago
  One point mentioned in the article is the caching for global users and shared hosting does not give you that. At most you can replace S3 with shared hosting, not CDN part.
  - iagovar 6y ago
    I have shared + Cloudflare for Spain and Latin America audiences and it works pretty well. IDK AWS is for other purposes, for simple apps it's not worth it IMO.
- kesor 6y ago
  The article explains how to do it without complicating it with shared hosting, and it only cost $.8/mo for 100k visits. Not knowing something doesn't mean its complicated, it just means it is unfamiliar, for you. Once you did this several dozen times, its the simplest thing ever.
  - nabaraz 6y ago
    With AWS, your costs are unpredictable. You could be spammed or some search bots decide to go haywire and you will incur hundreds of dollars. The second thing is AWS is very expensive for what it does. Do you need to add DNS records? There is Route 53 which costs extra. Do you need emails? There is AWS Simple Email which costs extra. Do you need logs? The storage cost (although little) is added to your bill. Do you need databases? Do you need support? All I am saying is that shared hosting should be first considered for static websites.
    - deleted 6y ago
      [deleted]
    - chiefalchemist 6y ago
      Yes and no. Flip it around. AWS let's you not pay for things you don't need. Then, if there's a biz requirement for something else, you make that _investment_. Of course there are alternatives. But shared hosting is a roll of the dice. For a hobby project or POC? Sure, start with shared. But if you're certain shared is not a semi-longer term option don't wasteyour time. Shared is cheap for a reason. Saving a couple dollars will dry up quickly in downtime and headache time.
    - gonzo41 6y ago
      All of those things cost money and effort to maintain. Im not a super AWS fanboy but each IaaS component is a feature that's easy-ish to do on your own with a server and some software. When you go server less or cloud native you have to really think about the bits of tech that bring real value. If you look at the free tier limits, and monthly costs. Putting a simple rest app behind API gateway with a few buckets and a little lambda gives you a whole lot of bang for very little cost. If you're a person in a region and your website is going to get bursty use by people in your region then it's a pretty cheap deal. Monthly costs < 1 coffee for a blog or some non trivial page.
- fortran77 6y ago
  If your site can be hosted on S3, with free-tier CloudFront caching, it will be under $1.00/month for a few hundred thousand views.
  - milankragujevic 6y ago
    You can put CloudFlare in front and turn on forced caching for all content. I checked multiple times with @jgrahamc and he assured me (and other people) that the free tier is really free and force caching static files for website (so not massive media hosting) is allowed and OK. You can set edge cache TTL to a month and have CloudFlare keep your site appearing "up" even if the backend server is down completely.
- f311a 6y ago
  I see your point, but shared hosting is not a reliable solution. It fails pretty often (for a very short time) because it’s shared. You need a CDN. There are a lot of cheap options. A few missed orders can cost you more.
  - risyachka 6y ago
    Cloudflare free tier should be enough in most cases.
    - ies7 6y ago
      And replace s3 with backblaze b2
      - christophilus 6y ago
        Or Wasabi, which is a drop in replacement for S3. B2 still doesn’t support direct signed uploads from the browser, last I checked.
        ies7 6y ago
        Wasabi has that 90 days storage policy that makes it complicated for me.
- artiscode 6y ago
  You provide a valid point, but where's the hacker factor in choosing something readily available? 100k views for under $1 seems like the true hacker spirit, utilizing whatever AWS offers without breaking the bank.
- flywheel 6y ago
  I'm hosting a photo sharing SPA on S3/Cloudfront/Lambda with a robust user system including email verification, and a few GB of image files, and I pay $0.25/month at most. Yeah, it's a personal/friends-only site so it doesn't see much traffic, but that was kind of the point - I wanted to pay next to nothing for this site if nobody visits it, and it is working well for that. $3.00/year is pretty cheap.
mrweasel 6y ago
Nice, but the article leaves out the bit about where the API is hosted. It really isn’t the entire web application, just the easy part. Still a nice guide for static website owner.
- Zombieball 6y ago
  You could put it in a lambda function.
  - hmate9 6y ago
    Not sure why this is downvoted. It’s a perfectly valid “serverless” architecture. The only downside is that it can get quite messy maintaining.
    - 0xbkt 6y ago
      Where even is the downvote button?
      - austhrow743 6y ago
        Hidden until you get more karma.
    - duiker101 6y ago
      I would guess because then it's "just another serverless web app" and invalidates the title which is "Hosting your ENTIRE web app...".
    - root993 6y ago
      Hello, Author here. Could you elaborate on what part of the maintenance would be messy? I was under the impression that maintaining this would be quite easy because there is no physical server present anywhere in this setup.
      - bonestamp2 6y ago
robertlagrant 6y ago
You can do a very similar thing with CloudFlare and any free/cheap backing store (e.g. S3, Github Pages, etc).
- modeless 6y ago
  Yes, plus Cloudflare is free for unlimited traffic. I use it in front of App Engine, and I've served 1m pages in a day for $0 because I don't even hit the App Engine free tier limits after Cloudflare's cache takes the traffic.
  - ignoramous 6y ago
    > Yes, plus Cloudflare is free for unlimited traffic. Subject to fair use (which is fair). https://webmasters.stackexchange.com/questions/88659/how-can-cloudflare-offer-a-free-cdn-with-unlimited-bandwidth https://webmasters.stackexchange.com/questions/88659/how-can...
    - risyachka 6y ago
      And unless you consume many many terabytes they won't even notice you as this is nothing compared to the amount of traffic they serve. I know many people who are saving 5+TB per month of their free tier without any problems.
    - 0xbkt 6y ago
      What about the Workers?
      - ignoramous 6y ago
        Matthew Prince is on-record that Cloudflare Workers are an exception to (unspecified) bandwidth limits in that you're free to use a very large amount of it without having to pay for their Enterprise / Pro / Business plans. See: https://news.ycombinator.com/item?id=20791660 https://news.ycombinator.com/item?id=20791660
makethetick 6y ago
You should take a look at Amplify (https://aws.amazon.com/amplify/ https://aws.amazon.com/amplify/), it will make the whole process considerably less painful, allow you to easily access AppSync (graphql) and Lambda with your code all in one place, then also trigger rebuilds on git commits.
- speedgoose 6y ago
  Too much vendor lock-in.
  - thih9 6y ago
    Could you give examples where vendor lock in becomes a problem? Ideally something practical (as opposed to theoretical) or something from personal experience. I generally agree but I feel that more details could be useful.
    - ssss11 6y ago
      Any time you want to leave that vendor. If they up their prices greatly, reduce service levels, refuse to give attention to improving service levels.. break a clause in the contract... an so on.
      - rpadovani 6y ago
        While this is true in theory, I don't recall a single instance of AWS increasing pricing or reducing service levels - not saying that is impossible, but it hasn't happened so far (at least that I remember)
    - rat9988 6y ago
      When you deal with google cloud and they up their price. Didn't see it with the other vendors though.
    - speedgoose 6y ago
      It's simple, you are not stuck with a vendor. A practical example that happened to my employer recently : we migrated to Microsoft Azure when they opened two datacenters in our country. We didn't have to change any code because we don't use vendor locked solutions.
donorman 6y ago
Deploying is also easily scripted using the aws-sdk package, see the docs for .S3 and .Cloudfront. Be aware though that if you have a large amount of files the the cost of invalidations at cloudfront will add up quickly, but you can how ever cherry pick files to invalidate.
pete911 6y ago
I have similar setup but fully automated with GitHub an travis. I use cloudflare instead of cloudfront to reduce cost as well - https://reisinger.co.uk/posts/s3_hosting/ https://reisinger.co.uk/posts/s3_hosting/
moltar 6y ago
Or you can just use free Netlify tier
- tilolebo 6y ago
  One big advantage of Netlify is the automated deployment of pull requests into their own dedicated environment. It's so nice to be able to review a PR not only based on its code, but also by having a look at the built website.
  - mwarkentin 6y ago
    You can do this in AWS with Amplify Console as well.
    - tilolebo 6y ago
      Also with a regular Cloudfront distribution? I don't want to use Amplify, I just need the PR-preview feature.
- volkandkaya 6y ago
  Yep, everything else is overkill unless you have a large amount of traffic.
tobilg 6y ago
If you want to host a static website on AWS with one command, and not clicking around in the Console, have a look at https://github.com/tobilg/serverless-aws-static-websites https://github.com/tobilg/serverless-aws-static-websites For fullstack websites, I created https://github.com/tobilg/aws-fullstack-website https://github.com/tobilg/aws-fullstack-website which will additionally create a API based on API Gateway and its HTTP API feature
risyachka 6y ago
Using CloudFront for a static website is a good choice if you really want to burn some cash with their outrageous bandwidth price. Cloudflare free tier can serve terabytes of bandwidth for free. Add some cheap hosting or free tier EC2 or GCP and you are good to go.
- aloknnikhil 6y ago
  Or Cloudflare workers KV. https://workers.cloudflare.com/ https://workers.cloudflare.com/
- aeoanx 6y ago
  Cloudflare can be difficult at times. I am in New Zealand and a company I worked for used Cloudflare and we found out that our site was being served from Japan most of the time (8800 km away). This meant a request would go: Auckland -> Japan -> Sydney (our data center) The fix was to upgrade to their $200/mo plan and we found we would be served from AKL or SYD most of the time, occasionally still Japan.
  - manigandham 6y ago
    This is often an internet routing issue. Also their Argo product can sometimes have bad routes chosen. Did you try their support? As a CDN, they’re very interested in fixing any performance problems quickly.
    - deadlyllama 6y ago
      The two biggest telcos in NZ won't peer freely. At least for the biggest (Spark) Cloudflare delivers from far away. Also Cloudflare "protected" 8chan during the Christchurch terrorist shooting last year which makes them unpopular in some quarters. I have heard that given as a reason our largest telco won't peer with them.
      - rjeli 6y ago
        funny, I have distaste for cloudflare because the ceo “woke up one morning in a bad mood” and decided to boot the daily stormer. Censorship without due process. not trying to debate that decision here, but it seems they got the worst of both worlds.
0xbkt 6y ago
Cloudflare + Backblaze B2 (or Wasabi) beats this hard. They are Bandwidth Alliance partners, so you won't incur egress traffic cost in B2 side. Cloudflare's Free plan is more than enough in most cases. Also B2 gives you free 10 GB storage when you sign up.
- yorick 6y ago
  I've had poor experiences with Wasabi's availability in practice. Does cloudflare deal with hours-long outages well? Do you know if B2 fares better?
  - deleted 6y ago
    [deleted]
  - mythrwy 6y ago
    For whatever it's worth, I have had 0 issues with Wasabi availability in about a year and a half of use.
- gradschool 6y ago
  Cloudflare blocks Tor users unless they solve a Google CAPTCHA and accept cookies. By saving money you limit your audience and make the world a worse place. https://blog.torproject.org/trouble-cloudflare https://blog.torproject.org/trouble-cloudflare
  - jgrahamc 6y ago
    Have you tried visiting a Cloudflare-protected site using the TBB recently? (as in within the last few years?). We don't block Tor users. I use TBB to browse and don't see this problem.
  - deleted 6y ago
    [deleted]
  - peterwwillis 6y ago
    > Users are either blocked outright with CAPTCHA server failure messages, or prevented from reaching websites with a long (and sometimes endless) loop of CAPTCHAs, many of which require the user to understand English in order to solve correctly. For users in developing nations who pay for Internet service by the minute, the problem is even worse as the CAPTCHAs load slowly and users may have to solve dozens each day with no guarantee of reaching a particular site. Rather than waste their limited Internet time, such users will either navigate away, or choose not to use Tor and put themselves at risk. So, if we don't make our websites available in languages used by oppressed peoples, if we don't make sure it's very low latency, and if we try to filter out abusive users, we're making the world a worse place. Not just leaving the world in a bad state, but actively increasing the harm done to the world, just by making a website that not everyone can or wants to use. Not only do I not buy this argument, it makes me want to support Tor less, if for no other reason than blatantly ignoring why the captchas were put up in the first place.
BayesianDice 6y ago
I did find one catch with the S3/CloudFront approach, relating to default document, when I was looking at hosting a static Hugo site a few months ago. With S3 web hosting, you can specify a default object which also works for subdirectories (e.g. so http://www.example.com http://www.example.com returns http://www.example.com/index.html http://www.example.com/index.html and http://www.example.com/foo http://www.example.com/foo returns http://www.example.com/foo/index.html http://www.example.com/foo/index.html). With Cloudfront, the default document doesn't apply to subdirectories, which would have broken my site. (For the author of this article, it looks like the combination of CLoudFront's default document and custom error handling did the job for their site - just flagging this as something to look out for in cases where it doesn't work :-) ) AWS suggest a workaround using Lambda@Edge (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...) to rewrite the requests at the CloudFront layer - but at that point I decided that actually getting the site published was more important than adding more to the technology stack, so it's now happily hosted on Netlify's free tier.
- adzicg 6y ago
  there's a better and simpler workaround; there are two ways of setting up CloudFront->S3 origin. One is to use the S3 as file storage, the other is to use the S3 web site endpoint as a HTTP origin. With the second option, index documents work with directories, as well as S3 redirect rules etc. CloudFront sends S3 a http request as if it were an external web site, but it's all inside AWS so in effect your costs are the same in both options.
  - BayesianDice 6y ago
    Thanks for that - I certainly agree that's simpler than Lambda@Edge, and option well worth considering. I looked at that approach at the time but didn't go down that route because, as far as I understood (unless I missed something), that would involve having the S3 bucket directly publicly accessible over HTTP (not HTTPS) with the S3-style URLs, including public access. And my main motivation for adding CloudFront to the mix was to support/enforce TLS - I certainly didn't have traffic levels requiring it! (But, pragmatically, the key risks of someone going to the effort of finding and using the unpublished S3 URL would seem to be be that (a) the site could stop working if I change the hosting and (b) they, through their own choice, aren't using TLS - which, for a static, low-traffic, personal blog, could be considered pretty low.)
papaf 6y ago
As far as I can see, it is possible for all internet users to see customers orders and addresses using this technique. Did I miss something or is this a real problem?
- root993 6y ago
  Yes but each order has a unique ID which only the customer who placed that order will have access to. If that customer decides to share that URL on his own discretion that is fine by us
lucaspiller 6y ago
For anyone thinking to simply host assets in S3 (i.e. skip the Cloudfront part), please do not. I'm not sure if it's my ISP throttling it, or the routing, but from where I am in Europe, accessing a file from an S3 bucket in us-east often results in speeds less than 100kbit/s. The same files served from Cloudfront will saturate my connection (gigabit).
ShaneMcGowan 6y ago
I actually wrote a guide on this before that goes into a bit more detail and adds in some CD pipeline stuff with it https://dev.to/shane/how-to-create-an-aws-s3-hosted-angular-app-with-a-custom-domain-https-and-continuous-deployment-2i3i https://dev.to/shane/how-to-create-an-aws-s3-hosted-angular-...
smuemd 6y ago
There is https://apex.sh/up/ https://apex.sh/up/ Great tool for doing this and more.
jwmoz 6y ago
Github pages is free and simple to use.
yuvadam 6y ago
For the past several years I've been running a 100% static web application that serves rain radar images. It also updates itself periodically using serverless functions currently running on AWS Lambda, but can easily run anywhere else. This is a very stable architecture for such websites and it's great to see it being widely adopted. I've written more details about the Rain Radar application in this blog post: https://yuv.al/blog/an-architecture-for-periodically-updating-static-websites/ https://yuv.al/blog/an-architecture-for-periodically-updatin...
- Gormisdomai 6y ago
  This is very cool! What was the overall cost of running the rest of the infrastructure (beyond just the Lambda bit)?
  - yuvadam 6y ago
    Thanks! The only other costs are the storage of the radar images themselves on S3, last time I checked I store around $1.5's worth of images per month. No real reason to archive them in the long term, but one day I might start training some neural network on those images :)
- cheez 6y ago
  I recently turned years of data into $$$. Keep archiving it.
  - Scoundreller 6y ago
    Story time?
    - yuvadam 6y ago
      Totally story time
  - akulbe 6y ago
    Yes, please. Do tell.
fareesh 6y ago
What WhatsApp messaging API are you using?
- root993 6y ago
  We use twilio.com for the WhatsApp API
omgbear 6y ago
How do you handle CSRF with static hosting?
- bufferoverflow 6y ago
  CSRF is only needed when you have a dynamic website, when someone can potentially make a request on behalf of someone else (and thus make some malicious changes). If your website is 100% static, there's nothing to change.
mwarkentin 6y ago
I’d highly recommend looking into Amplify Console for hosting static sites on AWS. Behind the scenes you’re still running on s3/cloudfront so you don’t need to worry about scalability, but you’ll get automatic https, build and deploy pipeline hooked into your github repo, per branch environments, etc.
vagab0nd 6y ago
With S3+CloudFront, has anyone been able to get www->root redirect to work with https? I like the setup otherwise.
- tobilg 6y ago
  See https://simpleit.rocks/web/hostings/redirect-http-to-https-and-www-to-non-www-with-aws-s3-bucket-cloudfront-route-53-and-a-custom-domain/ https://simpleit.rocks/web/hostings/redirect-http-to-https-a... for example

119 points by root993 6y ago

Am I missing something? This is not "your entire web application" - this is the static piece of it, it still requires an application server doing the dynamic stuff via XHR. Bad title. Should say "how to host the frontend to your SPA for pennies on CloudFront + S3"

bobblywobbles 6y ago

This is a great guide, thanks for sharing!

root993 6y ago
Happy to help :)

nabaraz 6y ago

Why do we need to make everything so complicated and fancy? I am not trying to be rude but I hate this trend of everything needs to be hosted on AWS and pay hundreds of dollars. Why not dump these static files into a shared hosting? It shouldn't cost you more than couple of bucks a month. You get SSL, Email, sub-domains, SSL, logs and much more for couple of bucks a month.

root993 6y ago
Not exactly sure what you mean by shared hosting. Could you elaborate? Also would this be hosted behind a CDN?
- travbrack 6y ago
  I think they mean a traditional web host that has a ton of sites crammed into a single server and a cpanel. Like bluehost, dreamhost, etc.
  - root993 6y ago
    Ah, I see but hosting the site behind a CDN is imperative in our case so this would not work
docsapp_io 6y ago
One point mentioned in the article is the caching for global users and shared hosting does not give you that. At most you can replace S3 with shared hosting, not CDN part.
- iagovar 6y ago
  I have shared + Cloudflare for Spain and Latin America audiences and it works pretty well. IDK AWS is for other purposes, for simple apps it's not worth it IMO.
kesor 6y ago
The article explains how to do it without complicating it with shared hosting, and it only cost $.8/mo for 100k visits. Not knowing something doesn't mean its complicated, it just means it is unfamiliar, for you. Once you did this several dozen times, its the simplest thing ever.
- nabaraz 6y ago
  With AWS, your costs are unpredictable. You could be spammed or some search bots decide to go haywire and you will incur hundreds of dollars. The second thing is AWS is very expensive for what it does. Do you need to add DNS records? There is Route 53 which costs extra. Do you need emails? There is AWS Simple Email which costs extra. Do you need logs? The storage cost (although little) is added to your bill. Do you need databases? Do you need support? All I am saying is that shared hosting should be first considered for static websites.
  - deleted 6y ago
    [deleted]
  - chiefalchemist 6y ago
    Yes and no. Flip it around. AWS let's you not pay for things you don't need. Then, if there's a biz requirement for something else, you make that _investment_. Of course there are alternatives. But shared hosting is a roll of the dice. For a hobby project or POC? Sure, start with shared. But if you're certain shared is not a semi-longer term option don't wasteyour time. Shared is cheap for a reason. Saving a couple dollars will dry up quickly in downtime and headache time.
  - gonzo41 6y ago
    All of those things cost money and effort to maintain. Im not a super AWS fanboy but each IaaS component is a feature that's easy-ish to do on your own with a server and some software. When you go server less or cloud native you have to really think about the bits of tech that bring real value. If you look at the free tier limits, and monthly costs. Putting a simple rest app behind API gateway with a few buckets and a little lambda gives you a whole lot of bang for very little cost. If you're a person in a region and your website is going to get bursty use by people in your region then it's a pretty cheap deal. Monthly costs < 1 coffee for a blog or some non trivial page.
fortran77 6y ago
If your site can be hosted on S3, with free-tier CloudFront caching, it will be under $1.00/month for a few hundred thousand views.
- milankragujevic 6y ago
  You can put CloudFlare in front and turn on forced caching for all content. I checked multiple times with @jgrahamc and he assured me (and other people) that the free tier is really free and force caching static files for website (so not massive media hosting) is allowed and OK. You can set edge cache TTL to a month and have CloudFlare keep your site appearing "up" even if the backend server is down completely.
f311a 6y ago
I see your point, but shared hosting is not a reliable solution. It fails pretty often (for a very short time) because it’s shared. You need a CDN. There are a lot of cheap options. A few missed orders can cost you more.
- risyachka 6y ago
  Cloudflare free tier should be enough in most cases.
  - ies7 6y ago
    And replace s3 with backblaze b2
    - christophilus 6y ago
      Or Wasabi, which is a drop in replacement for S3. B2 still doesn’t support direct signed uploads from the browser, last I checked.
      - ies7 6y ago
        Wasabi has that 90 days storage policy that makes it complicated for me.
artiscode 6y ago
You provide a valid point, but where's the hacker factor in choosing something readily available? 100k views for under $1 seems like the true hacker spirit, utilizing whatever AWS offers without breaking the bank.
flywheel 6y ago
I'm hosting a photo sharing SPA on S3/Cloudfront/Lambda with a robust user system including email verification, and a few GB of image files, and I pay $0.25/month at most. Yeah, it's a personal/friends-only site so it doesn't see much traffic, but that was kind of the point - I wanted to pay next to nothing for this site if nobody visits it, and it is working well for that. $3.00/year is pretty cheap.

mrweasel 6y ago

Nice, but the article leaves out the bit about where the API is hosted. It really isn’t the entire web application, just the easy part. Still a nice guide for static website owner.

Zombieball 6y ago
You could put it in a lambda function.
- hmate9 6y ago
  Not sure why this is downvoted. It’s a perfectly valid “serverless” architecture. The only downside is that it can get quite messy maintaining.
  - 0xbkt 6y ago
    Where even is the downvote button?
    - austhrow743 6y ago
      Hidden until you get more karma.
  - duiker101 6y ago
    I would guess because then it's "just another serverless web app" and invalidates the title which is "Hosting your ENTIRE web app...".
  - root993 6y ago
    Hello, Author here. Could you elaborate on what part of the maintenance would be messy? I was under the impression that maintaining this would be quite easy because there is no physical server present anywhere in this setup.
    - bonestamp2 6y ago

robertlagrant 6y ago

You can do a very similar thing with CloudFlare and any free/cheap backing store (e.g. S3, Github Pages, etc).

modeless 6y ago
Yes, plus Cloudflare is free for unlimited traffic. I use it in front of App Engine, and I've served 1m pages in a day for $0 because I don't even hit the App Engine free tier limits after Cloudflare's cache takes the traffic.
- ignoramous 6y ago
  > Yes, plus Cloudflare is free for unlimited traffic. Subject to fair use (which is fair). https://webmasters.stackexchange.com/questions/88659/how-can-cloudflare-offer-a-free-cdn-with-unlimited-bandwidth https://webmasters.stackexchange.com/questions/88659/how-can...
  - risyachka 6y ago
    And unless you consume many many terabytes they won't even notice you as this is nothing compared to the amount of traffic they serve. I know many people who are saving 5+TB per month of their free tier without any problems.
  - 0xbkt 6y ago
    What about the Workers?
    - ignoramous 6y ago
      Matthew Prince is on-record that Cloudflare Workers are an exception to (unspecified) bandwidth limits in that you're free to use a very large amount of it without having to pay for their Enterprise / Pro / Business plans. See: https://news.ycombinator.com/item?id=20791660 https://news.ycombinator.com/item?id=20791660

makethetick 6y ago

You should take a look at Amplify (https://aws.amazon.com/amplify/ https://aws.amazon.com/amplify/), it will make the whole process considerably less painful, allow you to easily access AppSync (graphql) and Lambda with your code all in one place, then also trigger rebuilds on git commits.

speedgoose 6y ago
Too much vendor lock-in.
- thih9 6y ago
  Could you give examples where vendor lock in becomes a problem? Ideally something practical (as opposed to theoretical) or something from personal experience. I generally agree but I feel that more details could be useful.
  - ssss11 6y ago
    Any time you want to leave that vendor. If they up their prices greatly, reduce service levels, refuse to give attention to improving service levels.. break a clause in the contract... an so on.
    - rpadovani 6y ago
      While this is true in theory, I don't recall a single instance of AWS increasing pricing or reducing service levels - not saying that is impossible, but it hasn't happened so far (at least that I remember)
  - rat9988 6y ago
    When you deal with google cloud and they up their price. Didn't see it with the other vendors though.
  - speedgoose 6y ago
    It's simple, you are not stuck with a vendor. A practical example that happened to my employer recently : we migrated to Microsoft Azure when they opened two datacenters in our country. We didn't have to change any code because we don't use vendor locked solutions.

donorman 6y ago

Deploying is also easily scripted using the aws-sdk package, see the docs for .S3 and .Cloudfront. Be aware though that if you have a large amount of files the the cost of invalidations at cloudfront will add up quickly, but you can how ever cherry pick files to invalidate.

pete911 6y ago

I have similar setup but fully automated with GitHub an travis. I use cloudflare instead of cloudfront to reduce cost as well - https://reisinger.co.uk/posts/s3_hosting/ https://reisinger.co.uk/posts/s3_hosting/

moltar 6y ago

Or you can just use free Netlify tier

tilolebo 6y ago
One big advantage of Netlify is the automated deployment of pull requests into their own dedicated environment. It's so nice to be able to review a PR not only based on its code, but also by having a look at the built website.
- mwarkentin 6y ago
  You can do this in AWS with Amplify Console as well.
  - tilolebo 6y ago
    Also with a regular Cloudfront distribution? I don't want to use Amplify, I just need the PR-preview feature.
volkandkaya 6y ago
Yep, everything else is overkill unless you have a large amount of traffic.

tobilg 6y ago

If you want to host a static website on AWS with one command, and not clicking around in the Console, have a look at https://github.com/tobilg/serverless-aws-static-websites https://github.com/tobilg/serverless-aws-static-websites For fullstack websites, I created https://github.com/tobilg/aws-fullstack-website https://github.com/tobilg/aws-fullstack-website which will additionally create a API based on API Gateway and its HTTP API feature

risyachka 6y ago

Using CloudFront for a static website is a good choice if you really want to burn some cash with their outrageous bandwidth price. Cloudflare free tier can serve terabytes of bandwidth for free. Add some cheap hosting or free tier EC2 or GCP and you are good to go.

aloknnikhil 6y ago
Or Cloudflare workers KV. https://workers.cloudflare.com/ https://workers.cloudflare.com/
aeoanx 6y ago
Cloudflare can be difficult at times. I am in New Zealand and a company I worked for used Cloudflare and we found out that our site was being served from Japan most of the time (8800 km away). This meant a request would go: Auckland -> Japan -> Sydney (our data center) The fix was to upgrade to their $200/mo plan and we found we would be served from AKL or SYD most of the time, occasionally still Japan.
- manigandham 6y ago
  This is often an internet routing issue. Also their Argo product can sometimes have bad routes chosen. Did you try their support? As a CDN, they’re very interested in fixing any performance problems quickly.
  - deadlyllama 6y ago
    The two biggest telcos in NZ won't peer freely. At least for the biggest (Spark) Cloudflare delivers from far away. Also Cloudflare "protected" 8chan during the Christchurch terrorist shooting last year which makes them unpopular in some quarters. I have heard that given as a reason our largest telco won't peer with them.
    - rjeli 6y ago
      funny, I have distaste for cloudflare because the ceo “woke up one morning in a bad mood” and decided to boot the daily stormer. Censorship without due process. not trying to debate that decision here, but it seems they got the worst of both worlds.

0xbkt 6y ago

Cloudflare + Backblaze B2 (or Wasabi) beats this hard. They are Bandwidth Alliance partners, so you won't incur egress traffic cost in B2 side. Cloudflare's Free plan is more than enough in most cases. Also B2 gives you free 10 GB storage when you sign up.

yorick 6y ago
I've had poor experiences with Wasabi's availability in practice. Does cloudflare deal with hours-long outages well? Do you know if B2 fares better?
- deleted 6y ago
  [deleted]
- mythrwy 6y ago
  For whatever it's worth, I have had 0 issues with Wasabi availability in about a year and a half of use.
gradschool 6y ago
Cloudflare blocks Tor users unless they solve a Google CAPTCHA and accept cookies. By saving money you limit your audience and make the world a worse place. https://blog.torproject.org/trouble-cloudflare https://blog.torproject.org/trouble-cloudflare
- jgrahamc 6y ago
  Have you tried visiting a Cloudflare-protected site using the TBB recently? (as in within the last few years?). We don't block Tor users. I use TBB to browse and don't see this problem.
- deleted 6y ago
  [deleted]
- peterwwillis 6y ago
  > Users are either blocked outright with CAPTCHA server failure messages, or prevented from reaching websites with a long (and sometimes endless) loop of CAPTCHAs, many of which require the user to understand English in order to solve correctly. For users in developing nations who pay for Internet service by the minute, the problem is even worse as the CAPTCHAs load slowly and users may have to solve dozens each day with no guarantee of reaching a particular site. Rather than waste their limited Internet time, such users will either navigate away, or choose not to use Tor and put themselves at risk. So, if we don't make our websites available in languages used by oppressed peoples, if we don't make sure it's very low latency, and if we try to filter out abusive users, we're making the world a worse place. Not just leaving the world in a bad state, but actively increasing the harm done to the world, just by making a website that not everyone can or wants to use. Not only do I not buy this argument, it makes me want to support Tor less, if for no other reason than blatantly ignoring why the captchas were put up in the first place.

BayesianDice 6y ago

I did find one catch with the S3/CloudFront approach, relating to default document, when I was looking at hosting a static Hugo site a few months ago. With S3 web hosting, you can specify a default object which also works for subdirectories (e.g. so http://www.example.com http://www.example.com returns http://www.example.com/index.html http://www.example.com/index.html and http://www.example.com/foo http://www.example.com/foo returns http://www.example.com/foo/index.html http://www.example.com/foo/index.html). With Cloudfront, the default document doesn't apply to subdirectories, which would have broken my site. (For the author of this article, it looks like the combination of CLoudFront's default document and custom error handling did the job for their site - just flagging this as something to look out for in cases where it doesn't work :-) ) AWS suggest a workaround using Lambda@Edge (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...) to rewrite the requests at the CloudFront layer - but at that point I decided that actually getting the site published was more important than adding more to the technology stack, so it's now happily hosted on Netlify's free tier.

adzicg 6y ago
there's a better and simpler workaround; there are two ways of setting up CloudFront->S3 origin. One is to use the S3 as file storage, the other is to use the S3 web site endpoint as a HTTP origin. With the second option, index documents work with directories, as well as S3 redirect rules etc. CloudFront sends S3 a http request as if it were an external web site, but it's all inside AWS so in effect your costs are the same in both options.
- BayesianDice 6y ago
  Thanks for that - I certainly agree that's simpler than Lambda@Edge, and option well worth considering. I looked at that approach at the time but didn't go down that route because, as far as I understood (unless I missed something), that would involve having the S3 bucket directly publicly accessible over HTTP (not HTTPS) with the S3-style URLs, including public access. And my main motivation for adding CloudFront to the mix was to support/enforce TLS - I certainly didn't have traffic levels requiring it! (But, pragmatically, the key risks of someone going to the effort of finding and using the unpublished S3 URL would seem to be be that (a) the site could stop working if I change the hosting and (b) they, through their own choice, aren't using TLS - which, for a static, low-traffic, personal blog, could be considered pretty low.)

papaf 6y ago

As far as I can see, it is possible for all internet users to see customers orders and addresses using this technique. Did I miss something or is this a real problem?

root993 6y ago
Yes but each order has a unique ID which only the customer who placed that order will have access to. If that customer decides to share that URL on his own discretion that is fine by us

lucaspiller 6y ago

For anyone thinking to simply host assets in S3 (i.e. skip the Cloudfront part), please do not. I'm not sure if it's my ISP throttling it, or the routing, but from where I am in Europe, accessing a file from an S3 bucket in us-east often results in speeds less than 100kbit/s. The same files served from Cloudfront will saturate my connection (gigabit).

ShaneMcGowan 6y ago

I actually wrote a guide on this before that goes into a bit more detail and adds in some CD pipeline stuff with it https://dev.to/shane/how-to-create-an-aws-s3-hosted-angular-app-with-a-custom-domain-https-and-continuous-deployment-2i3i https://dev.to/shane/how-to-create-an-aws-s3-hosted-angular-...

smuemd 6y ago

There is https://apex.sh/up/ https://apex.sh/up/ Great tool for doing this and more.

jwmoz 6y ago

Github pages is free and simple to use.

yuvadam 6y ago

For the past several years I've been running a 100% static web application that serves rain radar images. It also updates itself periodically using serverless functions currently running on AWS Lambda, but can easily run anywhere else. This is a very stable architecture for such websites and it's great to see it being widely adopted. I've written more details about the Rain Radar application in this blog post: https://yuv.al/blog/an-architecture-for-periodically-updating-static-websites/ https://yuv.al/blog/an-architecture-for-periodically-updatin...

Gormisdomai 6y ago
This is very cool! What was the overall cost of running the rest of the infrastructure (beyond just the Lambda bit)?
- yuvadam 6y ago
  Thanks! The only other costs are the storage of the radar images themselves on S3, last time I checked I store around $1.5's worth of images per month. No real reason to archive them in the long term, but one day I might start training some neural network on those images :)
cheez 6y ago
I recently turned years of data into $$$. Keep archiving it.
- Scoundreller 6y ago
  Story time?
  - yuvadam 6y ago
    Totally story time
- akulbe 6y ago
  Yes, please. Do tell.

fareesh 6y ago

What WhatsApp messaging API are you using?

root993 6y ago
We use twilio.com for the WhatsApp API

omgbear 6y ago

How do you handle CSRF with static hosting?

bufferoverflow 6y ago
CSRF is only needed when you have a dynamic website, when someone can potentially make a request on behalf of someone else (and thus make some malicious changes). If your website is 100% static, there's nothing to change.

mwarkentin 6y ago

I’d highly recommend looking into Amplify Console for hosting static sites on AWS. Behind the scenes you’re still running on s3/cloudfront so you don’t need to worry about scalability, but you’ll get automatic https, build and deploy pipeline hooked into your github repo, per branch environments, etc.

vagab0nd 6y ago

With S3+CloudFront, has anyone been able to get www->root redirect to work with https? I like the setup otherwise.

tobilg 6y ago
See https://simpleit.rocks/web/hostings/redirect-http-to-https-and-www-to-non-www-with-aws-s3-bucket-cloudfront-route-53-and-a-custom-domain/ https://simpleit.rocks/web/hostings/redirect-http-to-https-a... for example