HTTPS for local dev


Increasingly it is becoming necessary to develop software in a secure environment in order that there are very few changes when deploying to production.

Recently Facebook changed its policies for apps/sites that use Facebook login which requires the use of an HTTPS URL for the OAuth redirect URL. So if you want to use the users application with an OAuth provider such as Facebook, securing your communication with the local development environment will be necessary.

In order to create a secure environment, we need to have a trusted SSL certificate installed in our Docker application.

Let's Encrypt

The official line from Let’s Encrypt is:

For local development section ... The best option: Generate your own certificate, either self-signed or signed by a local root, and trust it in your operating system’s trust store. Then use that certificate in your local web server. See below for details.

See letsencrypt.org - certificates-for-localhost

Valid HTTPS Certificates For Localhost:

mkcert is a simple design tool for generating valid TLS certificates. It works for any hostname or IP including localhost. It supports macOS, Linux, and Windows, Firefox, Chrome, and Java. It even works on mobile devices with a couple of manual steps.

Visit this blog post for more info.

Configure Docker

After installing a trusted TLS certificate, configure your docker installation. We are going to configure a nginx reverse-proxy server. This makes sure that it does not interfere with our traefik configuration that is reserved for production environments.

These are the places that you should configure to secure your local environment.

certs

Take the certificates that you generated and place them in a folder called certs on the project’s root folder. Assuming that you registered your local hostname as, the certificates you will put in the folder should have the names my-dev-env.local.crt and my-dev-env.local.key .

Add a local Nginx service

Add the nginx-proxy service. in local.yml

text
    nginx-proxy:
      image: jwilder/nginx-proxy:alpine
      container_name: nginx-proxy
      ports:
        - "80:80"
        - "443:443"
      volumes:
        - /var/run/docker.sock:/tmp/docker.sock:ro
        - ./certs:/etc/nginx/certs
      restart: always
      depends_on:
        - django

Link the nginx-proxy to django through environmental variables.

django already has an .env file connected to it. Add the following variables. You should do this especially if you are working with a team and you want to keep your local environmen details to yourself.

ini
# HTTPS
# ---------------------------------------------
VIRTUAL_HOST=my-dev-env.local
VIRTUAL_PORT=8000

The services run behind the reverse proxy.

config/settings/local.py

text
# You should allow the new hostname. :
ALLOWED_HOSTS = ["localhost", "0.0.0.0", "127.0.0.1", "my-dev-env.local"]

Rebuild your docker application.

text
 $ docker-compose -f local.yml up -d --build

Go to your browser and type in your URL bar https://my-dev-env.local

Add certs/* to the .gitignore file. This allows the folder to be included in the repo but its contents to be ignored.

This configuration is for local development environments only. Do not use this for production since you might expose your local rootCA-key.pem .