Use ssl in local development via nginx and self-signed certificate

Warning Tested in:

Linux: Chrome, Firefox

Windows: Chrome

MacOS: Chrome, Safari

Linux

Install mkcert

curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
chmod +x mkcert-v*-linux-amd64
sudo cp mkcert-v*-linux-amd64 /usr/local/bin/mkcert

sudo apt-get update
sudo apt-get install libnss3-tools

Generate ssl certificates

mkcert --install
cd nginx-ssl-localhost   # replace whth repo folder
mkcert -cert-file ./ssl/local.crt -key-file ./ssl/local.key  localhost "*.com.local" 127.0.0.1 ::1

Add hostnames to /etc/hosts

echo '127.0.0.1 example1.com.local' | sudo tee -a /etc/hosts
echo '127.0.0.1 example2.com.local' | sudo tee -a /etc/hosts

Start nginx

docker-compose up

Check ssl

Open site1 and site2 in browser

Windows

Download mkcert binary or check release page

Generate ssl certificates

Win+R -> cmd -> Enter
C:\Users\User\Downloads\mkcert-v1.4.4-windows-amd64.exe -install
cd nginx-ssl-localhost   # replace whth repo folder
C:\Users\User\Downloads\mkcert-v1.4.4-windows-amd64.exe -cert-file ./ssl/local.crt -key-file ./ssl/local.key  localhost "*.com.local" 127.0.0.1 ::1

Edit file C:\Windows\System32\drivers\etc\hosts

127.0.0.1 example.com.local
127.0.0.1 example2.com.local

Start nginx

docker-compose up

Check ssl

Open site1 and site2 in browser

MacOS

Install mkcert

brew install mkcert

Generate ssl certificates

mkcert --install
cd nginx-ssl-localhost   # replace whth repo folder
mkcert -cert-file ./ssl/local.crt -key-file ./ssl/local.key  localhost "*.com.local" 127.0.0.1 ::1

Add hostnames to /etc/hosts

echo '127.0.0.1 example1.com.local' | sudo tee -a /etc/hosts
echo '127.0.0.1 example2.com.local' | sudo tee -a /etc/hosts

Start nginx

docker-compose up

Check ssl

Open site1 and site2 in browser