Host React App on AWS S3 with SSL (almost) for free

React application is basically a static website with some Javascript and CSS. I’ll show you how to host front-end part of your application almost for free using Amazon S3 and CloudFlare.

Why is it good idea?

AWS S3 service is really cheap for storage and not so cheap when it comes to traffic. That can be fixed with CloudFlare service — even in a basic (free) plan it allows you to conserve all traffic out from S3.

I am assuming you have a domain for your app. If not go buy one now.

Create S3 Bucket

Log in to AWS console and create bucket. Bucket name must exactly match domain name. For example, our service will be available on domains:

  • myworktime.online ( production version )
  • dev.myworktime.online ( developer version )

For that, I need to create two buckets with same names.

Region selection doesn’t really matter — just select one that’s closest to you

Once buckets are created enable static website hosting for them with index.html as an index file:

Go to bucket -> Properties -> Static website hosting

Note bucket website endpoint, in my case it is: http://dev.myworktime.online.s3-website-eu-west-1.amazonaws.com and http://myworktime.online.s3-website-eu-west-1.amazonaws.com

Setup CloudFlare

I’m assuming you already have CloudFlare account. Add your domain there and select free plan for it or any other plan that suit you needs. Once domain will be active you need to add two DNS CNAME entries:

  1. Name: @, Value: myworktime.online.s3-website-eu-west-1.amazonaws.com
  2. Name: dev, Value: dev.myworktime.online.s3-website-eu-west-1.amazonaws.com

Adjust bold fragments to your domain names and regions.

Turn on SSL

You may enable Flexible SSL on CloudFlare Crypto settings. On free CloudFlare plan, it may take up to 24 hours to activate.

If everything is configured ok until this time when you open both pages you should 403 error page:

If your SSL certificate isn’t ready yet go with non-ssl version

Once your certificate is active you may optionally force redirect to SSL version — that way you don’t need to worry about it on a server side. You can do that step later.

Go to Page Rules and create new rule like that

Override S3 Caching

By default, S3 works with ETag and If-None-Match HTTP headers — that uses browser cache and entire files are downloaded only when a client connects for the first time and if files on S3 are changed.

Those requests, event without actual file transfer, still count as GETs in AWS S3 pricing— to avoid that you may set longer cache time on CloudFlare:

The greater it will be more S3 requests you’ll save

Automatic deployment

It wouldn’t be cool if you had to manually upload your app to S3. I’m using a simple AWS-CLI command to sync S3 contents with my local copy:

You need to change S3 bucket name to yours.