【Angular】ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法

            $ openssl version
OpenSSL 1.1.1d 10 Sep 2019

        

            $ mkdir ssl
$ openssl genrsa -out ssl/server.key 2048
Generating RSA private key, 2048 bit long modulus (2 primes)
..........................................................+++++
.............................................+++++
e is 65537 (0x010001)
$ ls ssl/
server.key

        

            $ openssl req -new -key ssl/server.key -out ssl/server.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:JP
State or Province Name (full name) [Some-State]:Kumamoto
Locality Name (eg, city) []:Kumamoto
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Tacos Kingdom LLC
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:localhost
Email Address []:contact@tacoskingdom.com

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:*****************
An optional company name []:

        

            $ ls ssl/
server.csr server.key

        

            $ openssl x509 -days 365 -req -signkey ssl/server.key -in ssl/server.csr -out ssl/server.crt
Signature ok
subject=C = JP, ST = Kumamoto, O = Tacos Kingdom LLC, CN = localhost
Getting Private key
$ ls ssl/
server.crt server.csr server.key

        

            $ tree
.
├── angular.json
#...他の中身は中略
└── ssl
    ├── server.crt
    ├── server.csr
    └── server.key

        

            //...中略
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
            "browserTarget": "ng-playgound:build",
            "sslKey": "./ssl/server.key",
            "sslCert": "./ssl/server.crt"
        },
        "configurations": {
            "production": {
                "browserTarget": "ng-playgound:build:production"
            }
        }
    },
//...以下略

        

            $ ng serve --ssl

        

            $ brew install mkcert
$ brew install nss

        

            $ mkcert -install
Created a new local CA at "/Users/********/Library/Application Support/mkcert" 💥
Sudo password:**************
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

        

            % mkcert localhost 127.0.0.1
Using the local CA at "/Users/*******/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"

The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" ✅

        

            $ cp localhost+1-key.pem {angularのプロジェクトまでのパス}/server.key
$ cp localhost+1.pem {angularのプロジェクトまでのパス}/server.crt

        

            $ tree
.
├── angular.json
#...他の中身は中略
└── ssl
    ├── server.crt
    └── server.key

        

            $ ng serve --ssl