How to serve react on Nginx over https
& put everything behind cloudflare
In my last post, we setup a a react site on nginx. But in this age of chrome and ff, an http site is not good enough. You haven’t done your job till chrome says Secure https in olive green color.
Why https/ssl is important ?
A request hops many hosts before they find your server. Each host has access to the data being transferred. So, when you type your username/password in the login form, the console shows that your site received the request, but doesn’t show the other parties this request passed through.
Most of these intermediaries create logs of traffic. And you don’t want private details to end up in these data dumps. Https encrypts your traffic so only you and the end user can read the data. Everyone else sees gibberish.
How much does https cost ?
It costs $0 or more.
If you want a basic certificate, you can get one for free on letsencrypt.com (like we’ll do in a moment). If you want something fancy that shows your company’s name in the url bar, you can be looking at a few thousand dollars per annum, depending on the provider.
Setup
Read LetsEncrypt.com docs. They are straight forward. If you are using Ubuntu 16.04 with Nginx then :
sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-apacheYou can get a box for $5/m on Upcloud (my referral link).
They have the best hardware (I have tested them against DO, Vultr, EC2, IBM Bluemix and Scaleaway and can safely conclude they have the best machines).
Generate certificate
Assuming you have already configured your website to run on nginx, run the following command. This will interactively generate a certificate for you.
sudo certbot --nginx certonlyIf you support both www and non-www domains, then use the following command to generate certs for both :
sudo certbot --nginx certonly -d domain.com -d www.domain.comYou can drop certonly and let certbot automatically change your config, but I prefer changing config manually.
Update config
Change the config from the previous article, to match the one below. Replace krim.com to match your domain.
server {
listen [::]:443 ssl ipv6only=on;
listen 443 ssl; server_name krim.com;
server_name 194.437.22.8 # <------ change or delete this;
root /root/krim.com;
index index.html; ssl_certificate /etc/letsencrypt/live/krim.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/krim.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; access_log /var/log/nginx/krim.com.access.log;
error_log /var/log/nginx/krim.com.error.log;
location / {
try_files $uri /index.html =404;
}
}
Test and restart
If everything went well, then the following should restart the server :
nginx -t
/etc/init.d/nginx restartSetting up cloudflare
You can speed up your site by using cloudflare’s dns. They have a free plan that will suffice in most cases.
After logging in and pointing your dns to cloudflare :
Enable https
Under the crypto tab, take the actions :
Disable html minification (optional)
If you render react on server side using Gatsby, don’t forger to turn of HTML minification under speed tab. You can read the reason behind this in this StackoverFlow answer.
Setup A record
Under dns tab, add an A record with name = @ and IPV4 address = IP of your server.
Wait for the dns to propagate
You can use any dns tool to check if your dns has propagated. Your CDN served React site is now functional.
Updating certificates
When you try to renew certificate for a website running behind Cloudflare, you might get a handshake failure error. In that case, use the following command to update the certificates :
sudo certbot renew — preferred-challenges httYou might also like :
