wsl2(Ubuntu 22.04.2)環境でviteの開発サーバーをhttpsに。

概要

localhostでスマホのブラウザのカメラ機能を試してみたかったが、
iOS, Android端末ではhttpsでないとnavigator.mediaDevicesを利用できなかったため、
ローカル環境でhttpsを利用できるようにするためにmkcertを使用したときの備忘録。

getUserMedia()で静止画を撮影する

補足

このプラグインのほうが簡単そう

環境

環境

$ uname -a
Linux <pc_name> 5.15.90.1-microsoft-standard-WSL2

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.2 LTS
Release:        22.04
Codename:       jammy

$ sudo lshw -class processor
  *-cpu                     
       product: AMD Ryzen 7 6800U with Radeon Graphics

必要なパッケージをインストール

パッケージ:libnss3

これは、セキュリティを考慮したクライアント・サーバアプリケーションのクロス プラットフォームな開発の補助を目的としたライブラリ群です。SSLv2 および v4, TLS, PKCS #5, #7, #11, #12, S/MIME, X.509 v3 証明書や、その他のセキュリティ 標準に対応しています。

$ sudo apt install libnss3-tools

mkcertを取得

$ wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64

mkcertを/user/bin/にコピー（または移動）し、実行権限を付与

$ sudo cp -p mkcert-v1.4.3-linux-amd64 /usr/bin/mkcert
$ chmod +x /usr/bin/mkcert

バージョン確認

$ mkcert --version
v1.4.3

ローカル認証局を作成

$ mkcert -install
Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox and/or Chrome/Chromium trust store (requires browser restart)! 🦊

ローカル認証局を確認

$ mkcert -CAROOT
/home/<user>/.local/share/mkcert

証明書を作成

$ mkdir certs
$ cd certs/
$ mkcert localhost
Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

It will expire on 7 September 2025 🗓

証明書を確認

$ ls
localhost-key.pem  localhost.pem

vite.config.jsを編集（または作成）

vite.config.js

import { defineConfig } from "vite";
import fs from "fs";

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync("./certs/localhost-key.pem"),
      cert: fs.readFileSync("./certs/localhost.pem"),
    },
  }
});

開発サーバーを起動

https://~で起動していること確認

$ npm run dev
 VITE v4.3.9  ready in 193 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: https://172.21.214.107:5173/
  ➜  press h to show help