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

前文讲到通过内网穿透能够实现远程访问个人电脑的静态资源。本文将讲解通过内网穿透实现远程访问本地的项目,实现跟部署到服务器一样的效果:前文链接:通过内网穿透实现远程访问个人电脑资源详细过程(免费)(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关闭了

鸟欲高飞先振翅,人求上进先读书。——名言出处:李苦禅

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/13198.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习之卷积神经网络理论基础

深度学习之卷积神经网络理论基础 卷积层的操作&#xff08;Convolutional layer&#xff09; 在提出卷积层的概念之前首先引入图像识别的特点 图像识别的特点 特征具有局部性&#xff1a;老虎重要特征“王字”仅出现在头部区域特征可能出现在任何位置下采样图像&#xff0c…

Python 小抄

Python 备忘单 目录 1.语法和空格 2.注释 3.数字和运算 4.字符串处理 5.列表、元组和字典 6.JSON 7.循环 8.文件处理 9.函数 10.处理日期时间 11.NumPy 12.Pandas 要运行单元格&#xff0c;请按 ShiftEnter 或单击页面顶部的 Run&#xff08;运行&#xff09;。 1.语法和空格…

6---Linux下版本控制器Git的知识点

一、Linux之父与Git的故事&#xff1a; Linux之父叫做“Linus Torvalds”&#xff0c;我们简称为雷纳斯。Linux是开源项目&#xff0c;所以在Linux的早期开发中&#xff0c;许多世界各地的能力各异的程序员都参与到Linux的项目开发中。那时&#xff0c;雷纳斯每天都会收到许许…

VMware Fusion 13.5.2 for Mac 发布,产品订阅模式首个重大变更

VMware Fusion 13.5.2 for Mac 发布&#xff0c;产品订阅模式首个重大变更 适用于基于 Intel 处理器和搭载 Apple 芯片的 Mac 的桌面虚拟化软件 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-fusion-13/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留…

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《集装箱海港级联物流-能源耦合系统协同优化方法 》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

FPGA - GTX收发器-K码 以及 IBERT IP核使用

一&#xff0c;前言 在FPGA - Xilinx系列高速收发器---GTX中详细介绍了GTX的基础知识&#xff0c;以及IP核的调用&#xff0c;下面将补充一下GTX在使用中的高速串行数据流在接收和发送时的控制与对齐&#xff08;K码&#xff09;&#xff0c;以及高速接口GTX&#xff0c;如果G…

Springboot开发 -- Postman 调试 session 验证 接口

当我们在开发Spring Boot应用时&#xff0c;经常会遇到带有Session验证的接口&#xff0c;这些接口需要用户先登录并获取到Session ID&#xff08;或称为cookie中的JSESSIONID&#xff09;&#xff0c;然后在后续的请求中携带这个Session ID来保持会话状态。下面我将以一个实际…

Hello, GPT-4o!

2024年5月13日&#xff0c;OpenAI 在官网正式发布了最新的旗舰模型 GPT-4o 它是一个 多模态模型&#xff0c;可以实时推理音频、视频和文本。 * 发布会完整版视频回顾&#xff1a;https://www.youtube.com/watch?vDQacCB9tDaw GPT-4o&#xff08;“o”代表“omni”&#xff0c…

高效协同,智慧绘制:革新型流程图工具全解析

流程图&#xff0c;作为一种直观展示工作过程和系统运作的工具&#xff0c;在现代办公和项目管理中发挥着不可或缺的作用。 其优势在于能够清晰、直观地呈现复杂的过程和关系&#xff0c;帮助人们快速理解并掌握关键信息。同时&#xff0c;流程图也广泛应用于各种场景&#xf…

【Python】图像批量合成视频,并以文件夹名称命名合成的视频

一个文件夹中有多个子文件夹&#xff0c;子文件夹中有多张图像。如何把批量把子文件夹中的图像合成视频&#xff0c;视频名称是子文件夹的名称&#xff0c;生成的视频保存到指定文件夹&#xff0c;效果记录。 代码 import os import cv2def create_video_from_images(image_f…

leetcode刷题(6):二叉树的使用

文章目录 104. 二叉树的最大深度解题思路c 实现 94. 二叉树的中序遍历解题思路c 实现 101. 对称二叉树解题思路c 实现 96. 不同的二叉搜索树解题思路c 实现 102. 二叉树的层序遍历解题思路c 实现 104. 二叉树的最大深度 题目: 给定一个二叉树 root &#xff0c;返回其最大深度…

ALV 图标显示

前言 在ABAP ALV中&#xff0c;使用fieldcat来定义列表中每个字段的显示属性&#xff0c;包括图标&#xff08;Icon&#xff09;的显示。图标可以在ALV列表中为特定列的行或标题添加图形元素&#xff0c;以增强视觉提示或传达附加信息。 ICON查询 图标的名称用事务码”ICON“进…

智能BI(后端)-- 系统异步化

文章目录 系统问题分析什么是异步化&#xff1f;业务流程分析标准异步化的业务流程系统业务流程 线程池为什么需要线程池&#xff1f;线程池两种实现方式线程池的参数线程池的开发 项目异步化改造 系统问题分析 问题场景&#xff1a;调用的服务能力有限&#xff0c;或者接口的…

【文档理解】TextMonkey:一种OCR-Free的用于文档理解的多模态大模型

背景 传统的信息提取&#xff0c;通常是从文本中提取信息&#xff0c;相关技术也比较成熟。然而对于复杂领域&#xff0c;例如图片&#xff0c;文档等形式的数据&#xff0c;想要提取出高质量的、可信的数据难度就比较大了&#xff0c;这种任务也常称为&#xff1a;视觉文档理…

CTF网络安全大赛web题目:just_sqli

这道题目是bugku的web题目 题目的 描  述: KosenCTF{} 原文链接&#xff1a; CTF网络安全大赛web题目&#xff1a;just_sqli - 红客网-网络安全与渗透技术 题目Web源代码&#xff1a; <?php$user NULL; $is_admin 0;if (isset($_GET["source"])) {highlig…

齐护K210系列教程(二十七)_语音识别

语音识别 1.烧录固件和模型2.语音识别程序2.1训练并识别2.2使用本地文件语音识别 3.课程资源联系我们 1.烧录固件和模型 注&#xff1a;本应用只适用于有麦克风功能的型号&#xff1a;AIstart_pro、AIstart_掌机、AIstart_Mini, 其它型号不支持&#xff01; 机器码生成以及模…

linux中远程服务器上传输文件的10个sftp命令示例

目录 1. 如何连接到 SFTP 2. 帮助 3.检查当前工作目录 4. 使用 sftp 列出文件 远程 本地 5. 使用 sftp 上传文件 6. 使用 sftp 上传多个文件 7. 使用 sftp 下载文件 8. 在 sftp 中切换目录 远程 本地 9. 使用 sftp 创建目录 10. 使用 sftp 删除目录 11. 退出 sf…

(001)apidoc 的安装

安装 1.确定 node 和 npm 的匹配版本 node -vv10.14.1# 切换node 版本 nvm list nvm use 20.12.22.安装 apidoc。 npm install -g apidoc3.生成文档&#xff1a; apidoc -i ../ -o document/ -f ".java$"-i &#xff1a;指定扫描路径。-o&#xff1a;输出目录。…

【Linux:环境变量】

环境变量一般是指在操作系统中用来指定操作系统环境的一些参数 常见的环境变量&#xff1a; PATH 指定可执行程序的搜索路径 系统级的文件&#xff1a;/etc/bashrc 用户级文件&#xff1a;~/.bashrc ~/.bash_profile HOME 指定用户的主要工作目录&#xff08;当前用…

kettle从入门到精通 第六十一课 ETL之kettle 任务调度器,轻松使用xxl-job调用kettle中的job和trans

想真正学习或者提升自己的ETL领域知识的朋友欢迎进群&#xff0c;一起学习&#xff0c;共同进步。若二维码失效&#xff0c;公众号后台加我微信入群&#xff0c;备注kettle。 1、大家都知道kettle设计的job流程文件有个缺点&#xff1a;只能设置简单的定时任务&#xff0c;无法…