位置: IT常识 - 正文
Linux | 将SpringBoot+Vue项目部署到服务器上
编辑：rootadmin推荐整理分享Linux | 将SpringBoot+Vue项目部署到服务器上，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
知识目录一、写在前面二、后端部署2.1 项目打包2.2 项目运行三、通过Shell脚本自动部署项目3.1 安装Git和Maven3.2 编写Shell脚本3.2 执行脚本四、前端部署4.1 安装NGINX4.2 node.js安装4.3 npm打包项目4.4 运行项目四、总结撒花一、写在前面
大家好，我是初心，咱们又见面了！今天想跟大家分享的内容是如何部署 SpringBoot+Vue的前后端分离项目到服务器上。
本篇文章收录于 初心 的 Linux教程 专栏。
🏠 个人主页：初心%个人主页 🧑 个人简介：大家好，我是初心，和大家共同努力 💕 座右铭：理想主义的花，终究会盛开在浪漫主义的土壤里！🍺🍺🍺 💕欢迎大家：这里是CSDN，我记录知识的地方，喜欢的话请三连，有问题请私信😘
首先，这里的项目是一个前后端分离项目，前端采用的主要技术栈是Vue，后端采用主要技术栈是SSM。
前端采用 npm 进行打包后部署到 nginx 服务器上，后端采用 maven 打包后直接使用 java -jar 运行项目。
二、后端部署2.1 项目打包在部署项目之前，我们要做的第一件事就是将我们编译好的代码上传到服务器上去，下面详细介绍步骤。
1.使用maven打包我们通过 Maven 提供的打包工具，对我们的SpringBoot项目进行打包。
等待打包完成，idea的Run界面就会提示打包成功。
如果打包出错了，也就是 BUILD FAILED，就要先排查问题，将问题解决之后再进行打包。
2.使用Xshell和Xftp上传 jar 包打包成功后，我们的项目 jar 包生成在了项目的 target 目录下。
将 jar 包通过 XFTP 上传到服务器上即可。
2.2 项目运行要运行任何和Java项目，JDK都是必不可少的，因此我们的第一件事就是安装JDK。
1.安装JDK关于JDK的安装，我已经安装过无数遍，大家可以参考我的这篇文章完成JDK的安装（很简单的，几步就好）Hadoop集群搭建（含JDK安装）。
2.运行项目执行Java的 jar 包最简单的命令就是：
java -jar xxx.jar（jar包）下面以我的 jar 包为例执行演示，可以看到使用这个命令已经成功启动SpringBoot项目了。
细心的朋友会发现，使用这个命令运行项目会存在一个问题，那就是我们不能再输入命令了，它占用了我们这个连接，如果通过Ctrl+C退出，那么项目也会结束运行。
有没有什么办法，可以让我们既可以运行项目，也可以继续输入其他命令完成其他工作呢？
答案是有，那就是使用 nohup 命令：
nohup java -jar xxx.jar(jar包名) &> xxx.log（日志文件） &这个命令的意思就是，将 java -jar 执行后启动的进程挂起，不占用当前窗口，并将该进程产生的日志文件放在 xxx.log 文件当中去。
3.停止项目对于使用 java -jar 启动项目，我们使用 Ctrl + C就可以停止了！那么对于悬挂项目，我们该如何停止项目？
首先使用如下命令查找进程号：
ps -ef | grep java可以看到如下的进程，其中圆圈内的就是我们项目运行的进程号：
接下来杀死进程，如果没有任何输出，就证明杀死进程了，也就是停止了项目：
kill -9 进程号如果使用 kill -9 无法杀死进程，还可以使用 kill -15 结束进程。
三、通过Shell脚本自动部署项目使用Shell脚本自动部署项目的思想是：在Linux执行脚本后，系统结束已经进行的 java -jar 进程，然后自动从远程仓库拉取代码，并使用Maven进行打包，在执行 java -jar 命令将项目运行起来。
下面是具体的环境准备与执行步骤。
3.1 安装Git和Maven由于篇幅原因，博主专门出了一期关于 如何在Linux上安装Git和Maven的教程 ，大家可以参考我的这篇文章：Linux安装Git和Maven。
3.2 编写Shell脚本下面是编写好的Shell脚本代码，文件名为RunProject.sh，大家不要盲目复制，需要修改的地方认真修改：
echo ==================echo 停止原来的工程APP_NAME = 要运行的项目名tpid = `ps -ef | grep $APP_NAME | grep -v grep | grep -v kill | awk '{print $2}'`if [ ${tpid} ] ; thenecho 'Stop Process!'kill -15 $tpidfisleep 2tpid = `ps -ef | grep $APP_NAME | grep -v grep | grep -v kill | awk '{print $2}'`if [ ${tpid} ] ; thenecho 'Kill Process!'kill -9 $tpidelse echo 'Stop Process!'fiecho 准备从Git仓库拉取最新代码cd /opt/module/yulingecho 开始从Git仓库拉取最新代码git pullecho 开始打包output=`mvn clean package -Dmaven.test.skip=true`cd targetecho 启动项目nohup java -jar 项目名-1.0-SNAPSHOT.jar &> 日志文件名.log &echo 项目启动完成3.2 执行脚本1.为用户授予执行Shell脚本的权限使用 chmod 为普通用户授予执行Shell脚本的权限：
chmod 777 RunProject.sh2.执行Shell脚本
因为仓库中的依赖很少，Maven会去下载相关的依赖，所以初次启动会比较慢，使用如下命令执行Shell脚本：
./runproject至此，使用脚本进行后端SpringBoot项目部署成功。
四、前端部署我们的前端项目部署，是将使用 npm 打包好的项目放在 nginx 服务器上运行，通过访问 nginx 对外暴露的端口即可访问到前端页面。
4.1 安装NGINXNginx 是是一个开源的，支持高性能、高并发的 Web 服务和代理服务软件。
在传统的Web项目中，并发量小，用户使用的少。所以在低并发的情况下，用户可以直接访问tomcat服务器，然后tomcat服务器返回消息给用户。
nginx特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
下面介绍如何在Centos中安装NGINX。
1.官网下载 nginx 并通过XFTP上传到Linux中这是nginx官网，可以点击这里去下载nginx安装包：nginx官方下载地址，下载成功后得到这样一个压缩包。
通过xshell加XFTP上压缩包上传到 /opt/software 目录下：
2.解压与重命名执行解压命令，将nginx解压到 /opt/module 目录下，并将文件重命名为nginx：
tar -xzvf nginx-1.20.2.tar.gz -C /opt/module/mv nginx-1.20.2 nginx3.安装需要的软件（gcc、openssl等）因为编译nginx需要使用 gcc 编译器，所以我们需要安装 gcc 和一些其他相关软件：
yum install -y openssl*yum -y install ncurses-develyum install -y gcc-c++4.安装nginx进入到nginx安装目录下，并执行编译和安装命令
cd /opt/module/nginx./configuremakemake install至此，我们的nginx就安装好了，注意，安装成功后，我们的nginx并不是在解压后的目录，而是默认在 /usr/local/ 目录下，接下来就是启动和停止nginx服务器。
进入到nginx目录：
cd /usr/local/nginx/启动nginx：
sudo sbin/nginx停止nginx：
sudo sbin/nginx -s stop4.2 node.js安装NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。
也就是说，我们只要安装了Node.Js，就已经按照 npm 包管理工具。
node.js的安装步骤比较简单，大家可以参考这篇文章：node.js安装教程。
有了node.js，我们可以在cmd使用如下命令进行验证是否安装成功：
node -vnpm -v4.3 npm打包项目首先打开cmd，进入到前端项目的根目录下，也就是vue.config.js所存在的目录下，执行安装和打包命令即可，下面是具体的步骤：
1.复制前端项目路径2.安装项目依赖npm install3.编译项目npm run serve4.打包项目npm run build如果一路顺风，那么会提示打包成功，并在根目录下生成dist目录，这个目录就是编译好的项目。如果中途出现什么报错，大家要耐心解决哦！
4.4 运行项目1.上传dist目录将前端打包生成的dist目录，上传到Linux系统中的一个目录即可，这里我是放在了 /opt/software 目录下：
2.修改nginx的配置文件 nginx.conf首先还是进入到nginx目录下的conf目录：
cd /usr/local/nginx/conf/编辑nginx.conf文件，将dist目录路径放在root后面即可：
vim nginx.conf启动nginx：
/usr/local/nginx/sbin/nginx现在，我们就可以通过 主机ip+nginx端口访问我们的前端页面了！
至此，前端部署也完成了！
四、总结撒花😎本文主要讲解了如何将SpringBoot+Vue项目分别部署到Tomcat服务器和Nginx服务器上，希望对大家有所帮助，如果还有不懂的地方，欢迎大家给我留言交流哦！😊
✨ 这就是今天要分享给大家的全部内容了，我们下期再见！😊
🏠 本文由初心原创，首发于CSDN博客， 博客主页：初心%🏠
🏠 我在CSDN等你哦！😍
上一篇：nginx部署多个前端项目(nginx部署前后端项目)
下一篇：Novel-Ai本地部署教程(novelai本地部署电脑要求)
