ローカル開発環境でHTTPSを使う

https

mkcertを使ってローカル環境でHTTPSを設定する方法です。 以下の手順はViteプロジェクトを前提としています。ステップ4以降は環境によって異なる場合があります。

  1. mkcertをインストールします macOSの場合：brew install mkcert
  2. プロジェクトのルートディレクトリに移動します
  3. mkcert localhost を実行します
  4. vite.config.ts を編集します
  server: {
  ...
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'https/localhost-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'https/localhost.pem')),
    },
  }
  1. pnpm dev で開発サーバーを起動します

参考：web.dev — ローカル開発にHTTPSを使う