本地全栈项目想让别人看到，只能买云服务器部署吗？

前后端都调通了功能跑得好好的兴冲冲把地址发给客户看——结果对方在外网根本打不开。只能老老实实去买云服务器、申请域名、配置备案、部署前后端一通操作下来大半天过去了本来半天能搞定的事变成两天。这是全栈开发里最常见的尴尬功能已经有了但交付方式还停留在在我电脑上才能看。买云服务器是一条路但成本不低备案周期也长对于只是想让客户临时看一眼效果的需求来说杀鸡用牛刀了。其实有更简单的方案不需要把后端部署到公网只穿透前端Vite 的 proxy 机制负责把前端页面的 API 请求转发到本地后端外部用户看到的是前端页面后端接口只有你自己的机器能访问到既分享出去了又保证了后端安全。cpolar 建一条指向前端端口的隧道固定子域名绑定好整个流程十分钟能跑通。文章用 Spring Boot 2 Vue 3 完整演示这个链路前端 5173 端口后端 8888 端口Vite proxy 配置把/api请求转发到本地后端cpolar 只穿透前端前端页面公网可访问后端始终留在本地。解决了功能有了但没法分享的核心痛点。1 环境及项目准备本部分将使用一个已经编写好的Spring Boot 2 Vue 3的一个demo演示项目来进行演示项目所需环境如下JDK11Maven3.6Nodejs18请确保您的电脑上拥有如上环境可在cmd中进行测试版本是否安装测试命令如下#检查java环境版本信息java-version#检查maven环境版本信息mvn-v#检查nodejs版本及npm版本node-vnpm-v参考图如下接下来需要将项目下载至本地也可以使用git clone命令克隆至本地gitclone https://gitee.com/jun-wan/springboot-vue3-cpolar-demo.git将项目下载至本地后进入目录可以看到有backend(后端)和frontend(前端)两个项目2 项目启动及访问测试2.1 前端Vue项目启动进入frontend文件夹即前端vue项目目录中在地址栏处输入cmd回车接着输入如下命令进行安装前端项目依赖npminstall安装完成后输入如下命令启动项目npmrun dev可以看到项目成功启动输出了多个访问地址以local为例在浏览器中访问如下地址http://localhost:5173/可以看到成功访问到了前端页面只是提示服务器异常请稍后重试。这是因为只启动了前端并没有启动后端这是正常的。2.2 后端SpringBoot项目启动进入到backend文件夹中即后端项目目录同样在地址栏中输入cmd回车打开cmd窗口接着输入如下命令启动SpringBoot项目:mvn spring-boot:run启动成功可以看到后端项目成功运行在8888的端口上在后端控制器中定义了一个test接口接口中会返回msg、timestamp、status、requestCount几个字段返回示例如下{msg:操作成功,timestamp:2025-01-01 12:00:00,status:success,requestCount:1}接下来在浏览器中刷新一下前端页面查看页面是否正常能否获取到后端test接口响应的内容可以看到成功返回了后端接口的内容msg等字段都显示了内容状态也为success至此前后端已经完美连上3 前端代理机制详解在前面的步骤中我们已经验证前后端都可以在本地正常运行但浏览器是有“同源策略”的当前端5173端口直接请求后端8888端口接口时会出现跨域问题。此时我们就需要使用Vite 的代理机制proxy来解决跨域同时也让公网访问时保持后端安全。3.1 为什么需要 Proxy在前后端分离的开发模式下前端和后端通常运行在不同的端口上前端项目Vue 3 Vite运行在http://localhost:5173后端服务Spring Boot运行在http://localhost:8888当浏览器从前端直接请求后端接口时例如http://localhost:8888/api/test会立即触发浏览器的同源策略Same-Origin Policy限制 如下图报错提示CORS policy: NoAccess-Control-Allow-Originheader is present on the requested resource.同源策略要求协议、域名、端口必须完全一致否则浏览器会阻止请求。由于前端和后端端口不同5173 ≠ 8888属于“跨域请求”因此被拦截。要解决这个问题我们可以让前端开发服务器Vite代理这些请求。即让浏览器只与前端通信而前端服务器再代表浏览器去访问后端。3.2 Proxy 的工作原理Vite 的开发服务器在启动时会根据配置文件中的server.proxy字段拦截以特定路径开头的请求如/api。当浏览器发出请求时Vite 不会直接把它发送到公网而是在本地服务器中转并转发到目标后端服务。下面这张图展示了外网访问到本地后端的完整流程请求流转过程如下浏览器访问公网地址例如https://xxx.cpolar.top/api/test该请求通过 cpolar 隧道到达你本地的前端开发服务器localhost:5173Vite 检测到路径匹配/api根据代理规则将请求转发到http://localhost:8888后端Spring Boot处理逻辑并返回结果Vite 再将响应结果返回给浏览器。整个过程中后端始终只被你的本机访问外网用户无法直接访问 8888 端口。这不仅保证了安全性也使得前后端通信过程对外部用户“透明”。3.3 Proxy 配置示例vite.config.js在前端项目根目录下的vite.config.js文件中我们可以添加如下配置import{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue()],server:{proxy:{// 将所有 /api 开头的请求代理到后端/api:{target:http://localhost:8888,// Spring Boot 后端地址changeOrigin:true,// 修改请求头中的源防止被后端拒绝rewrite:(path)path.replace(/^\/api/,)// 可选去掉/api前缀}}}})4 穿透前端Vue项目支持HTTPS公网访问在前面我们已在本地成功启动并联通前后端但访问范围仍局限于局域网。若希望外网用户也能安全访问你的应用我们可以通过 cpolar 将本地前端服务映射到公网并提供 HTTPS 访问后端依旧保持在本地由前端通过代理安全调用。相比自建云服务器内网穿透上手更快、成本更低含免费版唯一不足是带宽有限不过对本示例及中小流量场景已足够。下面开始配置 cpolar为前端生成可直接访问的 HTTPS 地址。4.1 什么是cpolar?cpolar 是一款内网穿透工具可以将你在局域网内运行的服务如本地 Web 服务器、SSH、远程桌面等通过一条安全加密的中间隧道映射至公网让外部设备无需配置路由器即可访问。广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台并提供一键安装脚本方便部署。4.2 下载cpolar打开cpolar官网的下载页面点击立即下载 64-bit按钮,下载cpoalr的安装包:下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:cpolar version出现如上版本即代表安装成功!4.3 注册及登录cpolar web ui管理界面4.3.1 注册cpolar访问cpolar官网点击免费注册按钮进行账号注册进入到如下的注册页面进行账号注册4.3.2 访问web ui管理界面注册完成后,在浏览器中输入如下地址访问 web ui管理界面:http://127.0.0.1:9200输入刚才注册好的cpolar账号登录即可进入后台页面:4.4 穿透前端Vue项目的Web界面4.4.1 随机域名方式(免费方案)随机域名方式适合预算有限的用户。使用此方式时系统会每隔24 小时左右自动更换一次域名地址。对于长期访问的不太友好但是该方案是免费的如果您有一定的预算可以查看大纲4.4.2的固定域名方式且访问更稳定。首先点击左侧菜单栏的隧道管理展开进入隧道列表页面页面下默认会有 2 个隧道remoteDesktop隧道指向3389端口tcp协议website隧道指向8080端口http协议http协议默认会生成2个公网地址一个是http另一个https免去配置ssl证书的繁琐步骤点击编辑website的隧道修改成我们前端Vue项目需要的信息接着来到在线隧道列表可以看到名称为vue-demo-5173隧道的两条记录信息一条协议为http,另一条协议为https:以https为例访问测试这是因为在本地的vite.config.js中没有允许该域名访问所以我们需要打开前端Vue目录进行修改一下该文件如下图内容第一种方式将穿透的域名填写至PUBLIC_DOMAIN变量中保存即可。或者直接将allowedHosts的值修改为true,如下图第二种方式不过更推荐第一种方式即填写指定域名只允许Vite 开发服务器接受来自指定主机名的请求更加安全接着再次访问一下穿透的域名进行测试可以发现成功的访问到了页面且能够正常和后端进行通信4.4.2 固定域名方式升级任意套餐皆可通过前面的配置我们已经成功实现了前端Vue项目的公网访问。然而免费随机域名方案的局限性也随之显现系统每24小时左右自动更换一次域名地址导致书签失效、分享链接频繁更新长期使用极不便利。为解决这一问题固定域名方式成为更优选择——只需升级任意付费套餐即可绑定一个永久不变的专属域名避免重复分享和重新配置的麻烦显著提升使用体验与服务稳定性。好了接下来开始固定保留二级子域名教程创建一个专属于你的二级域名吧首先进入官网的预留页面:https://dashboard.cpolar.com/reserved选择预留菜单即可看到保留二级子域名项填写其中的地区、名称、描述可不填项然后点击保留按钮操作步骤图如下列表中显示了一条已保留的二级子域名记录地区显示为China Top。二级域名显示为testdemo。注二级域名是唯一的每个账号都不相同请以自己设置的二级域名保留的为主接着进入侧边菜单栏的隧道管理下的隧道列表可以看到名为vue-demo-5173的隧道点击编辑按钮进入编辑页面来到状态菜单下的在线隧道列表可以看到隧道名称为vue-demo-5173的公网地址已经变更为二级子域名固定域名主体及后缀的形式了接下来需要再次修改vite.config.js文件中的PUBLIC_DOMAIN值如果在前面使用的为第二种方式即allowedHoststrue方式则可以跳过该步骤修改后保存文件然后访问固定好的域名进行测试访问成功你现在拥有了一个永久不变的专属域名彻底告别了每24小时更换地址的烦恼.可以将这个链接添加到书签稳定地分享给同事或朋友也更适合用于演示或准生产环境。恭喜你已顺利完成从免费随机域名到固定域名的升级迈出了公网服务持久化部署的关键一步至此你已顺利完成从免费随机域名到固定域名的升级为前端服务的公网访问提供了更强的稳定性与可用性。总结搭完之后开发到交付的链条才算完整了。之前那种功能都好了但只能在自己电脑上演示的时代结束了现在十分钟能把本地全栈项目变成外网可访问的链接发给客户、发给同事、发给投资人对方打开浏览器就能看到完整效果。不需要买服务器不需要备案不需要部署文档后端始终在本地跑着开发的时候改代码实时能看到变化需要分享的时候一条隧道全部搞定。Vite 的 proxy 机制把跨域问题在开发层面消化掉了后端零改动前端加一段配置就完事。公网用户访问的是前端页面数据请求通过 proxy 转发到本地后端这个通信过程对外完全透明但后端始终只暴露给本机安全性没有受影响。