Vercel Labsのportlessがおもしろい！

Xのタイムラインでたまたま発見しました。

portless

やってみます。

portlessとは

要するにリバースプロキシです。

ポート番号を気にせず、.localhostのURLで開発サーバーにアクセスできるツールです。
複数のアプリを同時に起動しても、ドメイン名で区別するのでポート番号が被りません。

セットアップ

Next.jsプロジェクトを新規作成します。

npx create-next-app@latest new-app1
cd new-app1

portlessをインストールします。
個人的な趣味で、グローバルインストールがなんとなく嫌なので--save-devです。

ちなみにWindowsは今のところ未対応です😭

npm add --save-dev portless

基本的な使い方

package.jsonのscriptsにあるdevをちょこっと修正します。

package.json

-    "dev": "next dev",
+    "dev": "portless new-app1 next dev",

next devの前に、portlessと任意の名前を追加します。

設定はこれだけです。npm run devを実行すると、Webサーバーが起動します。

> new-app1@0.1.0 dev
> portless new-app1 next dev


portless

-- new-app1.localhost (auto-resolves to 127.0.0.1)
Starting proxy...
HTTP proxy started on port 1355
Proxy started in background
-- Using port 4611

  -> http://new-app1.localhost:1355

Running: PORT=4611 HOST=127.0.0.1 next dev

▲ Next.js 16.1.6 (Turbopack)
- Local:         http://localhost:4611
- Network:       http://172.17.0.2:4611

✓ Starting...
✓ Ready in 597ms

portlessのリバースプロキシが、

• ホスト名： new-app1.localhost
• ポート番号： 1355

で起動します。

そして、実際のNext.jsサーバーが

• ホスト名： localhost
• ポート番号： 4611

で起動します。

複数アプリの同時起動

これだけだと、ポート番号が変わって、ドメイン名がちょっと変わるだけなので、あまり旨味はないですが、、、
おもむろにもう一つNode.jsアプリを作って起動します。

npx create-next-app@latest new-app2
cd new-app2
npm add --save-dev portless

package.jsonも同じように修正しますが、portlessに続く値は「new-app2」にします。

package.json

-    "dev": "next dev",
+    "dev": "portless new-app2 next dev",

そしてnew-app2もnpm run devで起動すると、、、

ドメイン違いの同一ポートで起動します。

そうです、ドメインでアプリを区別するので、ポートは共通＝ポートは気にしない＝ポートレス　ですね。
（サーバーレスと一緒で、あるけど気にしない　ですね。素敵な名前）

これにより、同じPCのなかで、同じポート（ホスト名違い）で２つのアプリが起動できます！

サブドメインの活用

ちなみに、サブドメインも追加できるようです。

portless web.new-app2 next dev

portless api.new-app2 next dev

動作検証が捗るケースもありそうです。

HTTPS対応

更に、自己証明書を使ったHTTPS通信にも対応可能です。

起動中のportlessを一度停止します。

npx portless proxy stop

そして、起動時に環境変数としてPORTLESS_HTTPS=1を追加します。

- "dev": "portless new-app1 next dev",
+ "dev": "PORTLESS_HTTPS=1 portless new-app1 next dev",

こうすると、自動的に事故証明を発行したうえで、HTTPSで待ち受けてくれます。

自己証明書なので警告は出ますが、portless trustを実行するとOSに登録してくれて、警告が出なくなるらしいです（未検証）

まとめ

Xのポストに「Weekend project」とあったので、おそらく自分で欲しかったツールをバイブコーディングで作って公開したのかな？と想像してます。

そのムーブ、いいですよね。

僕もやろう