Windows環境のIonic ローカル開発でSSLの利用

Windows環境のIonicでSSL環境の構築

下記の環境で開発

Ionicバージョン関係

package.json
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",

ionic -v
5.2.5

手順

1. PCにopenSSLデータ設置
2. PCの環境変数を設定
3. npmでモジュールを追加してSSL生成
4. package.jsonでSSLを有効化

1.PCにopenSSLデータ設置

下記GoogleCodeからダウンロードし「C:/OpenSSL-Win32/」に設置
任意のディレクトリでもよいかも
https://code.google.com/archive/p/openssl-for-windows/downloads

2. PCの環境変数を設定

環境変数のパネルを開く

設定や「Windowsキー+Pause|Break」などコントロール パネル\システムとセキュリティ\システムを開き、左カラムの上から４つめシステム詳細設定を開く

システム環境変数(s)へ新しい変数を追加

変数
OPENSSL_CONF
値
c:\OpenSSL-Win32\openssl.cnf

システム環境変数(s)のpathに新しい値を追加

変数
Path
値の最後に追加
C:\OpenSSL-Win32\bin

動作チェック

実行コマンド
openssl version
実行後
OpenSSL 0.9.8k 25 Mar 2009

3. npmでモジュールを追加してSSL生成

Commandでグローバルにモジュール追加

実行コマンド
npm install -g openssl
実行後
+ openssl@1.1.0
added 6 packages from 14 contributors in 1.33s

SSL生成

実行コマンド
ionic ssl generate
実行後
Created .\.ionic\ssl directory for you.
> openssl.exe req -x509 -newkey rsa:2048 -nodes -subj /C=US/ST=Wisconsin/L=Madison/O=Ionic/CN=localhost -reqexts SAN -extensions SAN -config C:\Users\takumi\AppData\Local\Temp\ionic-ssl-8b38e0 -days 365 -keyout I:\myApp\.ionic\ssl\key.pem -out I:\myApp\.ionic\ssl\cert.pem
Loading 'screen' into random state - done
Generating a 2048 bit RSA private key
......................................+++
.+++
writing new private key to 'I:\myApp\.ionic\ssl\key.pem'
-----

Key:  .\.ionic\ssl\key.pem
Cert: .\.ionic\ssl\cert.pem

[OK] Generated key & certificate!

4. package.jsonでSSLを有効化

ssl有効化とkeyなどのパス指定

package.json
ionic serve --ssl --key-path=./.ionic/ssl/key.pem --cert-path=./.ionic/ssl/cert.pem

IonicSSL設定
https://ionicframework.com/docs/cli/commands/ssl-generate#option-key-path

参考サイト