AIcicle Records

本番環境はHTTPSが常識ですが、ローカルでもHTTPSを使えば以下のメリットがあります：

Secure Cookie や Web Crypto API が使える
本番との差異によるバグを防止できる

ここでは、ローカルHTTPS化を簡単に行えるツール「mkcert」の使い方と注意点を紹介します。

1. mkcertの導入と証明書作成

🔧 インストール（macOS + Homebrew）

1
brew install mkcert
2
mkcert -install

成功すると以下のようなメッセージが表示されます：

1
The local CA is now installed in the system trust store! ⚡️

🔐 証明書の作成

1
mkcert localhost 127.0.0.1 ::1

localhost.pem と localhost-key.pem の2つのファイルが生成されます。

2. 開発サーバーへの設定（例：Vite）

1
import { defineConfig } from 'vite';
2
import react from '@vitejs/plugin-react';
3
import fs from 'fs';
4

5
export default defineConfig({
6
  plugins: [react()],
7
  server: {
8
    https: {
9
      key: fs.readFileSync('./localhost-key.pem'),
10
      cert: fs.readFileSync('./localhost.pem'),
11
    },
12
  },
13
});

この設定後、npm run dev で https://localhost:xxxx にアクセス可能になります。

3. Firefoxでの注意点

mkcert -install 実行時、次の警告が出る場合があります：

1
Warning: "certutil" is not available, so the CA can't be automatically installed in Firefox!

🛠 対処法

1
brew install nss
2
mkcert -install

FirefoxがローカルCAを信頼するようになります。

※ Firefoxを使わない場合、この警告は無視してOKです。