Docker環境上のNext.jsをhttpsに対応させる

概要

本記事では、Docker環境上におけるNext.jsのオプション--experimental-httpsが使用できない方向けの回避処置の解説になります。

弊環境

• ホスト：Ubuntu22.04
• Docker : 26.0.2
• Image : node:21.7.3-bullseye

本題

先行事項
コンテナにrootユーザでは入ればおそらく普通に動きます。（未実証）
ですが、nodeのオフィシャルでは「コンテナはrootで動かすな！nodeユーザ使え」と言われてるので、大人しくそれに従いましょう。

追記（執筆中）
エラーコードを再度確認しましたらmkcertが見つからずエラーを起こしてました。
暫定対処としてこちらをインストールしてもおそらく動くかと思います。

各種鍵を生成します

$ openssl genssl genrsa 2048 > server.key
$ openssl req -new -key server.key > server.csr

csr生成時に様々聞かれますが、オレオレ証明書であれば別段記入はいりません。

署名を行います

$ openssl x509 -in server.csr -days 3650 -req -signkey server.key > server.crt

以上の工程を終えると.key .csr .crtの３種のファイルができるので、

.
├── my-app/
│ 　　　　└── package.json
├── server.crt
├── server.csr
└── server.key

のように設置してください。

その後package.jsonを改変して終了です。

package.json

"scripts": {
    "dev": "next dev --experimental-https --experimental-https-key ../server.key --experimental-https-cert ../server.crt",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }

next.jsのプロジェクトルートに戻りnpm run devを実行して確認してください。
お疲れ様でした。

参考にさせて頂いた物