
Hosting your entire web application using S3 and CloudFront - root993
https://www.sankalpjonna.com/posts/hosting-your-entire-web-application-using-s3-cloudfront
======
0xbkt
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.

~~~
gradschool
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)

~~~
peterwwillis
> 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.

~~~
ethanwillis
I agree with most of what you're saying but then I don't agree with your
assertion that this makes you want to support Tor less.

The part you have a problem with, that it actively increases harm done in the
world, wasn't even an assertion made by Tor.

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

~~~
f311a
CloudFlare is not free for business. The free tier is for hobby projects or
individuals.

~~~
jgrahamc
That simply isn't true. You can use our free service to run a business and
many small businesses do. Larger businesses typically want things we only
provide on the pay plans and therefore pay for the service.

~~~
f311a
That's good to know. The description of the free tier is a bit misleading:

    
    
      Free
      Cloudflare for Individuals is built on our global network. 
      This package is ideal for people with personal or hobby projects that aren’t business-critical.

~~~
adamisom
Eh, seems like expectations management to me, i.e. "don't blame us if you do
something business-critical on the free tier and it goes wrong and you didn't
pay for support to get you out of it".

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

~~~
kesor
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
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.

~~~
chiefalchemist
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.

------
yuvadam
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-
updatin...](https://yuv.al/blog/an-architecture-for-periodically-updating-
static-websites/)

~~~
cheez
I recently turned years of data into $$$. Keep archiving it.

~~~
akulbe
Yes, please. Do tell.

~~~
cheez
Not too dissimilar to what OP was talking about

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

~~~
root993
Hello, author here.

My bad for not giving a more appropriate title for the post. You re right this
setup does not take the backend APIs into account. In our case we use Lambda
for the backend APIs so that is also serverless but I failed to mention it in
the post.

~~~
shekhar101
Hi, also curious how you integrated WhatsApp messages to user for
confirmation? Is it business api and is the pricing an issue? (I’m in India
too and think WhatsApp api is a bit expensive especially for a use case where
I initiated the messaging like in your case)

------
moltar
Or you can just use free Netlify tier

~~~
tilolebo
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
You can do this in AWS with Amplify Console as well.

~~~
tilolebo
Also with a regular Cloudfront distribution? I don't want to use Amplify, I
just need the PR-preview feature.

------
BayesianDice
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-
di...](https://aws.amazon.com/blogs/compute/implementing-default-directory-
indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge/)) 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
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
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.)

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

~~~
modeless
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
> _Yes, plus Cloudflare is free for unlimited traffic._

Subject to fair use (which is fair).
[https://webmasters.stackexchange.com/questions/88659/how-
can...](https://webmasters.stackexchange.com/questions/88659/how-can-
cloudflare-offer-a-free-cdn-with-unlimited-bandwidth)

~~~
0xbkt
What about the Workers?

~~~
ignoramous
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)

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

------
pete911
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/)

------
tobilg
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

------
lucaspiller
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).

------
mike503
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"

------
makethetick
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
Too much vendor lock-in.

~~~
thih9
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
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
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)

------
ShaneMcGowan
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-...](https://dev.to/shane/how-to-create-an-aws-s3-hosted-angular-app-
with-a-custom-domain-https-and-continuous-deployment-2i3i)

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

------
smuemd
There is [https://apex.sh/up/](https://apex.sh/up/) Great tool for doing this
and more.

------
papaf
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
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

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

------
bobblywobbles
This is a great guide, thanks for sharing!

~~~
root993
Happy to help :)

------
omgbear
How do you handle CSRF with static hosting?

~~~
bufferoverflow
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.

------
fareesh
What WhatsApp messaging API are you using?

~~~
root993
We use twilio.com for the WhatsApp API

------
jwmoz
Github pages is free and simple to use.

