通过内网穿透来实现项目上线

通过内网穿透来实现项目上线

背景

这两天也是在做Github上的一个开源项目，然后做一半的时候突然刷到一个关于轻松上线项目的帖子，顿时就十分感兴趣，就先把做成半成品的项目试着上线一把。

核心思路

通过内外穿透工具Ngrok对Nginx服务进行内网穿透，将前后台服务通过Nginx进行代理即可通过只对外暴露一个端口就可以完成前后台服务的上线。

为什么要用Nginx进行代理，直接把前后台服务都交给Ngrok穿透不行吗？

可以是可以，但是不推荐，因为一方面通过Nginx代理前后台服务可以提升封装性，只对公网暴露一个端口就可以完成项目上线；另一方面，Ngrok每次通过本地服务生成的公网域名都是随机的，虽然可以固定域名，但是只能免费配置一个公网域名，所以最优解就是通过Nginx进行前后台服务的代理，那个免费名额就留给Nginx。

实现流程

1. 首先安装好Nginx服务器以及内外穿透工具Ngrok，按照好Nginx后记得启动验证一下，这里不展开说详细的验证步骤了

2. 然后在nginx.conf文件中对前后台服务进行转发配置

           # 前端服务转发规则（假设前缀为/web）
           location /web {
               # 替换为实际前端服务地址和端口  http://localhost:5173/
               proxy_pass http://localhost:5173;  
               proxy_set_header Host $host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
               
               # 可选：重写URL，去掉前缀
               # rewrite ^/web(/.*)$ $1 break;
           }
           
           # 这个是为了解决前端项目加载静态资源直接走根目录来强制加的/web路径，避免报错
           location / {
               # 方法1：301 永久重定向（SEO友好）
               # return 301 /web$request_uri;
   
               # 或方法2：内部重写（不改变浏览器URL）
               rewrite ^/(.*)$ /web/$1 last;
           }
   
           # 后端API转发规则（假设前缀为/api）
           location /api {
               proxy_pass http://localhost:8123;  # 替换为实际后端服务地址和端口 http://localhost:8123
               proxy_set_header Host $host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               
               # 可选：重写URL，去掉前缀
               # rewrite ^/api(/.*)$ $1 break;
           }
   

3. 接下来就是最关键的一步，也是我踩坑最多的一步：对前台路由配置进行修改，需要修改的有vite.config.ts，request.ts，pictureEditWebSocket.ts，按照如下的规则进行配置

   1. request.ts的这个请求地址不能写死，因为我们的后台服务也是要暴露到公网的，写死的话就会出现前台页面可以访问，但是后台请求还是指向的本地地址而非Nginx的代理 window.location.origin

2. vite.config.ts需要再加上如下的base，否则是不会被Nginx识别到 base: '/web/',

3. pictureEditWebSocket.ts和第一步一样，配置成动态的 window.location.origin

4. 其他的暂时就没发现需要修改的地方了，如果有小伙伴不能正常访问也可以艾特我一下，一起看看问题

5. 启动前后台服务，先通过Nginx验证下是否能够正常访问前后台服务，可以看到都是正常的

5. 然后就可以去ngrok网站去申请自己的固定域名了，然后启动了，这里就不放申请固定域名步骤的截图了，不清楚具体申请流程的可以参考下文的[链接](https://mp.weixin.qq.com/s/BypBsqNswLpNixdR4hM-zA

   )，写的很详细。最终启动好之后就是这个样子：

6. 最后访问地址：https://生成的固定地址/web/就可以访问了，可以将生成的地址用手机开热点访问一下主页，登录页面啥的，都没问题就算完成整个流程了

存留问题

在实践过程中遇到了不少问题，比如说找不到前端代码需要改配置的地方（因为我是Java开发，对前台不是很熟），静态资源是请求的是根目录无法走/web代理等等，但是都一一借助AI来解决了，再次感谢DeepSeek。

还有，这里遗留了一个的小问题，就是内网穿透之后用前台的原始地址 http://localhost:5173/web/访问的话就调用不了后天接口了，如下

不难发现这里的域名位置指向的还是前台的端口号，这是因为在前端代码配置了window.location.origin，这玩意是JavaScript 中用于获取当前页面的 完整协议、域名和端口 的属性。所以就相当于既没有走Nginx代理也没有直接调用后台地址，这个问题想解决的话最好就是区分环境，这里的话我有空就再研究研究，评论区有小伙伴懂的话也可以教教我，大概就这些内容了。

经验总结

其实回过头来看整个流程还是蛮简单的，但是要我一个不熟悉前台代码，没接触过Ngrok的想顺利把整个流程打通还是很费劲的，不过收获也是不少，比如前台代码熟悉一些了，Nginx.conf文件的配置，代理服务，内网穿透的流程等等，接下来就是要继续完善项目了~

后续的启动流程

启动前后台服务

启动Nginx start nginx.exe

对Nginx进行内网穿透 ngrok http --url=officially-suited-narwhal.ngrok-free.app 80

参考文档&视频

Ngrok视频教程：https://www.bilibili.com/video/BV1z14y1r7Fc

Ngrok文字教程：https://mp.weixin.qq.com/s/BypBsqNswLpNixdR4hM-zA

Nginx：https://www.codefather.cn/post/1852200725989629954

具体配置：

前端：

Nginx服务器：

        # WebSocket 代理配置
        location /api/ws/picture/edit {
            proxy_pass http://localhost:8123/api/ws/picture/edit;
            
            # WebSocket 必需头设置
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            
            # 其他重要头信息
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            
            # 长连接超时设置
            proxy_read_timeout 86400s;  # 1天
            proxy_send_timeout 86400s;
        }