viteでhttpsなlocalhostを起動する(devcert編)
吉川@広島です。
viteでhttpsなlocalhostを起動する | DevelopersIO
viteでhttpsなlocalhostを起動するにあたり、上の記事ではmkcertを使っていましたが、今日の社内Slackでdevcertの存在を知り、こちらで証明書を発行する方法を試してみました。
環境
- node 15.14.0
- yarn 1.22.10
- vite 2.3.6
- devcert 1.2.0
元のvite.config.ts
import { defineConfig } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' import path from 'path' export default defineConfig({ root: './', plugins: [reactRefresh()], resolve: { alias: { '@/': path.join(__dirname, './src/'), }, }, server: { open: true, https: { key: './localhost-key.pem', cert: './localhost.pem', }, }, })
こんな感じでした。
https: { key: './localhost-key.pem', cert: './localhost.pem', },
の箇所でmkcertで発行した証明書を読み込んでいます。これをdevcertに差し替えていきます。
変更後のvite.config.ts(NG)
devcertの certificateFor()
はPromiseを返す関数です。そのため設定ファイルにどう組み込むか悩みましたが、一旦下のようにしました。
import { defineConfig } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' import path from 'path' import devcert from 'devcert' // 追加 export default defineConfig({ root: './', plugins: [reactRefresh()], resolve: { alias: { '@/': path.join(__dirname, './src/'), }, }, server: { open: true, https: { key: (await devcert.certificateFor('localhost')).key, // 変更 cert: (await devcert.certificateFor('localhost')).cert, // 変更 }, }, })
yarn vite
で動かしてみると、下記のエラーが発生。
vite.config.ts:17:13: error: Top-level await is not available in the configured target environment ("ES2015")
やはりこの方法では無理そうです。
変更後のvite.config.ts(OK)
ドキュメントを見るとasync用の書き方があるみたいなのでこちらを使います。
import { UserConfigExport } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' import path from 'path' import devcert from 'devcert' export default async (): Promise<UserConfigExport> => { const { key, cert } = await devcert.certificateFor('localhost') return { root: './', plugins: [reactRefresh()], resolve: { alias: { '@/': path.join(__dirname, './src/'), }, }, server: { open: true, https: { key, cert, }, }, } }
yarn vite
これでhttpsなローカルサーバを起動できました。
mkcertと比較したメリット
mkcertと比べた時のメリットとしては、依存をNodeにまとめられる点かなと思いました。npmやyarnで入れることができるので、例えばMacの場合の brew install...
のような手順は必要なくなります。
また、vite.config.tsの設定ファイル上で発行処理を行ってくれるので、ローカル開発環境の初期構築時にまずmkcertコマンドを実行して・・・のような手順も省略できるのが良い点に思いました。