Host React App on AWS S3 with SSL (almost) for free
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.
Once buckets are created enable static website hosting for them with index.html as an index file:
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
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:
- Name: @, Value: myworktime.online.s3-website-eu-west-1.amazonaws.com
- 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:
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.
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:
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.