前文講到通過內網穿透能夠實現遠程訪問個人電腦的靜態資源。本文將講解通過內網穿透實現遠程訪問本地的項目，實現跟部署到服務器一樣的效果：前文鏈接：通過內網穿透實現遠程訪問個人電腦資源詳細過程（免費）（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包

<packaging>war</packaging>

? ? ? ? 之后要移除springboot自帶的tomcat容器，因為后續是使用到外部的tomcat容器（注意：我們移除之后springboot項目就不能夠正常啟動了，所以我們必須要注視掉才能正常啟動，打包的時候在取消注釋）

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
<!--            移除自帶的tomcat--><exclusions><exclusion><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId></exclusion></exclusions></dependency>

? ? ? ? 因為我們移除了tomcat容器會少一個servlet-api的一個依賴，所以我們必須引入以下

<!--        移除tomcat容器會缺少servlet依賴--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><scope>provided</scope></dependency>

? ? ? ? 接下來還需要對我們的主要啟動類進行修改

@SpringBootApplication
public class Application extends SpringBootServletInitializer {@Overrideprotected 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

? ? ? ? 成功訪問到！！！

2.1 通過內網穿透遠程訪問到后端項目

? ? ? ? 啟動NatApp，（具體內容參考我上一篇博客：通過內網穿透實現遠程訪問個人電腦資源詳細過程（免費）（NatApp + Tomcat）-CSDN博客）

????????

? ? ? ? ?在瀏覽器中輸入：網址+/light/test/getstr， 能夠訪問到！！！就算是其他電腦/手機設備都能夠訪問到，這就實現了將springboot部署到服務器一樣的效果

2.1 打包Vue項目并完成內網穿透

? ? ? ? 在打包Vue項目的全過程中千萬不要將natapp給停止了，因為使用的是免費隧道，每次重新打開我們natapp提供的網址就會變換，一變化就需要修改Vue項目的請求路徑

? ? ? ? 在打包Vue項目之前，需要修改前端向后段發送ajax/axios請求的路徑，因為我們后端的地址已經變成了?http://bs9p3v.natappfree.cc/light?而不再是127.0.0.1:8088/app 這種本地訪問路徑了

????????

? ? ? ? 然后前端還需要設置一個東西，就是開啟其他ip地址訪問項目的配置

disableHostCheck:true

? ? ? ? 在vue項目的根路徑下執行npm run build命令對vue項目進行打包，會在根目錄下生成一個dist文件夾，就是我們打包后的文件（dist文件夾就跟我們war解壓之后是一樣的效果，都是編譯之后的內容）

? ? ? ? 在tomcat的webapps的文件夾中新建一個front文件夾用來存放dist文件夾中的內容

? ? ? ? 將dist文件夾中的所有內容直接復制到webapps下的front文件夾

? ? ? ? 然后重啟我們本地的tomcat（千萬不要把natapp停止了）：直接關掉tomcat的命令窗口，重新進入tomcat的bin目錄下，打開cmd控制臺輸入startup命令運行tomcat即可

? ? ? ? 成功啟動tomcat之后，就來測試能否訪問到我們的vue項目，以及vue項目能否向后端發送請求，在瀏覽器輸入：?http://bs9p3v.natappfree.cc/front。

? ? ? ? 因為是免費的隧道，所以可能比較慢。

? ? ? ? 成功訪問到。并且也能夠正常的向后端發送請求！！

? ? ? ?至此我們就通過內網穿透實現了將項目部署到服務器一樣的效果了（用完之后記得將natapp關閉了）

鳥欲高飛先振翅，人求上進先讀書。——名言出處：李苦禪

????????