Portless:Vercel 出品,把 localhost:3000 变成 https://myapp.localhost

Vercel
开发者工具
本地开发
HTTPS
前端
开源
2026/9/29
·

阅读时间: 大约 8 分钟

Portless:Vercel 出品,把 localhost:3000 变成 https://myapp.localhost

Portless 的核心 diff:把 "dev": "next dev" 换成 "dev": "portless run next dev",URL 从 localhost:3000 变成 myapp.localhost

本地开发时,多服务并存很快就会变成端口乱炖:web 在 3000、api 在 3001、admin 在 3002,OAuth 回调白名单要记一堆 http://localhost:3000,HTTPS 本地调试还得自己折腾自签证书。Portless 是 Vercel Labs 出的 CLI,思路是干脆把端口号去掉——http://localhost:3000 换成 https://myapp.localhost,命名 URL 由它代理到你随机分配的实际端口。本文基于其 GitHub README 做分析。

一、它解决什么问题

端口号是本地开发的历史包袱:

  • 多服务要靠记端口区分;
  • OAuth/支付回调要求 https,本地自签证书浏览器一直警告;
  • Git worktree 切分支后,同一个项目两个 checkout 抢同一个 3000 端口;
  • 框架不认 PORT 环境变量时(如 Vite),你得手动记 --port。

Portless 的做法:portless run next dev,代理自动起来,给应用分配一个 4000–4999 的随机端口,对外暴露 https://<app>.localhost。

二、HTTPS 是怎么自动搞定的

这是 Portless 最省事的一点,README 写得很清楚:

  • HTTPS with HTTP/2 默认开启;
  • 首次运行自动生成一个本地 CA、把它加进系统信任链;
  • 绑定 443 端口(macOS/Linux 上自动用 sudo 提权);
  • 不想要 TLS 用 --no-tls。

也就是说,你不用再装 mkcert、不用点浏览器警告,https://myapp.localhost 直接是受信任的。这对需要 https 回调的 OAuth(仓库里就有 examples/google-oauth)是真实痛点解决。

三、框架参数自动注入:细节里的功夫

Portless 对框架启动命令的注入规则:只识别 dev/serve/preview/start,对 build/test/复合命令一律不碰

随机端口是通过 PORT 环境变量传的,但很多框架(Vite、Astro、React Router、Angular、Expo、React Native)不读 PORT。Portless 为此做了一套「自动注入 --port/--host flag」的规则,而且边界划得很谨慎:

  • 只给服务型命令注入:dev、serve、preview、start、裸 vite 等;
  • 明确不碰非服务命令:vite build、vite optimize、vp test、astro check;
  • 不识别的脚本一律放过:复合命令(&&、|、;)、环境变量前缀(NODE_ENV=production vite)、委托给别的脚本("dev": "npm run dev:vite")、runner flag 在前面(bun run --bun dev)——这些 Portless 不猜,让你自己在脚本里设端口。

这种「宁可少做、不乱注入」的克制,比「我觉得我帮你改好了」的工具可靠得多。README 还提到:代理自动复用上一次的配置(端口、TLS、TLD),重启不会静默回到默认值;非交互环境(无 TTY 或 CI=1)直接报错退出而不是卡住等输入,让 Turborepo/CI 尽早失败。

四、官方自己标注的口径偏差

  1. pre-1.0。README 开头就警告:「portless is pre-1.0」,按项目装(npm i -D)时不同人可能跑到不同版本;state 目录格式可能在版本间变化,需要重跑 portless trust。这意味着升级有摩擦,别当稳定基础设施依赖。

  2. 它解决的是本地 URL,不是内网穿透。.localhost 只在你自己机器上解析,Koala 标题里「本地服务对外暴露」其实有误导——Portless 不把服务暴露到公网(那是 ngrok/localhost.run 的活),它只是把本地端口换成本地命名 URL。需要对外分享临时 URL 的,还是得另配隧道。

  3. bind 443 需要提权。macOS/Linux 自动 sudo,Windows 行为不同(仓库里有 scripts/windows-debug,说明 Windows 适配还在调试)。

  4. 下载量与成熟度:README 徽章显示月下载约 540 万次,issues 78、PR 70——采用不低,但 issue/PR 数也说明它仍在快速变动。

五、适用与不适用场景

适合: 本地同时跑多个服务、受够记端口的前端/全栈开发者;需要本地 https(OAuth 回调、PWA、支付沙箱)的人;用 Git worktree 多分支并行开发、需要按分支隔离域名的团队;Monorepo(官方支持从 pnpm-workspace.yaml 发现各包)。

不适合: 想把本地服务暴露给外网/同事访问的(它不做隧道);对提权 bind 443 敏感、不愿装本地 CA 的环境;生产环境(这是纯本地开发工具);需要 1.0 稳定 state 格式的人。

六、客观分析:优势与意义

优势: 一行 portless run 解决端口命名 + 本地受信 HTTPS + 框架端口注入三件事;对哪些脚本该改、哪些不该改的边界划得很清楚,少误伤;Monorepo 与 worktree 支持踩中现代前端痛点;Vercel 的 DX 经验体现在默认配置里。

局限: pre-1.0、state 格式会变;只做本地命名 URL,不做公网暴露;bind 443 要提权;Windows 适配仍在打磨。

Portless 代表的趋势是:本地开发正在向「接近生产环境的 URL 形态」收敛——既然线上是 https://app.example.com,本地也不该是 http://localhost:3000。Vercel 把这种体验做成一个零配置 CLI,本质是把他们在部署平台上积累的 URL/证书/路由经验,下沉到了开发者的本机。对每天和 OAuth、多服务、worktree 打交道的前端,这是一个值得一试的小工具——但记得它是 pre-1.0。

参考来源