HTTPS support for Netpicker

Add an SSL Certificate

First, ensure you have the file nginx-ssl.conf in your project folder. If it’s missing, download it from the Netpicker GitHub repository.

To add a self-signed SSL certificate to Netpicker and enable HTTPS, place the following files in the certs folder:

• private.key
• certificate.crt

Note: Use these exact filenames!

Next, ensure your docker-compose.yml configuration includes the following volume mappings (this is commented out by default):

frontend:
  ports:
    - 443:443
  volumes:
    - ./nginx-ssl.conf:/etc/nginx/conf.d/nginx-ssl.conf
    - ./certs:/etc/nginx/certs/

Create a Self-signed SSL Certificate

If you don’t yet have a certificate, follow these steps to generate one:

1. Generate a private key:

openssl genrsa -out private.key 2048

2. Generate a Certificate Signing Request (CSR):

openssl req -new -key private.key -out certificate.csr

3. Generate a self-signed certificate:

openssl x509 -req -in certificate.csr -signkey private.key -out certificate.crt

Set correct user

The certificate files created by the user will have incompatible permissions when mounted into the Docker container, as the container runs under a different internal user (UID 911).

Always perform the following step to avoid permissions issues. Execute this command to update the owner of the certificate files and nginx config:

sudo chown -R 911:911 ./certs
sudo chown -R 911:911 nginx-ssl.conf

This ensures the internal container user can read and utilize the certificates without permissions errors.

Demo:

If you still have a problem setting this up, you can watch this quick guide:

Troubleshooting:

Browser Error: ERR_CERT_COMMON_NAME_INVALID

If browsers flag your site as “Not Secure” despite a valid certificate, you are likely missing the Subject Alternative Name (SAN). Modern browsers ignore the “Common Name” and strictly require the SAN.

The Fix: Regenerate your CSR using the -addext flag to explicitly include the SAN:

openssl req -new -key private.key -out certificate.csr \
  -subj "/C=NL/ST=North Holland/L=Amsterdam/O=Cooperatieve abchotel U.A./CN=abcd12345.example.com" \
  -addext "subjectAltName = DNS:abcd12345.example.com"

(Note: Replace the CN and DNS values with your actual server address. You can add multiple aliases: DNS:netpicker.local,IP:10.0.0.1)

Use this new CSR to generate your .crt file. Once you have the new .crt file, update the permissions and restart the container:

sudo chown -R 911:911 ./certs
docker compose restart frontend