Next.jsのlocal環境でbuild and start実行時にhttps通信する簡単な方法

想定ユースケース

• 外部 OAuth 認証等により、HTTPS 通信が必須になるが、何らかの理由で local で development ではなく production で動作確認したいとき
  • Server Actions や SSG/SSR 動作確認を行いたい

Node.js で HTTPS プロキシを立てる

① SSL 証明書の作成

brew install mkcert
mkcert -install
mkcert ${任意のホスト名}

② next start でアプリを起動

next build
next start -H ${任意のホスト名}

③ HTTPS プロキシを作る（Node.js）

$ brew install http-proxy

// https-proxy.js
const https = require("https");
const httpProxy = require("http-proxy");
const fs = require("fs");

const proxy = httpProxy.createProxyServer({});

proxy.on("proxyReq", (proxyReq) => {
  // port setting
  proxyReq.setHeader("x-forwarded-host", "${任意のホスト名}:3443");
});

https
  .createServer(
    {
      key: fs.readFileSync("./${任意のホスト名}-key.pem", "utf8"),
      cert: fs.readFileSync("./${任意のホスト名}.pem", "utf8"),
    },
    (req, res) => {
      proxy.web(req, res, {
        target: "http://${任意のホスト名}:3000",
        changeOrigin: true,
      });
    }
  )
  .listen(3443, () => {
    console.log("HTTPS proxy listening on https://${任意のホスト名}:3443");
  });

④ 起動

$ node https-proxy.js

まとめ

next start（= production build）を HTTPS でローカル起動したい場合、Next.js 自体には --experimental-https のようなフラグは start コマンドでは存在しないため、外部の HTTPS 対応プロキシサーバーを使うのが一番簡単で確実な方法でした。
Next 自体は HTTP で動かし、HTTPS 対応のリバースプロキシを使いました。