[小ネタ]local-ssl-proxyを利用したNext.js開発環境のHTTPSアクセスを簡単にしてみた

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

先日、ローカルのNext.js開発環境にHTTPSアクセスができるようにしてみたのですが、その際には以下のようにnpx local-ssl-proxyコマンドを追加で叩いてHTTPSアクセスをするようにしていました。

% npx local-ssl-proxy \
  --key localhost-key.pem \
  --cert localhost.pem \
  --source 3001 \
  --target 3000

一方で、この方法は普段のローカル開発サーバの起動の仕方、つまりyarn devとちょっと違うので少しやり方を変えてみました。

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

まずはlocal-ssl-proxyをDevelopment Devendencyで追加インストールしてしまいます。

% yarn add -D local-ssl-proxy
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
warning local-ssl-proxy > nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 12 new dependencies.
info Direct dependencies
└─ local-ssl-proxy@1.3.0
info All dependencies
├─ ansi-styles@2.2.1
├─ chalk@1.1.3
├─ eventemitter3@4.0.7
├─ follow-redirects@1.15.2
├─ has-ansi@2.0.0
├─ has-color@0.1.7
├─ http-proxy@1.18.1
├─ local-ssl-proxy@1.3.0
├─ nomnom@1.8.1
├─ requires-port@1.0.0
├─ supports-color@2.0.0
└─ underscore@1.6.0
✨  Done in 1.49s.

package.json を編集する

インストールしたら、今度はpackage.jsonに1行追加して、以下のようにしてみます。（一部抜粋）

package.json

  "scripts": {
    "dev": "next dev",
    "dev:proxy": "next dev -p 3001 & local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3000 --target 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

ここでは、まず開発サーバのポートを3001で立ち上げています。つまり`http://localhost:3001`でアクセス可能なようにしました。

次に、local-ssl-proxyを利用して、`https://localhost:3000`へのアクセスを`http://localhost:3001`にリダイレクトするようにしました。

起動してみる

この状態で、追加したスクリプトを利用して起動してみます。

% yarn dev:proxy
yarn dev:proxy
yarn run v1.22.19
$ next dev -p 3001 & local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3000 --target 3001
Started proxy: https://localhost:3000 → http://localhost:3001
ready - started server on 0.0.0.0:3001, url: http://localhost:3001
event - compiled client and server successfully in 244 ms (166 modules)

すると、このように`https://localhost:3000`にアクセスすることで開発サーバにHTTPSでアクセスできるようになりました。

ポート番号については、任意のもので良いのですが、元々の3000のほうが個人的に違和感が無かったので、あえて変更してみました。

まとめ

以上、local-ssl-proxyを利用したNext.js開発環境のHTTPSアクセスを簡単にしてみました。

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

参考