小工具大用途！Vercel 的一個本地開發端口神器
整理版優先睇
Vercel portless：用名字代替端口，本地開發更爽
呢篇文章係作者分享佢喺本地開發 Vibe Coding 項目時遇到嘅端口管理煩惱。佢要同時跑前端、後端、文檔服務，終端一堆端口號，上午仲記得 3000 係前端、8080 係 API，下晏開咗新項目就亂曬。為咗更爽嘅 Vibe Coding 體驗，佢揾到 Vercel 嘅開源工具 portless，目前有 7.6k star，目的係解決呢個麻煩。
portless 嘅核心概念係「命名即路由」：將 http://localhost:3000 變成 https://myblog.localhost，自動分配端口同埋生成 CA 證書，唔使改任何應用程式碼。作者親自測試咗一個前後端分離場景，用 Go 後端同 Next.js 前端，兩個服務透過子域名區分，共用同一個代理進程，非常方便。另外，佢仲試咗 worktree 場景，雖然自動檢測冇觸發，但手動指定子域名一樣得。
整體嚟講，portless 最大嘅價值係減低認知負擔：用名字代替端口，自動支援 HTTPS，對於需要 Cookie Secure 屬性、Service Worker 呢類功能嘅本地測試好有用。佢仲支援局域網模式（--lan），可以畀手機或同事直接訪問，提升協作效率。作者認為呢個工具係本地開發神器，尤其適合 Vibe Coding 嘅多服務並行場景。
- 結論：portless 用「命名即路由」取代端口號，解決咗本地開發多服務端口撞同唔記得嘅問題。
- 方法：就喺原本嘅啟動命令前面加 portless <name>，例如 portless myblog next dev，佢就會自動分配端口並啟用 HTTPS。
- 差異：相比傳統靠記端口號（3000、8080），portless 用自定義名稱（myblog.localhost），認知負擔大幅降低，而且 HTTPS 即開即用。
- 啟發：命名即路由呢個設計思維，可以應用喺好多開發場景，令到服務之間嘅依賴更直觀，尤其係多 service 並行開發。
- 可行動點：安裝 portless 後，可以立即將常用服務改名啟動；善用 worktree 指定子域名做分支開發；用 --lan 模式做局域網調試。
portless 常用命令清單
portless list：查看當前註冊嘅所有路由 portless alias <name> <port>：註冊靜態端口（例如 portless alias mydb 5432） portless <name> --app-port <port> <cmd>：指定固定端口 portless proxy start --lan：啟用局域網模式 portless clean：清理所有狀態（CA 證書、hosts、進程）
內容片段
-- Proxy is running
-- myapi.localhost (auto-resolves to 127.0.0.1)
-- Using port 4165
-> https://myapi.localhost:8443
Running: PORT=4165 HOST=127.0.0.1 go run main.go
Starting server on port 4165...端口管理幾咁煩？Vercel 有計
隨着本地 Vibe Coding 項目越來越多，端口管理真係越來越麻煩。同時跑前端、後端、文檔服務，終端一堆端口號，端口號全亂，每次揾個服務跑喺邊個端口都要諗一輪。
作者之前寫過小工具，但仲係要處理端口衝突。為咗更爽嘅 Vibe Coding，佢揾到 Vercel 嘅 portless，一個本地開發代理工具，目前 7.6k star，專為解決呢個痛點而設。
portless 點樣 work？
portless 嘅核心概念係 命名即路由：將 http://localhost:3000 變成 https://<name>.localhost，唔需要記端口，自動加 HTTPS。原有啟動命令只需前面加 portless <name>，例如 portless myblog next dev，就搞掂。
佢嘅 自動分配端口 同 生成CA證書 功能，令到原本要用複雜配置嘅 HTTPS 開發環境變得一鍵搞掂，尤其係測試 Cookie Secure 同 Service Worker 呢類依賴 HTTPS 嘅功能。
實測：Go 後端 + Next.js 前端
作者用一個前後端分離場景測試。先寫一個簡單 Go HTTP 服務，關鍵係要讀 PORT 環境變量。啟動命令：portless myapi go run main.go，佢會自動分配端口 4165，並喺 8443 做代理，訪問 https://myapi.localhost:8443/api/health 正常回 JSON。
Next.js 前端需要喺 next.config.ts 加一行 allowedDevOrigins，允許 portless 域名跨域。然後用 portless myblog next dev，同樣代理到 8443。
- 1 兩個服務分別喺兩個終端運行：portless myapi go run main.go 同 portless myblog next dev。
- 2 佢哋 共用同一個代理進程，透過子域名 myapi.localhost 同 myblog.localhost 區分，唔衝突。
- 3 用 curl 測試已唔使記端口，直接 https://myapi.localhost:8443 就得。
Worktree 場景同進階玩法
portless 文檔話會自動檢測 git worktree，畀唔同分支分配唔同子域名。作者實測 自動檢測冇觸發，可能係顯式命名方式導致。佢覺得 手動指定名字更可靠，例如主分支用 portless myblog next dev，fix-nav 分支就用 portless fix-nav.myblog next dev，一樣可以同時運行。
其他進階功能包括：portless list 查看所有路由，portless alias 註冊靜態端口（例如 portless alias mydb 5432），--lan 模式 用 mDNS 廣播，令同一 WiFi 嘅手機可以直接訪問 myblog.local。
實用命令同總結
- portless list：查看當前註冊嘅所有路由
- portless alias mydb 5432：註冊靜態端口（Docker 容器或其他固定端口服務）
- portless myapi --app-port 8080 go run main.go：指定固定端口，唔畀自動分配
- portless proxy start --lan：啟用局域網模式，手機直接訪問
- portless clean：清理所有狀態（CA 證書、hosts 記錄、進程資訊）
隨著本地Vibe嘅項目越來越多，port管理越來越麻煩。
同時跑前端、後端、文檔服務，terminal裏一堆port號碼，上晝仲記得3000係前端、8080係API，下晝開咗新project就亂曬。
每次跑 curl 仲要揾返呢個服務究竟係邊個port度行緊。
之前寫過一個小工具，但係都係基於port本身，都要處理衝突問題。
為咗更爽嘅Vibe Coding，我最近又寫咗幾個好用嘅工具！
唔係咩大問題，只係好煩。
Vercel出嘅一個本地開發代理工具，目前7.6k star，解決嘅就係呢個問題。
命名即路由
portless將
http://localhost:3000
呢啲地址，變成
https://myblog.localhost
port號碼唔見咗，換咗你自己改嘅名，自動有HTTPS，唔使改任何應用code。
原來嘅啟動方式：
next dev
# 訪問 http://localhost:3000
用portless之後，只需要
portless myblog next dev
# 訪問 https://myblog.localhost
就呢一個改動就得了。
佢係點樣運作㗎？
portless喺本地行一個反向代理，監聽443 port。
啟動應用時，portless會自動喺4000至4999之間分配一個隨機port。
除咗自動分配，佢仲會生成一張CA證書，寫入系統嘅信任，之後就可以用HTTPS方式嚟存取。
我用佢測咗一個前後端分離嘅場景，記錄一下過程中踩嘅坑。
Go後端
先寫一個最簡單嘅Go HTTP服務，關鍵係要讀 PORT 環境變數：
啟動命令：
portless myapi go run main.go
輸出：
-- Proxy is running
-- myapi.localhost (auto-resolves to 127.0.0.1)
-- Using port 4165
-> https://myapi.localhost:8443
Running: PORT=4165 HOST=127.0.0.1 go run main.go
Starting server on port 4165...
portless將port 4165分配俾Go process，自己喺8443監聽，我用嘅係非特權port，避免sudo，兩個port之間做代理轉發。
訪問
https://myapi.localhost:8443/api/health，正常返回JSON。
當然，都可以直接分配使用443，省去port輸入。
Next.js前端
在 next.config.ts 裡面加一行，允許portless domain嘅跨域請求：
const nextConfig: NextConfig = {
allowedDevOrigins: ['myblog.localhost', '*.myblog.localhost'],
};
然後啟動：
portless myblog next dev
portless分配port俾Next.js，代理到 https://myblog.localhost:8443，Next.js嘅HTTPS開發環境就有咗。
同時行兩個服務
兩個terminal，各自行各自嘅：
# 終端 1
portless myapi go run main.go
# -> https://myapi.localhost:8443
# 終端 2
portless myblog next dev
# -> https://myblog.localhost:8443
兩個服務共用同一個代理process，通過子domain區分。
Worktree場景
portless文檔話會自動檢測git worktree，俾唔同branch分配唔同子domain。
例如主branch係 myblog.localhost，在 fix-nav branch嘅worktree裏面行，自動變成 fix-nav.myblog.localhost。
實際測試落嚟，自動檢測冇觸發，可能係我嘅測試方法問題，用嘅係 portless <name> <cmd> 呢種顯式命名方式。
覺得手動指定名反而更可靠，意圖更清晰：
# 主分支
portless myblog next dev
# -> https://myblog.localhost:8443
# fix-nav worktree，換個名字
portless fix-nav.myblog next dev
# -> https://fix-nav.myblog.localhost:8443
驗證三個服務同時在線：
實用命令備忘
# 查看當前註冊的所有路由
portless list
# 註冊一個靜態端口（Docker 容器或其他固定端口服務）
portless alias mydb 5432
# 指定固定端口，不讓 portless 自動分配
portless myapi --app-port 8080 go run main.go
# 局域網模式，讓同一 WiFi 下的手機也能訪問
portless proxy start --lan
portless myblog next dev
# 手機訪問 http://myblog.local
# 清理所有狀態（CA 證書、hosts 記錄、進程信息）
portless clean
portless對我嚟講最有價值係呢幾個：
本地同時行多個服務。
以前靠記port，而家靠記名，認知負擔低好多。
api.myproject.localhost比3001、3002、3003好記好多。
測試需要HTTPS嘅功能。
Cookie嘅 Secure 屬性、navigator.clipboard、Service Worker，呢啲喺 http://localhost 上行唔起或者行為不一致，portless俾咗一個乾淨嘅本地HTTPS環境。
多worktree並行開發。
唔同branch分配唔同子domain，唔搶port、唔衝突，可以同時對比兩個branch嘅效果。
區域網絡調試。--lan 模式用mDNS廣播，手機或同事嘅電腦唔需要配置任何嘢，直接存取 myblog.local。
太好用喇！喺Claude Code Desktop中使用第三方API嘅最新保姆級教程
隨着本地Vibe的項目越來越多，端口管理越來越麻煩。
同時跑前端、後端、文檔服務，終端裏一堆端口號，上午還記得 3000 是前端、8080 是 API，下午開了新項目就全亂了。
每次跑 curl 還得先翻一下這個服務到底跑在哪個端口來着。
之前寫過一個小工具，但是還是基於端口本身的，也要處理衝突問題。
為了更爽的Vibe Coding ，我最近又寫了幾個好用的工具！
不是什麼大問題，就是很煩。
Vercel 出的一個本地開發代理工具，目前 7.6k star，解決的就是這個問題。
命名即路由
portless 把
http://localhost:3000
這樣的地址，變成
https://myblog.localhost
端口號不見了，換成了你自己起的名字，自動帶 HTTPS，不需要改任何應用代碼。
原來的啓動方式：
next dev
# 訪問 http://localhost:3000
用 portless 之後，只需要
portless myblog next dev
# 訪問 https://myblog.localhost
就這一個改動就行了。
它是怎麼工作的？
portless 在本地跑一個反向代理，監聽 443 端口。
啓動應用時，portless 會自動在 4000-4999 之間分配一個隨機端口。
除了自動分配，它還會生成一張CA證書，寫入到系統的信任，之後就可以使用HTTPS的方式來訪問了。
我用它測了一個前後端分離的場景，記錄一下過程中踩的坑。
Go 後端
先寫一個最簡單的 Go HTTP 服務，關鍵是要讀 PORT 環境變量：
啓動命令：
portless myapi go run main.go
輸出：
-- Proxy is running
-- myapi.localhost (auto-resolves to 127.0.0.1)
-- Using port 4165
-> https://myapi.localhost:8443
Running: PORT=4165 HOST=127.0.0.1 go run main.go
Starting server on port 4165...
portless 把端口 4165 分配給了 Go 進程，自己在 8443 監聽，我用的是非特權端口，避免 sudo，兩個端口之間做代理轉發。
訪問
https://myapi.localhost:8443/api/health，正常返回 JSON。
當然，也可以直接分配使用443，省去端口輸入。
Next.js 前端
在 next.config.ts 里加一行，允許 portless 域名的跨域請求：
const nextConfig: NextConfig = {
allowedDevOrigins: ['myblog.localhost', '*.myblog.localhost'],
};
然後啓動：
portless myblog next dev
portless 分配端口給 Next.js，代理到 https://myblog.localhost:8443，Next.js 的 HTTPS 開發環境就有了。
同時跑兩個服務
兩個終端，各跑各的：
# 終端 1
portless myapi go run main.go
# -> https://myapi.localhost:8443
# 終端 2
portless myblog next dev
# -> https://myblog.localhost:8443
兩個服務共用同一個代理進程，通過子域名區分。
Worktree 場景
portless 文檔裏說會自動檢測 git worktree，給不同分支分配不同子域名。
比如主分支是 myblog.localhost，在 fix-nav 分支的 worktree 裏運行，自動變成 fix-nav.myblog.localhost。
實際測下來，自動檢測沒觸發,可能是我的測試方式問題，用的是 portless <name> <cmd> 這種顯式命名方式。
感覺手動指定名字反而更可靠，意圖更清晰：
# 主分支
portless myblog next dev
# -> https://myblog.localhost:8443
# fix-nav worktree，換個名字
portless fix-nav.myblog next dev
# -> https://fix-nav.myblog.localhost:8443
驗證三個服務同時在線：
實用命令備忘
# 查看當前註冊的所有路由
portless list
# 註冊一個靜態端口（Docker 容器或其他固定端口服務）
portless alias mydb 5432
# 指定固定端口，不讓 portless 自動分配
portless myapi --app-port 8080 go run main.go
# 局域網模式，讓同一 WiFi 下的手機也能訪問
portless proxy start --lan
portless myblog next dev
# 手機訪問 http://myblog.local
# 清理所有狀態（CA 證書、hosts 記錄、進程信息）
portless clean
portless 對我來說最有價值的是這幾個：
本地同時跑多個服務。
以前靠記端口，現在靠記名字，認知負擔低很多。
api.myproject.localhost比 3001、3002、3003 好記多了。
測試需要 HTTPS 的功能。
Cookie 的 Secure 屬性、navigator.clipboard、Service Worker，這些在 http://localhost 上跑不起來或者行為不一致，portless 給了一個乾淨的本地 HTTPS 環境。
多 worktree 並行開發。
不同分支分配不同子域名，不搶端口、不衝突，可以同時對比兩個分支的效果。
局域網調試。--lan 模式用 mDNS 廣播，手機或同事的電腦不需要配任何東西，直接訪問 myblog.local。
太好用了！在Claude Code Desktop 中使用第三方API的最新保姆級教程