こんにちは!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アクセスを簡単にしてみました。
どなたかのお役に立てば幸いです。それでは!