Next.jsのlocalhostにSSL(HTTPS)でアクセスする

Next.js
スポンサーリンク

はじめに

この記事では、Next.jsのローカルサーバを起動したときのlocalhostに、SSL(HTTPS)でアクセスするための方法を記載します。

mkcertを使用して証明証を発行する

ローカル用の証明書の発行には、mkcertを使用します。

GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.
A simple zero-config tool to make locally trusted development certificates with any names you'd like. - GitHub - FiloSottile/mkcert: A simple zero-config to...

mkcertのインストール


$ brew install mkcert
$ mkcert -install

続いてlocalhost用の証明書を発行します。
package.json配置しているディレクトリで、つぎのコマンドを実行します。


$ mkcert localhost

このコマンドを実行すると、localhost-key.pemとlocalhost.pemが生成されます。

local-ssl-proxyを設定する

Next.jsで起動したlocalhostには、local-ssl-proxyを使ったプロキシ経由でアクセスします。

local-ssl-proxy
Simple SSL HTTP proxy using a self-signed certificate. Intended for local development only.. Latest version: 2.0.5, last published: 2 months ago. Start using lo...

local-ssl-proxyをインストール


$ yarn add -D local-ssl-proxy

local-ssl-proxyをインストールしたら、package.jsonをつぎのように編集します。


// package.json
"scripts": {
    "dev": "next dev",
    "dev:proxy": "next dev & local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000",
...
  },

設定ができたので、 yarn dev:proxy を実行してローカルサーバを起動し、 https://localhost:3001/ にアクセスします。