ViteでHTTPSローカル開発環境を構築する方法｜5つの手法を徹底比較

Web Crypto API、Service Worker、カメラ・マイクのgetUserMedia()など、ブラウザのセキュアコンテキスト必須APIが増えています。ローカル開発でもhttps://localhostが求められる場面は珍しくありません。

Viteの開発サーバーはserver.httpsオプションでHTTPSに対応しますが、設定手段は複数あり、プロジェクトの要件やチーム構成で最適解が変わります。代表的な手法はvite-plugin-mkcert、@vitejs/plugin-basic-ssl、mkcert手動設定、devcert、local-ssl-proxyの5つです。

なぜローカル開発にHTTPSが必要なのか

http://localhostは多くのブラウザで「安全なコンテキスト」として扱われますが、以下のケースでは実際にHTTPS化しないと動作確認できません。

特にスマートフォン実機テストではhttps://192.168.x.x:5173のような接続が必要になるため、開発サーバー自体をHTTPS化する意義が大きいです。

5つのHTTPS化手法の比較

Viteの開発サーバーをHTTPS化する主な方法は次の5つです。プロジェクト規模やチーム環境に応じて選択してください。

方法1: vite-plugin-mkcert（推奨）

mkcertの証明書発行からローカルCAの信頼登録までをViteプラグインが自動で行います。ブラウザの証明書警告が出ない点が最大の利点です。

セットアップ手順

npm install -D vite-plugin-mkcert

vite.config.tsを編集します。

import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  plugins: [mkcert()],
})

Vite 5以降ではプラグインを追加するだけでserver.httpsの設定は不要です。npm run devを実行すると、初回起動時にローカルCAの作成とシステムへの登録が行われます。

カスタムドメインを使う場合

export default defineConfig({
  plugins: [
    mkcert({
      hosts: ['myapp.local', 'localhost'],
    }),
  ],
})

/etc/hosts（macOS/Linux）またはC:\Windows\System32\drivers\etc\hosts（Windows）にホスト名を追加しておく必要があります。

127.0.0.1 myapp.local

React / Vue との併用

他のフレームワークプラグインと一緒に使う場合も、pluginsの配列に追加するだけです。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  plugins: [react(), mkcert()],
})

方法2: @vitejs/plugin-basic-ssl

Vite公式が提供する軽量プラグインです。自己署名証明書を自動生成してキャッシュします。ブラウザに「この接続は安全ではありません」と警告が表示されますが、「詳細」→「このサイトにアクセスする」で続行できます。

セットアップ手順

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

import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [basicSsl()],
})

オプション設定

basicSsl({
  name: 'my-app',        // 証明書の名前
  domains: ['*.local'],   // 信頼するドメイン
  certDir: './certs',     // 証明書の保存先ディレクトリ
})

手軽さでは最も優れていますが、ブラウザ警告が毎回表示される点に注意してください。チーム開発では警告への対処方法を共有しておかないと混乱の原因になります。

方法3: mkcertを手動インストールして証明書を指定

mkcert CLIを直接インストールし、生成した証明書をvite.config.tsに指定する方法です。CI/CD環境やDockerコンテナ内での利用、証明書の管理を明示的に行いたい場合に適しています。

mkcertのインストール

ローカルCAの作成と証明書の発行

# ローカルCAをシステムに登録（初回のみ）
mkcert -install

# localhost用の証明書を生成
mkcert localhost 127.0.0.1 ::1

実行すると、カレントディレクトリにlocalhost+2.pem（証明書）とlocalhost+2-key.pem（秘密鍵）が生成されます。

vite.config.tsへの設定

import { defineConfig } from 'vite'
import fs from 'node:fs'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./localhost+2-key.pem'),
      cert: fs.readFileSync('./localhost+2.pem'),
    },
  },
})

.gitignoreに*.pemを追加して、証明書ファイルをリポジトリにコミットしないようにしてください。

# .gitignore
*.pem

方法4: devcertパッケージを利用

devcertはNode.jsからプログラム的に証明書を発行できるライブラリです。ただし、本家リポジトリ（davewasmer/devcert）の更新は停滞しており、Expo がフォークした@expo/devcertが現在の推奨フォークです。

セットアップ手順

npm install -D devcert

import { defineConfig } from 'vite'
import devcert from 'devcert'

export default defineConfig(async () => {
  const { key, cert } = await devcert.certificateFor('localhost')
  return {
    server: {
      https: { key, cert },
    },
  }
})

Viteの設定ファイルは非同期関数をサポートしているため、asyncでdefineConfigのコールバックを定義します。

注意点: devcertは初回実行時にルート権限（sudo）を求める場合があります。また、本家パッケージのメンテナンス状況を考慮すると、新規プロジェクトではvite-plugin-mkcertを選ぶ方が安全です。

方法5: local-ssl-proxyで外部からHTTPSを被せる

Viteの設定を変えず、別プロセスでHTTPSプロキシを立てる手法です。http://localhost:5173の前段にhttps://localhost:3001を配置するイメージです。

セットアップ手順

# mkcertで証明書を生成（方法3と同じ手順）
mkcert localhost

# local-ssl-proxyをインストール
npm install -g local-ssl-proxy

起動コマンド

# Viteの開発サーバーを通常起動
npm run dev

# 別ターミナルでHTTPSプロキシを起動
local-ssl-proxy \
  --source 3001 \
  --target 5173 \
  --key localhost-key.pem \
  --cert localhost.pem

https://localhost:3001にアクセスすると、内部的にhttp://localhost:5173へプロキシされます。

npm scriptsにまとめる

package.jsonに両方のコマンドを登録しておくと便利です。concurrentlyを使って並列起動できます。

{
  "scripts": {
    "dev": "vite",
    "dev:ssl": "concurrently \"vite\" \"local-ssl-proxy --source 3001 --target 5173 --key localhost-key.pem --cert localhost.pem\""
  }
}

この方法はViteのvite.config.tsを一切変更しないため、HTTPS不要な環境（CI等）と共存しやすい利点があります。一方、HMR（Hot Module Replacement）のWebSocket接続がプロキシ経由になるため、設定によってはHMRが動作しない場合があります。

トラブルシューティング

「NET::ERR_CERT_AUTHORITY_INVALID」が表示される

自己署名証明書（@vitejs/plugin-basic-ssl）を使っている場合に発生します。ブラウザの「詳細設定」から続行するか、vite-plugin-mkcertに切り替えてローカルCAを信頼させてください。

mkcertのインストールで「certutil not found」エラー（Linux）

Firefoxの証明書ストアに登録するためにcertutilが必要です。

# Ubuntu / Debian
sudo apt install libnss3-tools

# Fedora
sudo dnf install nss-tools

# Arch Linux
sudo pacman -S nss

インストール後、mkcert -installを再実行してください。

HMRが動作しない（WebSocket接続エラー）

HTTPSプロキシを使っている場合や、Docker経由でアクセスしている場合に起きやすい現象です。server.hmrオプションで接続先を明示してください。

export default defineConfig({
  server: {
    https: { /* ... */ },
    hmr: {
      host: 'localhost',
      port: 5173,
      protocol: 'wss',
    },
  },
})

WSL2環境でHTTPSが使えない

WSL2のLinux環境ではmkcertのCA登録がWindows側のブラウザに反映されない場合があります。次の手順で対応します。

1. WSL2内でmkcert -installを実行
2. mkcert -CAROOTでCA証明書のパスを確認
3. そのディレクトリ内のrootCA.pemをWindows側にコピー
4. Windows側でダブルクリック → 「証明書のインストール」→「信頼されたルート証明機関」に追加

ポート5173以外で起動したい

server.portで変更できます。

export default defineConfig({
  server: {
    port: 3000,
    https: { /* ... */ },
  },
})

CLIから指定する場合はvite --port 3000です。

CORSエラーへの対処

HTTPS化とあわせて発生しやすいのがCORSエラーです。フロントエンドとAPIサーバーのオリジンが異なる場合にserver.proxyを設定すると、ブラウザ上ではCORSが発生しなくなります。

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        secure: false, // 自己署名証明書のAPIサーバーへの接続を許可
      },
    },
  },
})

changeOrigin: trueはリクエストのHostヘッダーをターゲットのホスト名に書き換えます。APIサーバーがHostヘッダーを検証している場合に必要です。

Viteのバージョンと対応状況

2026年2月時点でのViteの主要バージョンとHTTPS関連の対応状況です。

最新の安定版はVite 7.3系です（出典: Vite Releases）。--httpsCLIオプションはVite 4以降で非推奨になっているため、プラグインまたはvite.config.tsでの設定を使用してください。

まとめ

Viteの開発サーバーをHTTPS化する方法は複数ありますが、迷ったらvite-plugin-mkcertを選択してください。証明書の発行からブラウザへのCA登録まで自動化されており、チームメンバーが増えてもnpm installとnpm run devだけで同じHTTPS環境が再現されます。

手早く試したいだけなら@vitejs/plugin-basic-sslで十分ですが、ブラウザ警告が毎回出る点に留意してください。Docker環境やCI/CDパイプラインでは、mkcertの手動セットアップ（方法3）の方が制御しやすい場面もあります。

各プラグインの公式リポジトリはこちらです。

• vite-plugin-mkcert（GitHub）
• @vitejs/plugin-basic-ssl（GitHub）
• mkcert（GitHub）