Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
美图设计室
AI智能一键生成海报,免费平面设计
即梦AI
一站式智能创作平台,即刻造梦
AiPPT
全智能AI一键生成 PPT
豆包AI
字节跳动旗下 AI 智能助手
必火AI
数字人一站式创作平台
SpeedAI
一键去重、降AIGC率、数据可视化、论文写作
茅茅虫
茅茅虫AI论文写作助手,AIGC论文查重
仙宫云
GPU算力租赁,云算力在线租赁平台
3387游戏盒子
提供热门折扣手游,助你轻松畅玩各种类型的游戏
宝塔服务器面板
简单好用的服务器运维面板

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

Portless

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://port1355.dev
GitHub:https://github.com/vercel-labs/portless
网站描述:用 .localhost 域名替代端口号的开发工具
访问官网
GitHub
Portless 是一个本地开发工具,旨在解决开发过程中端口号记忆和管理的痛点。它允许开发者使用类似 myapp.localhost 的域名来访问本地服务,而不是传统的 localhost:3000 这样的端口号地址。

前两天开三个本地项目,端口又撞了。

改完3000改3001,3001被占又换3002。等到下午想切回去调试第一个项目,脑子里已经一片空白——刚才那个项目跑在哪个端口来着?

这种事发生太多次后,我干脆把常用端口写在便签上贴显示器边框。但便签越贴越多,显示器快变成便签墙了。

然后我刷到了Vercel Labs出的portless。


核心特性

  • 稳定的 .localhost 域名 - 用易记的域名替代难记的端口号
  • 支持人类和 AI Agent - 既方便开发者使用,也便于 AI Agent 理解和操作
  • 自动端口映射 - 自动将自定义域名映射到对应的服务端口
  • 零配置 - 简单易用,无需复杂的配置


技术栈

  • TypeScript - 主要开发语言
  • Vercel - 部署和托管平台
  • 本地 DNS 解析 - 实现 .localhost 域名映射


它解决什么问题

本地开发最烦的就是端口管理。一个前端项目、一个后端api、一个数据库管理界面、一个Redis可视化工具——四个服务,四个端口号。过两天再加个WebSocket服务、一个mock server,端口数量继续膨胀。

问题来了:

  • 端口号记不住,每次都要翻终端历史或者看package.json

  • 端口冲突频发,新开项目发现端口被占

  • 跟同事说"你本地访问一下我的接口",对方问"什么端口?",然后开始一轮沟通

  • AI助手帮你调试本地服务,你还得告诉它"跑在3001端口",它记不住,你再说一遍

Portless的思路很简单:用名字代替数字。


怎么用

安装就一行命令:

npm install -g @vercel-labs/portless

然后启动代理服务:

portless start

代理会跑在1355端口。之后你启动任何本地服务,不需要指定端口了,直接让portless分配。

比如你有个Next.js项目:

cd my-next-app
portless run next dev

它会自动分配一个类似my-next-app.localhost:1355的地址。项目名就是子域名,不用记端口号。

你甚至可以自定义名字:

portless run --name frontend npm run dev

这样地址就是frontend.localhost:1355。


原理是什么

其实挺朴素的。

Portless在本地跑了一个代理服务器,监听1355端口。所有*.localhost:1355的请求都会打到这个代理上。

代理收到请求后,看一眼子域名是什么,然后查表找到对应的本地服务端口,把请求转发过去。

举个例子:

  • 你运行了portless run --name api node server.js

  • Portless启动这个服务,假设分配到内部端口54321

  • 你访问api.localhost:1355

  • 代理看到子域名是api,查表发现对应54321,转发请求

就这么简单。没有黑魔法,就是一张路由表加一个反向代理。


对AI助手特别友好

这点我感触挺深的。

用Claude Code或者其他AI编程助手的时候,经常需要让AI访问本地服务调试。以前每次都要告诉它端口号,它记不住,对话长了还得重复。

现在直接给它一个有意义的地址:frontend.localhost:1355、api.localhost:1355、admin.localhost:1355。名字本身就说明了用途,AI不用记数字,理解成本几乎为零。

而且这些地址是稳定的。你重启电脑、重启服务,地址不变。不像有些动态端口方案,每次启动端口都变,还得重新同步。


几个实际场景

场景一:微服务开发

我在做一个项目,前端、后端、网关、认证服务四个东西同时跑。以前四个终端窗口,每个都要确认端口。现在直接:

portless run --name web npm run dev
portless run --name api go run main.go
portless run --name gateway npm run gateway
portless run --name auth npm run auth

四个地址,一目了然。

场景二:团队协作

同事想看我本地跑的效果,以前要告诉他"访问我IP的3002端口"。现在直接说"访问web.localhost:1355",前提是他自己机器上也跑了portless,配置同步就行。

场景三:演示和文档

写README的时候,以前要写"启动后访问http://localhost:3000"。如果端口冲突,读者还得自己改。现在写"访问app.localhost:1355",不管内部端口怎么变,对外地址始终一致。


有什么缺点

目前还在早期阶段,几个小问题:

一是只支持macOS和Linux,Windows用户暂时用不了。作者说在做了,但没给时间表。

二是需要系统支持泛域名解析。*.localhost解析到127.0.0.1,大多数系统默认支持,但个别环境可能要手动配置。

三是多了一个依赖。虽然portless本身很轻量,但多一个全局服务就多一个出问题的点。不过用了一周多,还没遇到过它本身的问题。


跟其他方案比呢

有人可能会说,我直接在/etc/hosts里加几行不也行?

确实可以,但hosts文件不支持泛域名。你要为每个项目加一行,项目多了管理起来很烦。而且端口问题还是没解决,只是把localhost:3000变成了myproject.local:3000。

也有人用traefik或者nginx做本地反向代理。功能上没问题,但配置成本高不少。Portless的优势在于零配置,开箱即用。

Docker用户可能会想到用Docker内置的网络别名。但不是所有项目都适合容器化,尤其是前端开发,本地Node环境还是主流。


值得一试吗

如果你经常被端口问题烦,值得试试。

安装两分钟就能用上,不用改现有项目代码,不影响已有工作流。跑起来之后,端口冲突、记不住号这些事基本就没了。

我现在已经习惯直接portless run,再也不操心3000端口够不够用了。显示器边上的便签墙,也终于可以撕掉了。

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/4955

更多»
热门资源
fly63工具箱
简单、易用、便捷的在线工具
官网
GitHub
remove.bg
消除图片背景:100% 自动 – 只需 5 秒
官网
阿里云DataV
地图数据
官网
retoucher
在线AI智能抠图去背景工具
官网
飞书多维表格
飞书旗下的一款在线协作与业务管理工具
官网
Apifox
API 文档、API 调试、API Mock、API 自动化测试一体化协作平台
官网
易文档
需求文档、API文档、部署文档到使用手册
官网
mdx-deck
基于MDX的演示文稿
官网
GitHub
YouCompress
在线免费文件压缩工具
官网
iHateRegex
快速搜索并匹配到合适的正则表达式
官网
GitHub
Trilium Notes
层级结构的笔记程序,专注构建个人的大型知识库
点击进入
GitHub
CodeZen
在线源代码转图片工具
官网
类似于Portless的资源
妙言
更适合工程师用的笔记应用
官网
GitHub
Annotate screen
在线网页截图工具
官网
云配色
一键查询网页前端CSS、JS技术架构和配色方案
官网
client
一个开源的在线客服聊天系统
官网
GitHub
CodeFun
UI 设计稿智能生成前端源代码
官网
weeek
带看板和番茄时钟的在线项目管理工具
官网
Trilium Notes
层级结构的笔记程序,专注构建个人的大型知识库
点击进入
GitHub
code-server
一个在线版的VS Code,可以通过浏览器访问
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网 All Rights Reserved. 提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。