こんにちは!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接続できるので良いですね。
どなたかのお役に立てば幸いです。それでは!