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コマンドを実行して・・・のような手順も省略できるのが良い点に思いました。