当前位置: 首页 > news >正文

通过内网穿透免费部署我们的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关闭了

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

        

相关文章:

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

前文讲到通过内网穿透能够实现远程访问个人电脑的静态资源。本文将讲解通过内网穿透实现远程访问本地的项目&#xff0c;实现跟部署到服务器一样的效果&#xff1a;前文链接&#xff1a;通过内网穿透实现远程访问个人电脑资源详细过程&#xff08;免费&#xff09;&#xff08;…...

SMB攻击利用之-mimikatz上传/下载流量数据包逆向分析

SMB协议作为windows环境下最为常见的一种协议,在历史上出现过无数的通过SMB协议进行网络攻击利用的案例,包括针对SMB协议本身以及通过SMB协议实施网络攻击。 本文将介绍一种通过SMB协议的常见利用方式,即向远程主机传输mimikatz,作为我的专栏《SMB攻击流量数据包分析》中的…...

Mysql常见数据类型探索

Mysql常见数据类型探索 数值类型 MySQL 支持所有标准 SQL 数值数据类型。 这些类型包括严格数值数据类型(INTEGER、SMALLINT、DECIMAL 和 NUMERIC)&#xff0c;以及近似数值数据类型(FLOAT、REAL 和 DOUBLE PRECISION)。 关键字INT是INTEGER的同义词&#xff0c;关键字DEC是…...

2024 年第四届长三角高校数学建模竞赛赛题B题超详细解题思路+问题一二代码分享

2024年第四届长三角数学建模竞赛B题详细解题思路 赛道B&#xff1a;人工智能范式的物理化学家 长三角分享资料&#xff08;问题一代码论文思路&#xff09;链接&#xff08;18点更新&#xff09;&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1lteKvIWNZ4v-Gd7oOcg…...

干货速学!1+X电子商务数据分析:电子商务数据分析的流程

电商数据采集API接口 生活中的数据分析 日常工作和生活中处处都有数据分析的存在&#xff0c;比如消费者在购买不同商品前&#xff0c;经常会对儿“性价比”进行简单分析&#xff0c;价格表现为固定的货币数字。性能则具体体现在商品质量、客户收务等客观因素和客户对该商品的需…...

618好物推荐大赏:2024年必囤好物一网打尽,购物攻略助你抢购无忧!

在618购物狂欢节来临之际&#xff0c;我为大家精心挑选了一系列好物&#xff0c;它们不仅品质卓越&#xff0c;更能在日常生活中为我们带来无限便利与乐趣。这里的每一款产品都经过我严格筛选&#xff0c;只为给你最优质的购物体验。让我们一起在这个618&#xff0c;发现生活中…...

【MySQL】基础操作(DDL,DML,DCL,DQL)

安装教程自行搜索&#xff0c;网上有很多 用户名设置为 root密码设置为 123456可以不这样设置&#xff0c;但要记好用户名密码&#xff0c;相关的代码也要自行更改 打开命令提示符程序(winR打开输入cmd回车) 输入&#xff1a;mysql -uroot -p 回车输入密码即可进入命令行环境…...

工厂自动化升级改造(3)-Modbus与MQTT的转换

什么是MQTT,Modbus,见下面文章 工厂自动化升级改造参考(01)--设备通信协议详解及选型-CSDN博客文章浏览阅读608次,点赞9次,收藏6次。>>特点:基于标准的以太网技术,使用TCP/IP协议栈,支持高速数据传输和局域网内的设备通信。>>>特点:跨平台的通信协议,…...

InnoDB 事务处理机制

文章目录 前言1. 事务处理挑战1.1 事务机制处理的问题1.2 并发事务带来的问题 2. InnodDB 和 ACID 模型2.1 Innodb Buffer Pool2.2 Redo log2.3 Undo log2.4 应用案例 3. 隔离级别和锁机制3.1 事务隔离级别3.1.1 READ UNCOMMITTED3.1.2 READ COMMITTED3.1.3 REPEATABLE READ3.1…...

Thymeleaf

替代jsp 功能&#xff1a;服务器渲染&#xff08;就是将服务器的数据展示在网页上&#xff09; 1、MVC概念 model 模型 javaBean(User/Book/Order...) View视图 html 服务器的动态数据 Controller控制器 Servlet MVC是在表述层开发运用的一种设计理念。主张把封装数据…...

网络学习(一)|深入了解API网关:定义、功能和关键术语

文章目录 定义主要功能关键术语 定义 API 网关&#xff08;API Gateway&#xff09;是一个核心的服务架构组件&#xff0c;用于管理、路由和保护对后端服务的访问。它充当了系统内外的接口&#xff0c;负责接收来自客户端的请求&#xff0c;并将其路由到相应的后端服务&#x…...

基于yolov8+flask搭建一个web版本的网页模型预测系统

测试环境&#xff1a; anaconda3python3.8 torch1.9.0cu111 ultralytics8.2.2 首先我们将训练好的权重放在weights目录下面 并将名字改成yolov8n.pt&#xff0c;如果不想改可以在代码app.py都把路径改过来即可。然后我们打开 python app.py之后看到 我们点击选择文件支持图…...

【北京迅为】《iTOP-3588从零搭建ubuntu环境手册》-第8章 安装编译所需要的依赖包

RK3588是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…...

牛客热题:合并二叉树

牛客热题&#xff1a;二叉树与双向链表> &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题…...

conda 常用20个命令

conda常用20个命令 这些命令涵盖了Conda环境管理和包管理的常用功能&#xff0c;可帮助你有效地管理Python环境和软件包。 创建环境&#xff1a; conda create --name myenv这个命令用于创建一个名为myenv的新环境。你可以在--name后面指定环境的名称&#xff0c;并在其后加上…...

Git泄露(续)

接上一篇补充 git config --global user.name " " git config --global user.email 邮箱地址 配置用户名和邮箱 git commit 使其处于交互区&#xff0c;没有使用 -m&#xff0c;默认用vim 来编辑和提交信息 输入要提交的内容&#xff0c;然后按ESC建回到命令…...

clickhouse卸载与安装

ClickHouse是一个用于联机分析&#xff08;OLAP&#xff09;的列式数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;来自于俄罗斯本土搜索引擎企业Yandex公司。它是为处理大规模数据集而设计的&#xff0c;并提供高性能和低延迟的查询支持。 注意&#xff1a;此教程的运…...

npm install [Error]

npm install 依赖的时候报错 依赖版本问题的冲突&#xff0c;忽视即可 使用 npm install --legacy-peer-deps...

Redisson分布式锁全解析:从基础到红锁,锁定高并发解决方案

1. 介绍Redisson和分布式锁的概念 1.1 Redisson简介 Redisson是一个在Redis的基础上实现的Java驻内存数据网格(In-Memory Data Grid, IMDG)。它不仅提供了对分布式和可伸缩数据结构的支持&#xff0c;还提供了多种分布式服务&#xff0c;包括但不限于分布式锁、集合、映射、计…...

RocketMQ-Dashboard 控制台使用详解

1 安装部署 具体部署启动请参考&#xff1a;RocketMQ从安装、压测到运维一站式文档_rocketmq benchmark压测-CSDN博客 RocketMq的dashboard&#xff0c;有运维页面&#xff0c;驾驶舱&#xff0c;集群页面&#xff0c;主题页面&#xff0c;消费者页面&#xff0c;生产者页面&…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...