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でオレオレ証明書を作らないといけない。

Ubuntu22の人は以下のコマンド

apt -y install mkcert

僕の環境では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の結果と同じ所まで来た　長い

mkcert --version

成功！！

(ローカルCAってなに？)

mkcert -install

OKぽい！

##CA証明書のパスを確認

mkcert -CAROOT

~/.local/share/mkcertにあるのね。OK

今回は、~/sshの下に作る

##　ディレクトリを作って移動

mkdir ssl
cd ssl

mcert localhost

Macの人は要らん。

~/.local/share/mkcertに移動

cd ~/.local/share/mkcert

openssl pkcs12 -export -inkey rootCA-key.pem -in rootCA.pem -out rootCA.pfx

結果のスクショを取り忘れたごめん。
とりあえず、パスワードをきかれるのでいい感じに。
(このパスワードは後から使うから覚えておく)

僕の環境ではこんな感じ
\\wsl$\Ubuntu-20.04\home\<userName>\.local\share\mkcert

PFXのインストールをクリック

「現在のユーザー」を選んで次へ

そのままで次へ

パスワードを入力して次へ

「証明書をすべて次のストアに配置する」にチェック
「参照」から「信頼されたルート証明機関」を選択
次へ

完了するとインストールが実行する。

//package.json
"dev": "nuxt dev",
"devssl": "nuxt dev --https --ssl-cert ~/ssl/localhost.pem --ssl-key ~/ssl/localhost-key.pem",

##　Nuxtを実行

起動した。

ブラウザ側もエラー無く！