00:00:00これはPortless。Agent Browser、JSON Render、Skillsを
00:00:05世に送り出したVersil Labsによる、localhostのポート番号を
00:00:10固定の名前付きホストに置き換えるCLIツールです。人間やAIエージェントが
00:00:15常に正しい場所にアクセスでき、競合を防ぎます。仕組みはどうなっているのか、
00:00:20システムに影響はないのか？ 登録ボタンを押して、詳しく見ていきましょう。
00:00:21簡単な例を使って、Portlessの使い方を説明します。
00:00:26今、ポート3001番でプロジェクトが動いています。
00:00:30もしこれをバックグラウンドで動かしていることを完全に忘れて、
00:00:33似たようなポートを使う別のプロジェクトを動かそうとすると、
00:00:37「address is already in use（アドレスは既に使用中です）」というエラーが出ます。
00:00:40Portlessはこの問題を解決するために設計されました。
00:00:44別々のタブで、プロジェクトごとに異なるエージェントを動かしていて、
00:00:48この問題にぶつかったと想像してみてください。
00:00:50エージェントが修正することも可能ですが、最初からポートが常に
00:00:55空いている状態にして、こうした事態を防ぐのが理想的です。
00:00:58Portlessをインストールして、Portlessプロキシを起動した状態で、
00:01:01「portless」に続けて、任意のホスト名（ここではxdlapi）を入力します。
00:01:06ホスト名は何でも構いません。
00:01:08次に実行したいコマンド（例：bun run devapi）を入力します。
00:01:12Enterを押すと、4000番台からランダムに空きポートを探し出します。
00:01:16この範囲なら、他のプログラムと競合する可能性が低いからです。
00:01:20そして、設定したホスト名の「.localhost:1355」でアプリを公開します。
00:01:25デフォルトの1355は、Portlessの「less」にちなんでいます。お分かりですね？
00:01:30ここをクリックすると、アプリが正常に動作しているのが分かります。
00:01:34別のアプリでも全く同じことをしてみると、
00:01:37今度は別の空きポートが見つかり、指定したホスト名が使われます。
00:01:40ですが、末尾の番号は常に同じままです。
00:01:42実は、必要であればこの番号を変えることもできます。
00:01:44ポート80に変更すれば、コロンと番号を完全に省略できます。
00:01:49sudoを使いポート80でPortlessプロキシを起動し、
00:01:53同様にsudoでPortlessプロセスを開始すれば、
00:01:55「サブドメイン.localhost」だけでアクセス可能になります。
00:01:59さらに、ポート80の使用に加えて、HTTPSフラグを使えば
00:02:03HTTPSサポートも受けることができます。
00:02:08ただしViteを使っている場合は、portキーにポート変数を設定し、
00:02:13hostsもこの値に設定する必要があります。
00:02:15その理由は、動画の後半で説明します。
00:02:17Portlessには他にも多くのオプションがあります。
00:02:21デバッグ用にプロキシをフォアグラウンドで実行したり、
00:02:25デバッグや緊急回避策として、プロキシなしでコマンドを実行したりできます。
00:02:30でも、なぜ毎回ランダムなポート番号を使うのでしょうか？
00:02:33そして、なぜプロキシが必要なのでしょうか？
00:02:35その仕組みを掘り下げていきましょう。
00:02:362つのプロセスについて説明します。
00:02:39ターミナルでメインのPortlessコマンドを実行した時の動きと、
00:02:42ブラウザでPortlessのURLを開いた時の動きです。
00:02:46まず、Portlessコマンドを実行した時（ここでは
00:02:49myappというホスト名で bun start を実行する場合）ですが、
00:02:52最初にホスト名とコマンドが抽出されます。
00:02:56次にプロキシが動いているかを確認し、
00:02:59動いていなければ起動します。
00:03:01ただし注意点があります。プロキシのポートは自由に変えられますが、
00:03:06デフォルトは1355です。
00:03:08もし1024より小さい値を設定した場合、
00:03:12実行前に確認を求められます。
00:03:15それ以上の番号であれば、自動的に実行されます。
00:03:19次に、4000から4999の間で空きポートを見つけます。
00:03:25検索を速めるために、ポートはランダムに選ばれます。
00:03:29連番だと、多くのプロセスが動いている場合に1つずつ
00:03:33チェックする必要があり、時間がかかる可能性があるからです。
00:03:35ポートが見つかると、その詳細がroot storeのJSONファイルに記録されます。
00:03:40そして、そのポートでコマンドを実行し、ポート番号を環境変数に追加します。
00:03:47これはほとんどのJavaScriptアプリケーションからアクセス可能です。
00:03:50さて、こちらの部分に注目してください。
00:03:52ブラウザでPortlessのURL（ここではmyapp）にアクセスすると、
00:03:56デフォルトポートの場合は1355番になります。
00:04:00DNS解決が行われ、プロキシへのTCP接続が作成されます。
00:04:06プロキシはホスト名（myapp）を抽出し、
00:04:09root JSONファイルを参照してアプリのポートを特定します。
00:04:15正しいポート番号が分かると、リクエストを実際のアプリに転送します。
00:04:21アプリからのレスポンスはプロキシを経由してブラウザに戻ります。
00:04:26ブラウザは1355番からのレスポンスを待っており、
00:04:30プロキシがランダムに割り当てた番号からの直接の返答は想定していないからです。
00:04:35これはWebSocketでも魔法のように機能します。
00:04:38週末のプロジェクトにしては、非常に素晴らしい出来栄えです。
00:04:40ただし、ViteのようなNext.js以外のプロジェクトで使うと問題が起きるかもしれません。
00:04:47まず、固定ではなくポート変数に割り当てられたランダムな番号を使うため、
00:04:52アプリがそのポートで動作することを確認する必要があります。
00:04:56そうでないとプロキシがどこへ転送すべきか分かりません。
00:05:00また、Viteなどのバンドラーでは、hostキーを追加してこの値を設定する必要があります。
00:05:06認識されないオリジンからのリクエストを拒否する設定を無効にするためです。
00:05:10allowed hostキーを色々試してみましたが、うまくいきませんでした。
00:05:16この方法は少し強引に見えるかもしれませんが、
00:05:19ローカルで実行している分には、何も心配することはありません。
00:05:22Vercel Labsの他のプロジェクトと同様、Portlessも更新され続けるので、
00:05:26こうした点は将来的に改善されていくでしょう。
00:05:30Windowsのサポートなども同様です。
00:05:32Vercel Labsといえば、Agent Browserをまだ試していないなら、
00:05:36エージェントがブラウザとやり取りする最高の方法です。
00:05:39次の動画で詳しく紹介しています。