【前后端分离项目部署】关于“vue3+SpringBoot+阿里云服务器+宝塔操作”的打包部署全流程配置

最新推荐文章于 2024-06-23 21:46:17 发布

橘子吨

最新推荐文章于 2024-06-23 21:46:17 发布

阅读量1.5k

点赞数

文章标签： spring boot 阿里云服务器 vue.js

本文链接：https://blog.csdn.net/m0_60935824/article/details/133918912

版权

前端项目打包

项目写好后，在终端输入npm run 命令，命令可在package.json文件中找到，如图所示：

eg. npm run build:prod
打包成功后可以看见项目中多了一个dist文件夹，里面内容大概是这些

后端项目打包

在IDEA的右侧找到Maven，先点击clean等运行结束再点击package，等待运行完成
打包好后会生成一个target文件夹，进去之后会有一个jar包，如图所示：
关于后端端口号，在application.yml文件中进行配置

OK,打包的事情结束之后，我们进入部署

第一步：先把前后端打包的东西放到云服务器上

一般就是放 /www/wwwroot/项目名/下面
再在文件夹下面分别创建存放前后端项目的两个文件夹，可以是这样创建：
在backend文件夹中拖入后端打包好的jar包（上述打包流程中后端打包的2中有展示），并创建error.txt和out.txt，如下图所示：
在front文件夹中拖入前端打包好的dist文件夹，建议先压缩再上传，懂得都懂，上传好后进行压缩包的解压，并把解压后dist文件夹中的东西拖到同级目录下，如图所示：

在这里插入图片描述

第二步：配置nginx反向代理

在/www/server/panel/vhost/nginx文件夹中新建一个项目名.conf文件，并写入以下配置：

server{
       listen 9096;//监听的端口号，例如在浏览器中输入192.168.25.26:9096,则会被nginx代理转向我们指定的文件上
        server_name 192.168.25.26;//服务器IP地址
        location / {
		root /www/wwwroot/crew_server/front/;//前端入口文件index.html所在目录
             	try_files $uri $uri/ /index.html;
                index index.html index.htm;
        }
	location /base {//和前端约定好的代理标志，用来处理后端接口数据
            rewrite ^/base/(.*)$ /$1 break; #获取/api后面的uri进行重定向
            proxy_pass http://192.168.25.26:9001; # 实际后端服务地址
        }
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico|svg|html|woff|eot|)$ {
        root /www/wwwroot/crew_server/front;
        expires 30d;
}
}

第三步：启动后端服务

nohup 命令就是在关闭终端时，不关闭这个进程

nohup java -jar /www/wwwroot/crew_server/backend/crew_server_backend.jar > /www/wwwroot/crew_server/backend/out.txt 2> /www/wwwroot/crew_server/backend/error.txt &

查看后端服务启动了没：lsof -i:后端服务端口号
结束后端服务：kill PID
如2里面PID为3708659，所以想结束这个服务，就通过kill 3708659实现