总结了多种临时部署方案并重点分享了使用 ngrok 进行本地 Web 项目外网测试的完整流程与配置经验。

这篇笔记主要总结几种常见的临时部署方案，并重点分享一下我最近用 ngrok 做本地 Web 项目外网测试的完整流程和踩坑记录。

场景很简单： 需要给别人临时体验一下你的 Web 项目，但又不想真的部署上线。 下面是我用过或了解过的一些小规模部署平台：

1. Railway

   Railway.app 是现在最受欢迎的测试环境部署平台之一

   • 优点

     • GitHub 一键部署（前后端都行）

     • 快速

   • 缺点

     • 付费

2. Render

   Render 和 Railway 类似，也非常适合测试环境 + 临时部署。

   • 优点

     • 免费

     • 比 Railway 稳定

   • 缺点

     • 免费机器有冷启动

     • 构建速度略慢

3. Vercel

   如果前端是 React ，那么 Vercel 是最好的前端测试平台。

   • 优点

     • 一键部署，极速构建

   • 缺点

     • 仅支持前端部署

4. ngrok

   • 优点：

     • 不部署服务器

     • 让别人访问你本地跑的 Spring Boot / React 项目

     • 免费

   • 缺点

     • 慢

接下来我就说说使用 ngrok 进行本地开发 + 邀请别人体验。

先简单说 ngrok 的具体原理：

你在本地跑服务（Spring Boot / React dev server）， 然后开一个“小通道进云上服务器”， 云上的服务器给你一个公网 URL， 别人访问这个 URL → 会通过隧道转发到你本地的端口。

所以：

• 不需要买云服务器

• 不需要申请域名

• 不需要公网 IP

• 你本地电脑必须开着，项目必须在跑，别人才能访问

ngrok 使用步骤

1. 在官网注册账号，并下载对应执行文件

2. 打开执行文件，输入命令

   在控制台执行一次你的认证命令（官网会给一条类似这样的）：

   ngrok config add-authtoken xxxxxxxxxxxxxxxxx

3. 暴露本地 React 前端（Vite 示例，端口 5173）

   • 首先需要本地允许前端：

     npm run dev

   • 你再启一个终端

     ngrok http 5173

   此时，会拿到一个 https://xxx.ngrok-free.app 的域名，发给别人测试即可。

4. 暴露本地后端项目

   首先需要本地开启后端项目（示例 8080 端口）。然后执行和前端类似的命令：

   ngrok http 8080

   但是执行后会显示错误。因为这个工具免费只能一个域名，不能两个。所以，我们不能用这个方法。如果要付费，不如选择更好的工具。

   但好消息是：其实你根本不需要两个域名，我们可以只开一个隧道，一样前后端都能用。

   思路是：只暴露前端，把后端藏在 Vite 代理后面。

   本地：

   • Spring Boot：http://localhost:8080

   • Vite dev：http://localhost:5173

   配置 vite.config.js：

   • 让 所有 /api 请求自动代理到 http://localhost:8080

   用 ngrok 只暴露 5173 这个端口

   • 外网访问：https://xxx.ngrok-free.dev（前端）

   • 前端里发 /api/... 请求 → Vite 帮你转发到 localhost:8080

5. 修改

   • ~\vite.config.js

     寻找你前端的对应文件，增加 server 模块，具体如下：

     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     ​
     // https://vite.dev/config/
     export default defineConfig({
       plugins: [react()],
         // 新加的为了测试的域名，删了 server 这一块即可
         server: {
             allowedHosts: [
                 'nonmature-scraggily-fermin.ngrok-free.dev'
             ],
             host: true,
             // // 允许 ngrok 域名访问 dev server
             // allowedHosts: ['*.ngrok-free.dev', '*.ngrok.app'],
             proxy: {
                 // 所有 /api 开头的请求都转发给本地 8080 的 Spring Boot
                 '/api': {
                     target: 'http://localhost:8080',
                     changeOrigin: true,
                     // 如果后端不是 /api 开头，而是根路径，可以用 rewrite：
                     // rewrite: (path) => path.replace(/^\/api/, '')
                 }
             }
         }
     })

   • ~\api.js

     寻找你前端的对应文件，修改基础 API 头，具体如下：

     // const API_BASE = import.meta.env.VITE_API_BASE || "http://localhost:8080/api";
     const API_BASE = "/api";

   • ~\SecurityConfig.java

     寻找你后端的对应文件，暂时修改 CORS，具体如下：

     //        configuration.setAllowedOrigins(List.of(
     //                "http://localhost:5173",
     //                "http://localhost:5174",
     //                "http://127.0.0.1:5173",
     //                "http://127.0.0.1:5174",
     //                "http://localhost:3000"));
     ​
     // 开发用：直接允许所有域名（包括 ngrok）
     configuration.setAllowedOriginPatterns(List.of("*"));

   • 另外更多需求，根据你的项目需求来改......

以上就是我整理的一套适合 小规模、临时测试 Web 项目 的思路。

如果不想部署服务器，也不想整 CI/CD，只是让朋友试用一下自己的项目，ngrok + 前端代理后端 其实是最轻量、最省事的方案。