零成本上线个人项目 ——ngrok 仅穿透前端实现公网访问

开发个人项目时，想让他人访问往往需要购买服务器、配置域名解析，成本高且流程繁琐。

本文介绍一种零成本方案 —— 仅穿透前端即可实现内网个人项目的公网访问。

ngrok 账号注册与工具准备

首先在https://ngrok.com/ 官网注册一个账号，就能获得一个免费的dev结尾的域名。

注册好之后，下载对应的zip压缩包

在官网个人后台 / 仪表盘（Dashboard）可直接复制个人专属的 Authtoken。

分框架适配配置

如果前端是用 Vite + React 的项目，需要在 vite.config.js 文件加上allowedHosts这一行代码：

// vite.config.jsexportdefaultdefineConfig({server:{allowedHosts:['xxx.dev']// ngrok 域名}})

如果前端是基于 Umi Max + Ant Design Pro 的项目，前端默认是跑在 localhost:8000（umi dev），则需要修改2个文件。

1.config/config.ts

在文件里加上如下 proxy 部分：

// config/config.tsexportdefaultdefineConfig({// ... 其他配置 ... proxy:{'/api/':{ target:'http://localhost:[项目后端的端口号]', changeOrigin:true,// 根据后端实际路由决定是否 rewrite// 如果后端接口路径就是 /api/xxx 开头 → 不要 rewrite// 如果后端是 /user/xxx（无 /api 前缀） → 加下面这行// pathRewrite: { '^/api': '' },},},// ... 其他配置 ...});

这段只在 umi dev / npm run dev 时生效。

2.src/app.tsx

找到 request 配置，把 baseURL 相关全部注释或删除：

// src/app.tsxexportconst request: RequestConfig ={// ！！！ 下面这整段注释掉或删除 ！！！// baseURL: "http://localhost:[项目后端的端口号]",// 保持这两个（ngrok 警告页绕过 + cookie 跨域） withCredentials:true, headers:{'ngrok-skip-browser-warning':'true',},...errorConfig,};

项目启动与公网访问

接下来，依次启动后端和前端，将之前下载好的压缩包解压后直接双击 exe 即可打开命令行，执行以下命令：

ngrok config add-authtoken [YourAuthtoken] ngrok http [项目前端的端口号]

复制 ngrok 生成的 https 地址，其他人就能够访问你的项目了。