Next.js を使ったサイトを開発していて、外部の API を叩いたり CDN のリンクを使ったりするので本番環境と同じ https (TLS)で開発できたほうが環境差によるバグを早めに発見できるので開発環境も https にしたかった
公式のドキュメントに server.js を使って https にする方法が書かれていたがカロリーが高そうだったので local-ssl-proxy を使って proxy する方法で実装した
1. mkcert でサーバー証明書を作成する
# mkcert のインストールとセットアップ $ brew install mkcert $ mkcert -install # リポジトリの top ディレクトリに移動 $ cd path/to/repo # localhost のサーバー証明を作成 $ mkcert localhost
リポジトリのトップ階層に localhost.pem と localhost-key.pem ができていればOK
※ https:example.com でアクセスしたい場合は example.com の証明が必要なので、サーバー証明のコマンドは mkcert example.com になる
2. local-ssl-proxy を使って https に proxy する
local-ssl-proxy のインストール
$ npm i -D local-ssl-proxy
https に proxy する npm script を作成する
"scripts": { "dev": "next dev", "dev:https": "next dev -p 13001 & local-ssl-proxy --key ./localhost-key.pem --cert ./localhost.pem --source 3001 --target 13001", // … }
Next.js は -p オプションで dev server のポートを指定できるので、next dev -p 13001 で通常の dev server を localhost:13001 で起動して、local-ssl-proxy --key ./localhost-key.pem --cert ./localhost.pem --source 3001 --target 13001 で local-ssl-proxy を使ってサーバー証明を読み込み https になる localhost:3001 を localhost:13001 の dev server に proxy させている
3. https な dev server を起動
$ npm run dev:https > next dev -p 13001 & local-ssl-proxy --key ./localhost-key.pem --cert ./localhost.pem --source 3001 --target 13001 Started proxy: https://localhost:3001 → http://localhost:13001 ▲ Next.js 13.5.4 - Local: http://localhost:13001 - Environments: .env.local ✓ Ready in 2.6s ✓ Compiled / in 1289ms (343 modules)
dev server が起動して https://localhost:3001にアクセスして Next のアプリが起動していればOK
※ このとき http://localhost:13001 にアクセスすると http な環境にアクセスできる
所感
mkcert + local-ssl-proxy を使うと server などのコードを追加することなくサクッと開発環境を https 化することができた！
まれにエラーなどサーバーをクラッシュさせると裏で動いている ポートがゾンビ化することがあるので、ゾンビ化すると使われてるポートを見つけて kill しないといけないのでそれだけが少し面倒だけど、導入の簡単さが勝るって感じです
おわり ( ᐢ˙꒳˙ᐢ )
[参考]
