零成本上线：用 ngrok 将前端项目暴露到公网

开发个人项目时，想让他人访问往往需要购买服务器、配置域名解析，成本高且流程繁琐。其实有一种零成本方案——仅穿透前端即可实现内网个人项目的公网访问。

账号注册与工具准备

首先去 ngrok.com 官网注册一个账号，就能获得一个免费的 dev 结尾的域名。注册好之后，下载对应的 zip 压缩包。

在官网个人后台 / 仪表盘（Dashboard）可直接复制个人专属的 Authtoken，这个令牌是后续连接的关键。

分框架适配配置

不同前端框架对跨域和代理的处理方式略有差异，这里针对常见的 Vite 和 Umi Max 做一下适配。

如果是 Vite + React 的项目，需要在 vite.config.js 文件中加上 allowedHosts 这一行代码，防止 ngrok 生成的域名被浏览器拦截：

// vite.config.js
export default defineConfig({
  server: {
    allowedHosts: ['xxx.dev'], // 替换为你获取的 ngrok 域名
  },
});

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

1. config/config.ts

在文件里加上如下 proxy 部分，确保请求能正确转发到本地后端：

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