Configure HTTPS on Local Environment with Nginx

Today, Most of the sites we use are protected with 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 the production (environment parity) or wanted 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 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 (etc/nginx/conf) (e.g., 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