Green padlock development with nginx

green-padlock-development.md

Your production web site is delivered over SSL and has a beautiful green padlock in your users' browsers. But your dev environment uses plain old HTTP, or maybe SSL with a self-signed certificate that your browser doesn't recognise.

That's OK, but you're missing out on some nice stuff. For instance, some browsers will warn you if you're delivering mixed content over SSL (like a link to an image that's on plain old HTTP). If you don't see this until you release then you're not doing your users any favors.

So here's how I got my dev environment to give me a green padlock while I'm writing code:

1. Register a dev domain

Domains are pretty cheap these days. I registered a new domain for my dev environment - let's call it myapp.systems

Then I set up A records with my DNS provider pointing to 127.0.0.1 for the bare domain and wildcard subdomains (my app uses subdomains for users' accounts)

2. Buy a certificate

It doesn't need to be an EV certificate, anything issued by a CA recognised by your browser will do. I needed a wildcard certificate because my app uses subdomains so it cost me $100. Soon Let's Encrypt will start issuing free certficates so cost won't be an issue in the future.

3. Put nginx in front of your dev environment

Unlike many other developers my main OS is Windows. This isn't a great platform for Ruby on Rails development so I run an Ubuntu VM that has my dev environment on it.

What I'm saying is that when I launch my Rails app, I can't just go to http://localhost:3000 to see it. This isn't a problem because I'm running nginx on my main machine and it redirects all localhost traffic to my Ubuntu VM. Easy to set up as I'll describe below:

1. Install nginx (should be trivial on most platforms)
2. Change the nginx.conf file so that nginx is listening on port 80 for HTTP and 443 for SSL.
3. Change the nginx.conf file so that it uses the certificates you bought above
4. Change the nginx.conf file so that it passes all traffic through to your dev environment (may be localhost if your setup is simpler than mine)

Sample nginx.conf file is attached. Restart nginx and you're good to go.

When you go to https://myapp.systems you'll see a 502 Bad gateway page if your dev server isn't running. If it is running you should see the app with a nice green padlock.

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    upstream development_web {
            # 192.168.1.86 is the IP address of my dev VM. Yours may be 127.0.0.1
            # 3000, 5000, and 4567 are the ports my dev servers might use when I
            # launch them. You can add as many as you like to this list.
            server 192.168.1.86:5000; 
            server 192.168.1.86:3000;
            server 192.168.1.86:4567;
    }

    server {
        listen       80;
        listen       443 ssl;
        server_name  myapp.systems *.myapp.systems; # This is the domain I registered just for this purpose

        large_client_header_buffers 4 64k;

        ssl_certificate      STAR_myapp_systems.pem; # These are the files my certificate issuer sent me
        ssl_certificate_key  STAR_myapp_systems.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            proxy_pass http://development_web;
            proxy_connect_timeout 1s; # Fixes an issue on Windows where there are 60s delays
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}