Viteで手軽にhttps通信を適用する(dev)

概要

開発環境向けに簡易のhttps通信を行う方法です。
詳しくは公式のサーバオプション(server.https)を参照いただければと思います。

https://ja.vitejs.dev/config/server-options.html

なお、公式では独自の証明書を作成することが推奨されています。
"@vitejs/plugin-basic-ssl"のインストール時にも高い脆弱性を指摘されるため、「やらないよりマシ」程度で使用は自己責任でお願いします。

手順

1. "@vitejs/plugin-basic-ssl"をインストールする。
2. "vite.config.js"にプラグインを追加する。
3. 動作確認をする。

手順詳細

1. "@vitejs/plugin-basic-ssl"をインストールする。

npm i -D @vitejs/plugin-basic-ssl

2. "vite.config.js"にプラグインを追加する。
   インストール時に脆弱性が指摘されます。インストールは可能です。

vite.config.js

import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [
    basicSsl()
  ]
}

3. 動作確認をする。

npm run dev

起動時

 ➜  Local:   https://localhost:5173/