writing

Configure HTTPS on Local Environment with Nginx

mkcert + nginx reverse proxy for local SSL, so your dev environment mirrors production.

1 min read #nginx#web-development
archive. originally published on my bearblog in 2023. preserved here with its real date. my thinking has moved on. the post has not.

Today, most of the sites we use are protected with the HTTPS protocol for better security. Generally, we use HTTP in our local development environment, and it works for most cases, but if we want to test things how they would be like in production (environment parity) or want to run a project which requires SSL then we should use this.

There are more advantages to it. Reading about different protocols and computer networking will be very beneficial while developing software. I recommend reading this article if you want to understand all core concepts about HTTP.

First, we’ll generate an SSL certificate using mkcert:

brew install mkcert

mkcert -install

mkcert -key-file <key-name>.pem -cert-file <cert-name>.pem localhost

Now we want to proxy our traffic through nginx. Install it using:

sudo apt update
sudo apt install nginx

For starting nginx we’ll use:

sudo systemctl start nginx

Now create a conf file at /etc/nginx/conf.d/sample.conf and paste the following:

server {
  server_name localhost;
  listen 80;
  listen 443 ssl;

  # SSL certificate configuration
  ssl_certificate     ~/cert.pem;
  ssl_certificate_key ~/key.pem;

  location / {
    proxy_pass http://localhost:3000/;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
  }
}

Restart Nginx:

sudo systemctl restart nginx

Now you can open https://localhost.