こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。
Next.jsのアプリケーション開発をしている際に、HTTPSでアクセスしたいことはないでしょうか？私はあります。
ということで、mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみました。
前提
OS環境としては、MacOSで検証を行っています。
mkcert について
mkcertはローカル開発環境に信頼された証明書を作成できるツールです。
今回はこちらを利用して証明書を発行してみます。
インストール
インストールはMacOSの場合brewコマンドで簡単にインストールすることができます。なお、MacOS以外についてもREADMEにインストール方法が記載されています。
% brew install mkcert
==> Fetching mkcert
==> Downloading https://ghcr.io/v2/homebrew/core/mkcert/manifests/1.4.4
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/mkcert/blobs/sha256:caadb67940cb551fc16122dc0486cac6a0dc948ccb
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:caadb67940cb551fc16122dc04
######################################################################## 100.0%
==> Pouring mkcert--1.4.4.arm64_monterey.bottle.tar.gz
🍺 /opt/homebrew/Cellar/mkcert/1.4.4: 6 files, 3.7MB
==> Running `brew cleanup mkcert`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).% mkcert --version
v1.4.4インストール前の状態を確認する
security dump-trust-settingsコマンドを利用して、信頼済みの管理者証明書を確認してみます。
security settings
dump-trust-settings [-s] [-d]
Display Trust Settings.
Options:
-s Display trusted system certs; default is user.
-d Display trusted admin certs; default is user.% security dump-trust-settings -d
Number of trusted certs = 2
Cert 0: XXXXXXXXXX Certificate Authority
Number of trust settings : 0
Cert 1: XXXXXXXXXX Certificate Authority
Number of trust settings : 0私の環境では既に2つの証明書が存在していました。（一応伏せ字にしています
ローカルCAを追加してみる
では、実際にmkcertを利用してローカルCAを作成し、信頼ストアに追加してみます。
% mkcert -install
Created a new local CA 💥
Sudo password:
The local CA is now installed in the system trust store! ⚡️追加されました！ なお、追加時には何度か確認ダイアログが表示されるので、それぞれ許可します。
追加を確認してみる
実際に確認してみます。
% security dump-trust-settings -d
Number of trusted certs = 3
Cert 0: XXXXXXXXXX Certificate Authority
Number of trust settings : 0
Cert 1: XXXXXXXXXX Certificate Authority
Number of trust settings : 0
Cert 2: mkcert XXXXX@XXXXXXXXXX.local
Number of trust settings : 2
Trust Setting 0:
Policy OID : SSL
Result Type : kSecTrustSettingsResultTrustRoot
Trust Setting 1:
Policy OID : Apple X509 Basic
Result Type : kSecTrustSettingsResultTrustRoot追加されたことが確認できました。
証明書を発行してみる
では、最後に任意のホスト名で証明書を発行してみます。今回はlocalhostの証明書を発行します。
% mkcert localhost
Created a new certificate valid for the following names 📜
- "localhost"
The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅
It will expire on 11 April 2025 🗓2つのファイルが作成されました！
Next.jsで試してみる
では、実際にHTTPSでアクセスできるか試してみます。
事前準備
まずは簡単なアプリを作成しておきます。
% yarn create next-app --typescript
yarn create v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-next-app@13.1.1" with binaries:
- create-next-app
✔ What is your project named? … https-next-app
✔ Would you like to use ESLint with this project? … No / Yes
(...略...)
✨ Done in 40.48s.アプリを作成したら、動作確認しておきます。
% cd https-next-app
% yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 914 ms (166 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 850 ms (195 modules)`http://localhost:3000`にアクセスすると想定どおり以下のように表示されました。
HTTPSでアクセスしてみる
では、HTTPSでアクセスしてみます。
プロキシとしてlocal-ssl-proxyを利用してアクセスをしてみます。
先程作成したファイルをNext.jsアプリのディレクトリに配置してから、下記のコマンドを実行します。
% npx local-ssl-proxy \
--key localhost-key.pem \
--cert localhost.pem \
--source 3001 \
--target 3000
Need to install the following packages:
local-ssl-proxy@1.3.0
Ok to proceed? (y) y
npm WARN deprecated nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
Started proxy: https://localhost:3001 → http://localhost:3000`https://localhost:3001`にアクセスすると以下のように表示されました。
証明書についても問題ありません。
まとめ
以上、mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみました。
最初のセットアップが少々手間ですが、手順は簡単ですし、一度設定してしまえばあとは特に問題なくHTTPS接続できるので良いですね。
どなたかのお役に立てば幸いです。それでは！
40
