nextauth.js でシングルサインオン機能を実装する場合、SlackなどはアプリケーションがHTTPS接続をサポートしていることが前提となっており、開発時にもHTTPSのサポートが必要となる場合があります。このような場合には、local-ssl-proxyを利用して、リバースプロキシのようにする方法が簡単で便利です。
以下、LOCAL環境＝Windows PC、という前提です。
local-ssl-proxyのインストール
local-ssl-proxyはグローバルインストールしかサポートしていません。ので、グローバルインストールします。
npm install -g local-ssl-proxy
以下は利用例です。Next.jsのアプリは3000番ポートで起動している状態で、local-ssl-proxyを3001番ポートで起動して、向き先を3000番ポートに向けてやります。こんな感じ。
npx local-ssl-proxy --source 3001 --target 3000
とりあえずこれで、HTTPで動作しているアプリケーションに対してHTTPSで呼び出すことができるようになります。
動くには動くが毎回SSL警告が出る
You'll get a warning because the certificate is self-signed, this is safe to ignore during development.
デフォルトの証明書が自己署名であるため、アクセス時にSSL警告が出ます。有効な証明書を作成しましょう。
mkcertのインストール
scoopからインストールするのが容易です。クイックスタートに従って以下のコマンドを実行します。
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex
インストールできたら、以下のコマンドを実行。
scoop bucket add extras
scoop install mkcert
mkcertの実行
以下のコマンドは管理者権限で実行しないとエラーになるので注意。 もし一般ユーザーで実行してしまった場合、mkcert -uninstall してやり直す。
mkcert -install
以下でlocalhost用の鍵と証明書を作成する。
mkcert localhost
これで、localhost-key.pemとlocalhost.pemが作成されました。
証明書を有効にして起動する
npx local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000
毎回local-ssl-proxyを起動するのはめんどい
npm-run-allが便利です。
npm install -D npm-run-all
インストールできたら、package.jsonを以下のように修正します。
{
"scripts": {
"dev": "npm-run-all -p dev:*",
"dev:app": "next dev",
"dev:ssl": "local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000"
/* 省略 */
}
/* 省略 */
}
これで、npm run dev とすると、dev:*に一致するものを並列実行（-p）してくれます。
余談
好評なので英語版も書きました。