Set a local web development environment with custom Urls and HTTPS

With web projects running inside Docker containers.

To develop a web project¹ on a local machine, we usually launch a web-server listening at http://localhost:port.

In production, the url for this project is https://my-app.com.

We want to mimic the production environment on the local computer. How can we have a custom url and HTTPS, like https://my-app.local?

Set a reverse proxy

Directory structure

.
+-- nginx-proxy
| +-- docker-compose.yml
| +-- certs
+-- my-app.local
+-- my-other-app.local
+-- my-cool-website.local

Configure the nginx-proxy Docker service

version: "3.1"services:
nginx-proxy:
image: jwilder/nginx-proxy:alpine
ports:
- "80:80"
- "443:443"
volumes:
- ./certs:/etc/nginx/certs
- /var/run/docker.sock:/tmp/docker.sock:ro
restart: unless-stopped
networks:
default:
external:
name: nginx-proxy

Create the Docker network

docker network create nginx-proxy

Start the service

docker-compose up -d

Configure a custom url for each web project

Make an url point to localhost

sudo nano /etc/hosts
127.0.0.1        my-app.local

Link a web project to the nginx-proxy

services:
my-app:

environment:
VIRTUAL_HOST: my-app.local
VIRTUAL_PORT: 3000
services:
my-app:

expose:
- 3000
networks:
default:
external:
name: nginx-proxy
$ cd /my-app.local
$ docker-compose up

Add HTTPS

Create a self-signed SSL certificate for a custom domain

Trust the certificate

Next steps

Freelance developer / designer → http://francoisromain.com