Vite で localhost の HTTPS を有効にする方法

問題点

Vite 開発サーバーで HTTPS を使用する際、自己署名証明書の問題で Chrome が「無効な証明書」エラーを表示します。多くの開発者は手動で証明書を生成して設定しようとしますが、ブラウザの警告を回避するには証明書の適切な設定と信頼が必要です。

解決策

1. vite-plugin-mkcert (推奨方法)

最もシンプルで効果的な解決策は vite-plugin-mkcert を使用することです。このプラグインは自動的にローカル証明書を生成し、システムとブラウザの信頼ストアにインストールします。

npm install vite-plugin-mkcert -D

// vite.config.js
import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: {
    https: true // オプションですが明示的に設定することを推奨
  },
  plugins: [mkcert()]
})

初回実行時にパスワードの入力を求められる場合があります。このプラグインは以下のことを自動的に行います：

• ローカル認証局（CA）の作成
• ローカルホスト用の証明書生成
• システムとブラウザへのCA証明書のインストール
• Firefox、Chrome、Safariなど主要ブラウザのサポート

TIP

この方法は開発環境専用です。本番環境では適切なSSL証明書（Let's Encryptなど）を使用してください。

2. @vitejs/plugin-basic-ssl (公式プラグイン)

Vite公式が提供する基本的なSSLプラグインもあります。

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

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

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

WARNING

このプラグインは簡易的な自己署名証明書を生成しますが、ブラウザによっては依然として警告が表示される可能性があります。

3. mkcert を直接使用する方法

より細かい制御が必要な場合は、mkcert を直接使用して証明書を生成できます。

# mkcert のインストール (macOS)
brew install mkcert

# ローカルCAのセットアップ
mkcert -install

# プロジェクト用証明書の生成
mkdir -p .cert
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'localhost' '127.0.0.1' '::1'

// vite.config.js
import { defineConfig } from 'vite'
import fs from 'fs'

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

4. 複数ドメイン向け設定

開発で複数のローカルドメインを使用する場合：

mkcert \
  -cert-file localhost-cert.pem -key-file localhost-key.pem \
  localhost 127.0.0.1 ::1 \
  example.localhost \
  dev-site.localhost

モバイルデバイスでのテスト

ローカルネットワーク上のモバイルデバイスからアクセスする場合：

1. mkcert -CAROOT でCA証明書の場所を確認
2. rootCA.pem ファイルをモバイルデバイスに転送
3. デバイス設定でCA証明書をインストール

トラブルシューティング

証明書エラーが続く場合

• ブラウザのキャッシュをクリアしてみてください
• 生成した証明書が有効なホスト名を含んでいるか確認してください
• 証明書のパスが正しいか確認してください

まとめ

ViteでHTTPSを有効にする最も簡単で信頼性の高い方法は vite-plugin-mkcert を使用することです。これにより、ローカル開発環境でのSSL証明書の問題を簡単に解決できます。モバイルテストや複数ドメイン開発などの高度なシナリオでは、mkcertを直接使用する方法が効果的です。

重要

常にセキュリティベストプラクティスに従い、自己署名証明書は開発環境でのみ使用し、本番環境では適切な証明書機関の発行する証明書を使用してください。