WSL上でNuxt3を利用して開発中にSSLでサイトを開く必要が出てきたので、いろいろやったよ。
Nuxt3でHttps化する
package.jsonの編集
これは超簡単
//package.json
"dev": "nuxt dev",
"devssl": "nuxt dev --https",
見たいに、devsslを追加した。
--httpsを追加したら、良いだけ。
開発サーバーを起動
これでnpm run devする
こんな感じでhttps://localhost:3000/ で起動する。
ブラウザで確認
でもブラウザで接続すると、張り切ってエラーになる。
なので、mkcertでオレオレ証明書を作らないといけない。
Mkcertのインストール
Ubuntu22
Ubuntu22の人は以下のコマンド
apt -y install mkcert
Ubuntu20.4
僕の環境ではUbuntu20.4なのでめんどくさいけど、
一応おまじない程度にaptをアップデート
apt update -y
何かをインストール
apt install wget libnss3-tools
ホームディレクトリに移動して
wgetでダウンロード
cd
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
システムパスに移動
mv mkcert-v1.4.3-linux-amd64 /usr/bin/mkcert
権限をmkcertに設定にする
chmod +x /usr/bin/mkcert
これでUbuntu22のapt installの結果と同じ所まで来た 長い
mecertがインストールされている事を確認
mkcert --version
成功！！
ローカルCAの生成
(ローカルCAってなに？)
mkcert -install
OKぽい！
##CA証明書のパスを確認
mkcert -CAROOT
~/.local/share/mkcertにあるのね。OK
webサイト証明書の作成
今回は、~/sshの下に作る
## ディレクトリを作って移動
mkdir ssl
cd ssl
証明書を作る
mcert localhost
WSLの時だけ、Windows側の証明書を作成して登録
Macの人は要らん。
~/.local/share/mkcertに移動
cd ~/.local/share/mkcert
変換する
openssl pkcs12 -export -inkey rootCA-key.pem -in rootCA.pem -out rootCA.pfx
結果のスクショを取り忘れたごめん。
とりあえず、パスワードをきかれるのでいい感じに。
(このパスワードは後から使うから覚えておく)
Windowsのエクスプローラーで~/.local/share/mkcertを開く
僕の環境ではこんな感じ
\\wsl$\Ubuntu-20.04\home\<userName>\.local\share\mkcert
rootCA.pfxを右クリックして、Pfxインストールウィザードを開く
PFXのインストールをクリック
「現在のユーザー」を選んで次へ
そのままで次へ
パスワードを入力して次へ
「証明書をすべて次のストアに配置する」にチェック
「参照」から「信頼されたルート証明機関」を選択
次へ
完了するとインストールが実行する。
package.jsonにSSH証明書の情報を追加して実行
//package.json
"dev": "nuxt dev",
"devssl": "nuxt dev --https --ssl-cert ~/ssl/localhost.pem --ssl-key ~/ssl/localhost-key.pem",
## Nuxtを実行
起動した。
ブラウザ側もエラー無く！