カテゴリー
【Angular】ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法
※ 当ページには【広告/PR】を含む場合があります。
2020/03/29
2022/08/10
http://localhost:4200
https
opensslのインストール
alpine linux
$ openssl version
OpenSSL 1.1.1d 10 Sep 2019
認証キーの生成
server.key
ssl
$ 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
証明書署名要求ファイル(CSR)の作成
server.csr
$ 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
SSL証明書(CRT)の作成
$ 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
angular.jsonの編集
angular.json
tree
$ tree
.
├── angular.json
#...他の中身は中略
└── ssl
├── server.crt
├── server.csr
└── server.key
angular.json
serve
//...中略
"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"
}
}
},
//...以下略
localhost:4200
serveしてみる
--ssl
$ ng serve --ssl
chrome

localhost

https://localhost:4200
保護されていない通信
証明書(無効)


そうだ、mkcertにしてみよう
openssl
mkcertのインストール
$ 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" ✅
localhost+1-key.pem
localhost+1.pem
openssl
server.key
server.crt
$ 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
Chromeでの挙動



Firefoxでの挙動



まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー