springboot2+vue3项目部署腾讯云（包括nginx部署不同端口的多个vue项目）

主要记录自己部署时候的过程，本人java1年小菜鸡，若有大佬看到文章多指导，如果恰巧对你也有用希望可以收到你的点赞收藏。

文章目录

目录

文章目录

前言

一、环境

二、部署步骤

1.项目打包

   1.springboot yml配置文件修改

 2.使用idea maven打包就好

2.将jar包上传到服务器中

 3.通过java -jar shopht-0.0.1-SNAPSHOT.jar 启动后端项目

4. 设置后台自启动

打包vue项目并传输至服务器

1.vue项目配置相关参数

2.vue项目打包

1.输入命令cd至/home/package目录下安装依赖和相关库：在目录下面使用命令：

2.下载nginx安装包并解压：

部署多个springboot+vue项目

1.还是先打包成dist然后上传到服务器指定位置

2.修改nginx.conf配置文件

3.结果验证

总结

---

 

---

前言

主要记录了云服务器部署sprinboot3+vue3项目的过程包括nginx多vue不同端口的配置

---

一、环境

腾讯云中购买了一台云服务器

是centos版本的, 是需要自己改一个密码的，改完之后  采用xshell连接然后手动安装需要的环境

例如mysql java nginx等 

环境部署不多说，网上资料一大堆 如环境如果有问题的可以评论或者私信我

二、部署步骤

1.项目打包

   1.springboot yml配置文件修改

  打包前先需要修改本地的和生产的配置文件

我这里是设置新建了俩个yml文件，运行本地的时候指向dev  生产打包的时候指向prod

生产prod的yml文件

我的项目中有一个一个地方使用到了文件上传所以使用的ip和端口需要从yml中引用

 2.使用idea maven打包就好

   先clean一下然后compile编译一下然后点击package打包

打包完成后会在你的target下面生成一个新的jar包

2.将jar包上传到服务器中

1.将jar包上传服务器/home/springboot/stxm路径下

 2.使用chmod 命令设置jar包的权限为可读可写可执行

chmod 777 shopht-0.0.1-SNAPSHOT.jar

 3.通过java -jar shopht-0.0.1-SNAPSHOT.jar 启动后端项目

出现下图情况则说明启动成功

4. 设置后台自启动

但是由于xshell会退出去，所以需要把他设置为默认自启动，不能因为他退出了就不启动了我们是直接通过java启动的，而关闭xshell后会关闭调该命令终端。我们需要让jar在后台运行，我们通过以下命令使其在后台运行

下面俩个执行一个就行 ， 我这里用的是第一个

nohup java -jar demo-0.0.1-SNAPSHOT.jar &

nohup java -jar back_76pl-0.0.1-SNAPSHOT.jar >nohup.out &

//查看日志

tail -500f nohup.out

查看是否已启动 

ps -ef | grep java

接口测试也是通的通过服务器公网ip + 端口号+请求正确访问到了接口数据

至此后端springboot项目部署成功！

若有小伙伴不小心出现端口占用情况的话：

可以参考下面：

打包vue项目并传输至服务器

1.vue项目配置相关参数

在vue>public>static>下面新建config.js 配置ip可以在vue界面中全局使用

例如文件的接口就使用到了IP

vueconfig.js中配置了相关跨域

2.vue项目打包

idea终端中使用cd进入vue项目根目录 记得打包前先删除项目下的dist文件
输入命令npm run build打包vue项目

打包成功后：

3.安装nginx 并在配置文件中配置项目入口映射

安装教程如下：

1.输入命令cd至/home/package目录下安装依赖和相关库：
在目录下面使用命令：

 yum -y install gcc-c++ zlib-devel openssl-devel libtool

2.下载nginx安装包并解压：

输入命令 cd /usr/local 然后执行如下命令：

下载：

wget http://nginx.org/download/nginx-1.14.0.tar.gz

解压：

tar -zxvf nginx-1.14.0.tar.gz

3.配置和安装

继续在文件夹 /usr/local下输入命令

cd nginx-1.14.0

./configure --prefix=/usr/local/nginx

make && make install

4.启动nginx：

还是在那个目录下 cd ../nginx/sbin

./nginx

5.查看nginx并修改location:

     ps -ef | grep nginx

 前端如果改配置需要在usr/local/nginx/sbin下面输入命令 ./nginx -s reload 命令启动

他的配置文件在usr/local/nginx/conf下面

相关配置：

6.停止和重启命令

./nginx -s reload #重启

./nginx -s stop #关闭

查看界面：

 部署成功！

部署多个springboot+vue项目

springboot项目只需要把端口号改变一下，步骤上面一样。

主要记录nginx怎么配置映射多个vue项目

采用的是多端口配置vue的项目

1.还是先打包成dist然后上传到服务器指定位置

2.修改nginx.conf配置文件

nginx配置文件路径 /usr/local/nginx/conf/nginx.conf

下面是默认的nginx80端口配置的请求下面

新加的项目部署的配置在下面，其实就把server 80的代码块重新复制了一份改了相关的路径

重点注意的地方我下面截图已标注

改完之后记得重启nginx

在目录 /usr/local/nginx/sbin下面输入命令

./nginx -s reload  #重启

3.结果验证

默认之前配置的80端口展示的界面

90端口展示的界面

70端口展示的界面

 至此项目就部署完成了！

---

总结

以上就是今天要讲的内容，记录了云服务部署springBoot2+vue3项目的部署过程，并且做了nginx配置多个项目的配置。从中遇到很多问题，不要放弃多在网上查找资料，一定会成功的！