wslでssl(https)のWEBサーバーを起動する(Nuxt3のnpm run devもhttps化)

WSL上でNuxt3を利用して開発中にSSLでサイトを開く必要が出てきたので、いろいろやったよ。

# Nuxt3でHttps化する
## package.jsonの編集
これは超簡単
```
//package.json
"dev": "nuxt dev",
"devssl": "nuxt dev --https",
```
見たいに、devsslを追加した。
`--https`を追加したら、良いだけ。

## 開発サーバーを起動
これでnpm run devする
![2023-05-16_00h18_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/d3b34b5d-bc0e-5baf-c5e9-f96c1e90e293.png)

こんな感じでhttps://localhost:3000/ で起動する。

## ブラウザで確認
でもブラウザで接続すると、張り切ってエラーになる。
![2023-05-16_00h20_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/0387e6a9-ce63-3ae4-940d-48cb610462b3.png)

なので、**mkcertでオレオレ証明書を作らないと**いけない。

# Mkcertのインストール

## Ubuntu22
Ubuntu22の人は以下のコマンド
```
apt -y install mkcert
```
## Ubuntu20.4
僕の環境ではUbuntu20.4なのでめんどくさいけど、
一応おまじない程度にaptをアップデート
```bash
apt update -y
```
何かをインストール
```bash
apt install wget libnss3-tools
```
ホームディレクトリに移動して
wgetでダウンロード
```bash
cd 
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
```
システムパスに移動
```bash
mv mkcert-v1.4.3-linux-amd64 /usr/bin/mkcert
```
権限をmkcertに設定にする
```bash
chmod +x /usr/bin/mkcert
```
これでUbuntu22の`apt install`の結果と同じ所まで来た　長い:sweat:
## mecertがインストールされている事を確認
```bash
mkcert --version
```
![2023-05-16_00h32_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/dc674317-9274-018e-07fd-3776fa2862ea.png)
成功！！

# ローカルCAの生成
(ローカルCAってなに？)
```
mkcert -install
```
![2023-05-16_00h34_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/c2df637e-1f20-aa97-c0fd-245d50d6dbbf.png)
OKぽい！

##CA証明書のパスを確認
```
mkcert -CAROOT
```
![2023-05-16_00h35_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/81908f23-6b9e-54ea-86c8-0f91c84a1380.png)
`~/.local/share/mkcert`にあるのね。OK

# webサイト証明書の作成
今回は、`~/ssh`の下に作る

##　ディレクトリを作って移動
```bash
mkdir ssl
cd ssl
```
## 証明書を作る
```bash
mcert localhost
```
![2023-05-16_00h38_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/82967af8-81cf-a48a-04f9-996e7c52ef9c.png)

# 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`
![2023-05-16_00h47_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/0249f463-bb5b-f724-ea9b-0ca1a7c063d0.png)

## rootCA.pfxを右クリックして、Pfxインストールウィザードを開く
![2023-05-16_00h49_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/e94f2221-b823-1251-0a61-0ee5e4859784.png)
PFXのインストールをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/62edd557-eb25-a704-72b1-4f03a1a6a2e9.png)

「現在のユーザー」を選んで次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/1cd7d10e-2d95-13b7-1904-87e8f97a1312.png)

そのままで次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/6638b561-eb47-de6e-fd18-a903c9474e16.png)

パスワードを入力して次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/326290eb-8eac-942a-cfa3-8d4c86e461f7.png)

「証明書をすべて次のストアに配置する」にチェック
「参照」から「信頼されたルート証明機関」を選択
次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/0fb4ba6c-b35d-67c9-9ec3-d908a7853e40.png)
完了するとインストールが実行する。

# package.jsonにSSH証明書の情報を追加して実行
```
//package.json
"dev": "nuxt dev",
"devssl": "nuxt dev --https --ssl-cert ~/ssl/localhost.pem --ssl-key ~/ssl/localhost-key.pem",
```
##　Nuxtを実行
![2023-05-16_00h57_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/32d0a89a-af7c-6dbf-ddf8-566f6b137535.png)
起動した。
![2023-05-16_00h58_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1681950/8e6a1f08-bd99-3685-339d-ab89d2e93ecf.png)

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