目標

node.jsでプロキシサーバーを起動させ、Next.jsのローカルの開発環境でHTTPS通信を可能にする。

動作環境

• windows 10
• nextjs
• node.js 16.14.0
• npm 8.3.1

プロキシサーバーを作る

プロキシと言えばnginxが思いつくが、正直windowsでnginxをインストールしてとか大変な作業をしたくない。そのためnode.jsでサーバーを作ります。なにもインストールせず使えるので楽でした。 Nextjsとは関係なく、node.jsでプロキシサーバーを作成し、プロキシサーバーと、Next.jsを起動することでSSL環境を実現しました。

node.jsでプロキシサーバーを作る

証明書を用意せずにSSL環境ができればと思ったが見当たらなかったので自己証明書を用意する必要があります。node.jsの環境も既にあるので、特に難しい部分は無く簡単に構築ができました。

作業の流れ

1. 1.自己証明書を作る
2. 2.プロキシモジュールをインストールする。
3. 3.ポートを指定して起動する

自己証明書は既にあるという前提で進めていきます。自己証明書の作り方はこちら

パッケージのインストール

適当なところにフォルダーを作成し初期化を行いnodeが使用できる環境を作ります。

1. 1.初期化を実行し、プロキシのパッケージをインストールします。

npm init -y
npm install http-proxy

必要なパッケージは以下３つになります。

const fs = require('fs')
const https = require('https')
const httpProxy = require('http-proxy');

2. 2.proxy.jsというファイルを作成します。

const fs = require('fs')
const https = require('https')
const httpProxy = require('http-proxy');

httpProxy.createProxyServer({
  target: {
    host: '0.0.0.0',
    port: 3000,
  },
  ssl:{
    key:  fs.readFileSync('./server.key'),
  cert: fs.readFileSync('./server.crt')
  }
}).listen(443);

これだけSSL環境ができてしまいます。変更する部分はkeyとcrtのファイル。そしてportの部分です。
最後にこのproxy.jsを実行すれば、nextjsのSSL環境が実現できます。

node proxy.js

npx next dev

まとめ

nextjsのローカル開発環境でHTTPSの通信ができました。プロキシ経由なので何か問題があるかもと思っていましたが、今のところ特に問題なく起動しています。
node.jsでこんなに簡単にできるのであればもっと早く知りたかった。