自己証明書でvue-cliのhttps環境でpwdやる！

pwdの開発ではhttps環境が必要になります。

本来ならvue.config.jsで

devServer: {
 https: true
},

としたら https://localhost:8080 でいけるんでしょうけど、ちょっとこれがだめで。。。

というのも、今回開発環境をvagrant+parallelsで作成して、Mac上のブラウザで表示させてたんで、IPアドレス指定で表示させる必要があったんです。

まずは、ホスト名でアクセスできるように

IPアドレスでなく、ホスト名でアクセスできるようにするためにはhostsに設定を記述する必要があります。

Macなんで、 /private/etc/hosts に追記しました。

オレオレ証明書を作成しましょう！

今回これでハマりました。。。

作成したのに、どうしても https で証明書がエラーになる。。

調べてみたら、common nameでなくて、SubjectAlternateName(SAN)ってので複数のホストに対応させる必要があるようなんです。

ということでやってみました。

１）秘密鍵の作成
openssl genrsa -aes256 -out kumaexp1.com.key 2048
pass：abcdefg

２）パスワード削除
openssl rsa -in kumaexp1.com.key -out kumaexp1.com.key

３）CSRを作成
openssl req -new -key kumaexp1.com.key -out kumaexp1.com.csr
Country Name (2 letter code) [XX]:JP
State or Province Name (full name) []:Osaka
Locality Name (eg, city) [Default City]:Osaka
Organization Name (eg, company) [Default Company Ltd]:Kumakake
Organizational Unit Name (eg, section) []:devel
Common Name (eg, your name or your server’s hostname) []:kumaexp1.com
Email Address []:

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

４）SAN(SubjectAlternateName)リストを作成
echo “subjectAltName = DNS:kumaexp1.com, DNS:*.kumaexp1.com” > san.txt

５）証明書(CRT)作成
openssl x509 -req -days 3650 -in kumaexp1.com.csr -signkey kumaexp1.com.key -out kumaexp1.com.crt -extfile san.txt
Signature ok
subject=/C=JP/ST=Osaka/L=Osaka/O=Kumakake/OU=devel/CN=kumaexp1.com
Getting Private key

これで、

kumaexp1.com.crt / kumaexp1.com.csr / kumaexp1.com.key

が出来上がります。

出来上がったファイルを/etc/httpd/conf.d/ssl.confに設定して、apacheを再起動します。

Macはkeychainに登録する

これはホント一手間。。

１）crtファイルをkeychainで登録します。

２）「常に信頼する」にセットします。

vue側を設定する

これでapache経由でのhttps対応はOKなんですが、vueサーバー君の設定が必要です。

ここでは、おなじみのvue.config.jsに追記します。

const fs = require(‘fs’);
module.exports = {
　devServer: {
　　disableHostCheck: true,
　　https: {
　　　key : fs.readFileSync(‘kumaexp1.com.key’),
　　　cert: fs.readFileSync(‘kumaexp1.com.crt’),
　　// ca : fs.readFileSync(”),
　　}
　},
}

中間証明書はいらなかった模様。。

これで、 npm run serve ってやると、証明書が有効になります。

Macからアクセスしてみます。

https://kumaexp1.com:8080 でvueのデバッグができるようになりました(^^)