Create self signed certificate under Ubuntu and add it to Nginx or Angular 10+

self-signed-certificate.md

Create self signed certificate under Ubuntu and add it to Nginx or Angular 10+

1. Clone this helper repo for creating self signed SSL certificates

Change openssl-custom.cnf if you want to use custom domain other then localhost

git clone https://github.com/RubenVermeulen/generate-trusted-ssl-certificate.git
cd <PATH_TO_REPO_FOLDER>/generate-trusted-ssl-certificate
bash generate.sh

Two certificates will be generated.

server.crt
server.key

The output names a bit too general for me and I think that thay should be renamed to something some project specific.

2. We need to add the generated SSL certificate to the database that browser uses. For this we will use "certutil" utility which is part of the libnss3-tools package.

sudo apt update
sudo apt install libnss3-tools

3. To add certificate to the database, navigate to the directory where server.crt is kept and then run the following command.

certutil -d sql:$HOME/.pki/nssdb -A -t "CT,c,c" -n "localhost" -i server.crt

Note that if you are using custom domain other then localhost you should change the domain value. If you changed the certificate file name, you should change it as well.

4. Adding certificate to Nginx.

Note that certificates are moved into /etc/ssl/certs. Because you will be using HTTPS from now on, you could enable the HTTP2 as well at the listen directive.

server {
    # SSL port and HTTP v2
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    # Path to public/private certificates
    ssl_certificate /etc/ssl/certs/server.crt;
    ssl_certificate_key /etc/ssl/private/server.key;

    ...
}

5. Adding certificates to Angular 10+ App.

Modify your angular.json file and add ssl keys into it. If you want SSL to be used every time when you run ng serve add "ssl": true as well.

"serve": {
    ...
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        ...
        "sslKey": "ssl/server.key",
        "sslCert": "ssl/server.crt",
        "ssl": true
    },
    ...
}

Note that if you are using the certifacete with any web server like Apache or Nginx you should restart it as well!

6. Close all browsers. In that way they will reload their SSL databases. This includes incognito as well!