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)ってので複数のホストに対応させる必要があるようなんです。

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

1)秘密鍵の作成
openssl genrsa -aes256 -out kumaexp1.com.key 2048
pass:abcdefg

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

3)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 []:

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

5)証明書(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に登録する

これはホント一手間。。

1)crtファイルをkeychainで登録します。

2)「常に信頼する」にセットします。

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のデバッグができるようになりました(^^)