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

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

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

ngrok 账号注册与工具准备

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

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

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

分框架适配配置

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

// vite.config.js
export default defineConfig({
  server: {
    allowedHosts: ['xxx.dev']  // ngrok 域名
  }
})

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

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': '' },
    },
  },

  // ... 其他配置 ...
});

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

2.src/app.tsx

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

// src/app.tsx

export const 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 地址，其他人就能够访问你的项目了。