Alex Kit
Alex Kit

Alex Kit

Use private domains with ssl certificates instead of localhost:port

Use private domains with ssl certificates instead of localhost:port

Alex Kit's photo
Alex Kit
·Apr 1, 2022·

3 min read

If you develop several projects you should consider to use private domains, e.g. https://foo.local , instead of e.g. http://localhost:12345.


Why?

  • Obviously: you don't have to remember ports.
  • Passwords: as you don't mess with ports, your dev passwords always stick to specific domains and is much better to manage them in password manager.
  • Bookmarks: if you save links to fast-access them on your needs, you have much better meaningful links.
  • Further more: by separation naming and deployment you are on a good way, therefor you may find other useful cases in your dev env.
  • Certificates: you can setup this also with localhost, but anyways this step is a must, as many of browser features are HTTPS-only, like: WebRTC, Geolocation, Service Worker.

Is cross-platform: window, linux, mac. But was tested on windows. Required preinstalls: node, openssl, nginx.

On windows I would suggest to use community.chocolatey.org/packages to install all this dependencies.


1. Hosts

To make it simple, use npm:hostile

# install globally 
npm i hostile -g
# define your custom private domain
hostile set 127.0.0.1 foo.local

# view list
hostile list

2. Self-signed certificate

2.1 Create a certificate authority. This could be one time action - for any further domains it can be reused

# Generate private key
openssl genrsa -des3 -out myCA.key 2048
# Generate root certificate
openssl req -x509 -new -nodes -key myCA.key -sha256 -days 825 -out myCA.pem

2.2 Create a certificate for the domain.

Create a configuration file foo.local.ext

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = foo.local

Now you can create the cert using certificate authority keys:

# Generate a private key
openssl genrsa -out foo.local.key 2048
# Create a certificate-signing request
openssl req -new -key foo.local.key -out foo.local.csr
# Create the signed certificate
openssl x509 -req -in foo.local.csr -CA myCA.pem -CAkey myCA.key -CAcreateserial -out foo.local.crt -days 825 -sha256 -extfile foo.local.ext

3. Install self-signed certificate

You can use Chrome to install those certificates, go to: chrome://settings/security

  1. Import foo.local.crt to the Trusted Root Certification.
  2. Import myCA.pem to the Trusted Publishers, if not already done

4. Nginx

Locate the configuration file, and add reverse proxy to your localhost development instance.

server {
    listen 443 ssl;
    server_name  foo.local;

    ssl_certificate      /path/to/foo.local.crt;
    ssl_certificate_key  /path/to/foo.local.key;

    location / {
        proxy_pass       http://localhost:5003;
        proxy_set_header Host $host;
    }
}
server {
    listen 80;
    server_name  foo.local;
    return 301 https://foo.local;
}

This also forces redirects to https.


Looking forward to improve:

It would be nice to have a tool which can automate all this steps and display better overview of already created projects. Also I would wish this tool to be able to launch my development environment for a project.

Did you find this article valuable?

Support Alex Kit by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this