通过内网穿透免费部署我们的springboot+vue项目实现跟服务器一样的效果_开发测试

通过内网穿透免费部署我们的springboot+vue项目实现跟服务器一样的效果

创始人

2025-01-20 02:34:05

0次

前文讲到通过内网穿透能够实现远程访问个人电脑的静态资源。本文将讲解通过内网穿透实现远程访问本地的项目，实现跟部署到服务器一样的效果：前文链接：通过内网穿透实现远程访问个人电脑资源详细过程（免费）（NatApp + Tomcat）-CSDN博客
如果遇到tomcat启动闪退问题可以查看博主的：Tomcat 启动闪退问题-CSDN博客

前言

1. 后端SpringBoot项目

1.1 将springboot项目打成war包

1.2 部署到本地的tomcat

2.1 打包Vue项目并完成内网穿透

前言

既然能够通过内网穿透访问到本地的静态资源，那么就能够通过内网穿透访问到本地的运行的项目。

友情提示：最好看一下之前的文章：通过内网穿透实现远程访问个人电脑资源详细过程（免费）（NatApp + Tomcat）-CSDN博客

1. 后端SpringBoot项目

1.1 将springboot项目打成war包

在打包之前要对我们的pom.xml文件进行修改，首先要设置打包格式，设置成war，因为默认是打成jar包

war

之后要移除springboot自带的tomcat容器，因为后续是使用到外部的tomcat容器（注意：我们移除之后springboot项目就不能够正常启动了，所以我们必须要注视掉才能正常启动，打包的时候在取消注释）

             org.springframework.boot             spring-boot-starter-web                                                    org.springframework.boot                     spring-boot-starter-tomcat

因为我们移除了tomcat容器会少一个servlet-api的一个依赖，所以我们必须引入以下

                      javax.servlet             javax.servlet-api             provided

接下来还需要对我们的主要启动类进行修改

@SpringBootApplication public class Application extends SpringBootServletInitializer {      @Override     protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {         return application.sources(Application.class);     }      public static void main(String[] args) {         SpringApplication.run(Application.class,args);     } }

接下来就来到了打包环节，点击右侧的maven选项，选择lifecycle，点击clean（清除target），完成之后在点击install（确认依赖成功下载），最后点击package（打包）

1.2 部署到本地的tomcat

找到我们的war包，将其复制到tomcat的webapps目录下

可以对war进行一个重命名，可以命名短一点，我这里重命名为light，然后将其解压。解压之后light目录结构如下：

解压之后就可以删除war包了。

我们接下来进行测试，查看通过tomcat能否正常启动我们的springboot项目。

打开tomcat的bin目录，在该目录输入cmd打开控制台输入startup命令启动tomcat。

正常启动！！！在浏览器输入localhost:tomcat端口号，我tomcat的端口号是3000（默认为8080），如果想要访问到我们的springboot项目，就需要带上我们刚刚解压的路径名称，比如我这里的light项目的访问路径为：localhost:3000/light

需要注意的是：tomcat的服务器的端口会覆盖springboot项目的端口，所以springboot项目的端口号是没有作用的，我们访问项目是通过他在tomcat的文件夹名称来访问的，包括你设置的项目名称都是没用的，一切以tomcat的文件名称为准

我springboot项目有如下的controller

@RestController @RequestMapping("/test") public class TestController {      @GetMapping("/getstr")     public String test(){         return "hello world";     } }

所以我们通过访问该路径来测试是否部署成功，是否能够访问到：输入以下路径：

localhost:3000/light/test/getstr