はじめに
この記事では、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...
github.com
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: 13 days ago. Start using loc...
www.npmjs.com
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/ にアクセスします。
