mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみた

こんにちは！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 - macOS - SS64.com

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接続できるので良いですね。

どなたかのお役に立てば幸いです。それでは！

参考