首页 前端知识 Spring vue 项目部署(全网最详细教程_含内网穿透部署)

Spring vue 项目部署(全网最详细教程_含内网穿透部署)

2024-04-15 21:04:09 前端知识 前端哥 611 408 我要收藏

本项目以Springboot 2.7.11和vue2做参考示例


第一步

展示前后端代码的成品

前端Vue

后端Java

项目写完后,差不多就是这个样子,仅供参考!


第二步

开始打包前后端项目

前端打包的方式有以下几种:

方法1:

#直接打包,简单明了,这个会在你的项目里面出现一个dist的打包文件


npm run build
方法2:

#选择打包路径,可以指定你打包的路径

npm run build -- --dest /path/to/java/project      #/path/to/java/project指定你的目录
方法3:

#使用IDEA开发工具进行打包

后端打包

安装成功后就会多出以下目录

        

 admin-0.0.1-SNAPSHOT.jar         这个就是后端打包的jar包


第三步

开始部署项目,部署项目这里有2个方法

方法1:合并部署

就是把前端打包好的静态文件放到你的java工程目录下src/main/resources/static

注意:这个是静态是指dist目录下,不要把dist这级目录一起拷贝过来了

然后就是直接打包你的项目就行,打开的你的虚拟机或服务器把jar放到一个目录里面,然后运行它

启动命令有2种

#前台启动
java -jar xxx.jar
	
#后台启动
nohup java -jar xxx.jar &

后台启动如何关闭运行的项目

#查找有关java的进程
ps -ef|grep java

#关闭进程
kill -9 pid

这个方法比较简单,不需要使用nginx代理

方法2:分离部署

就是前后端分开单独部署

首先和上面一样,先打包好前后端项目,见dist前端资源文件夹和后端jar包文件放在一个目录(与可以不放到一起,主要方便找)

后端正常启动,前端使用nginx代理,找到你的nginx.conf目录,在你的另一个server结尾加上这个服务器的配置

#服务器
server{
    listen 8080;
    server_name 127.0.0.1; #你的服务器ip或域名
     
	#前端
    location / {
        root /usr/local/code_jar/dist;
        index index.html index.htm;
        try_files $uri $uri /index.html;
    }
	#后端
    location /api{
        proxy_pass http://127.0.0.1:8081/; #后端接口地址
    }
}

注意: try_files $uri $uri /index.html;这个根据你的vue路由模式可选择是否需要,用来解决history模式下,刷新路由404

补充一下,如果前后端都没有使用统一路径,像/api这样的话,可以用2个分开写

这样就算成功了,可以直接访问到你的项目了


内网穿透部署

如果没有服务器,就可以使用,以下方法来解决!!!

注意事项:内网穿透是让你的内网ip暴露在公网,是很不安全,仅限个人测试比较好。

我这这里使用的内网穿透工具是花生壳+NATAPP,这里我使用了2个内网穿透工具的原因就是前后端分离项目需要分别穿透前后端(这2个工具都有免费的通道,供大家使用!)

比如,我的前端端口是8080,后端端口是8081,分别穿透后,花生壳会给出一个HTTPS的域名,

NATAPP给出一个HTTP的域名,然后前端的接口地址要使用后端穿透的域名

如果不想改,也可以使用nginx代理,来转发给后端,这里方法和上面差不多,就不细说了

另外穿透前端vue后,访问页面出现这个 invalid host header

解决方案:

在你的vue.config,js里面加上

 devServer: {
    disableHostCheck:true,
};

如果你是vue-cli5就加这个,如果使用就会报错找不到这个属性,因为已经弃用了

 devServer: {
    historyApiFallback: true, //启用历史记录API回退
    allowedHosts: "all", //允许的主机
};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4994.html
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!