零成本使用 ngrok 将前端项目暴露至公网

零成本使用 ngrok 将前端项目暴露至公网

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

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

ngrok 账号注册与工具准备

首先在 https://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 时生效。