一、寫在前面
大家好，我是初心，咱們又見面了！今天想跟大家分享的內容是如何部署 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.運行項目
執(zhí)行Java的 jar 包最簡單的命令就是：
java -jar xxx.jar（jar包）
下面以我的 jar 包為例執(zhí)行演示，可以看到使用這個命令已經成功啟動SpringBoot項目了。
細心的朋友會發(fā)現(xiàn)，使用這個命令運行項目會存在一個問題，那就是我們不能再輸入命令了，它占用了我們這個連接，如果通過Ctrl+C退出，那么項目也會結束運行。
有沒有什么辦法，可以讓我們既可以運行項目，也可以繼續(xù)輸入其他命令完成其他工作呢？
答案是有，那就是使用 nohup 命令：
nohup java -jar xxx.jar(jar包名) &> xxx.log（日志文件） &
這個命令的意思就是，將 java -jar 執(zhí)行后啟動的進程掛起，不占用當前窗口，并將該進程產生的日志文件放在 xxx.log 文件當中去。
- 3.停止項目
對于使用 java -jar 啟動項目，我們使用 Ctrl + C就可以停止了！那么對于懸掛項目，我們該如何停止項目？
首先使用如下命令查找進程號：
ps -ef | grep java
可以看到如下的進程，其中圓圈內的就是我們項目運行的進程號：
接下來殺死進程，如果沒有任何輸出，就證明殺死進程了，也就是停止了項目：
kill -9 進程號
如果使用 kill -9 無法殺死進程，還可以使用 kill -15 結束進程。
三、通過Shell腳本自動部署項目
使用Shell腳本自動部署項目的思想是：在Linux執(zhí)行腳本后，系統(tǒng)結束已經進行的 java -jar 進程，然后自動從遠程倉庫拉取代碼，并使用Maven進行打包，在執(zhí)行 java -jar 命令將項目運行起來。
下面是具體的環(huán)境準備與執(zhí)行步驟。
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} ] ; then
echo 'Stop Process!'
kill -15 $tpid
fi
sleep 2
tpid = `ps -ef | grep $APP_NAME | grep -v grep | grep -v kill | awk '{print $2}'`
if [ ${tpid} ] ; then
echo 'Kill Process!'
kill -9 $tpid
else
echo 'Stop Process!'
fi
echo 準備從Git倉庫拉取最新代碼
cd /opt/module/yuling
echo 開始從Git倉庫拉取最新代碼
git pull
echo 開始打包
output=`mvn clean package -Dmaven.test.skip=true`
cd target
echo 啟動項目
nohup java -jar 項目名-1.0-SNAPSHOT.jar &> 日志文件名.log &
echo 項目啟動完成
3.2 執(zhí)行腳本
- 1.為用戶授予執(zhí)行Shell腳本的權限
使用 chmod 為普通用戶授予執(zhí)行Shell腳本的權限：
chmod 777 RunProject.sh
- 2.執(zhí)行Shell腳本
因為倉庫中的依賴很少，Maven會去下載相關的依賴，所以初次啟動會比較慢，使用如下命令執(zhí)行Shell腳本：
./runproject
至此，使用腳本進行后端SpringBoot項目部署成功。
四、前端部署
我們的前端項目部署，是將使用 npm 打包好的項目放在 nginx 服務器上運行，通過訪問 nginx 對外暴露的端口即可訪問到前端頁面。
4.1 安裝NGINX
Nginx 是是一個開源的，支持高性能、高并發(fā)的 Web 服務和代理服務軟件。
在傳統(tǒng)的Web項目中，并發(fā)量小，用戶使用的少。所以在低并發(fā)的情況下，用戶可以直接訪問tomcat服務器，然后tomcat服務器返回消息給用戶。
nginx特點是占有內存少，并發(fā)能力強，事實上nginx的并發(fā)能力確實在同類型的網頁服務器中表現(xiàn)較好，中國大陸使用nginx網站用戶有：百度、京東、新浪、網易、騰訊、淘寶等。
下面介紹如何在Centos中安裝NGINX。
- 1.官網下載 nginx 并通過XFTP上傳到Linux中
這是nginx官網，可以點擊這里去下載nginx安裝包：nginx官方下載地址，下載成功后得到這樣一個壓縮包。
通過xshell加XFTP上壓縮包上傳到 /opt/software 目錄下：
- 2.解壓與重命名
執(zhí)行解壓命令，將nginx解壓到 /opt/module 目錄下，并將文件重命名為nginx：
tar -xzvf nginx-1.20.2.tar.gz -C /opt/module/
mv nginx-1.20.2 nginx
- 3.安裝需要的軟件（gcc、openssl等）
因為編譯nginx需要使用 gcc 編譯器，所以我們需要安裝 gcc 和一些其他相關軟件：
yum install -y openssl*
yum -y install ncurses-devel
yum install -y gcc-c++
- 4.安裝nginx
進入到nginx安裝目錄下，并執(zhí)行編譯和安裝命令
cd /opt/module/nginx
./configure
make
make install
至此，我們的nginx就安裝好了，注意，安裝成功后，我們的nginx并不是在解壓后的目錄，而是默認在 /usr/local/ 目錄下，接下來就是啟動和停止nginx服務器。
進入到nginx目錄：
cd /usr/local/nginx/
啟動nginx：
sudo sbin/nginx
停止nginx：
sudo sbin/nginx -s stop
4.2 node.js安裝
NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題。
也就是說，我們只要安裝了Node.Js，就已經按照 npm 包管理工具。
node.js的安裝步驟比較簡單，大家可以參考這篇文章：node.js安裝教程。
有了node.js，我們可以在cmd使用如下命令進行驗證是否安裝成功：
node -v
npm -v
4.3 npm打包項目
首先打開cmd，進入到前端項目的根目錄下，也就是vue.config.js所存在的目錄下，執(zhí)行安裝和打包命令即可，下面是具體的步驟：
- 1.復制前端項目路徑
- 2.安裝項目依賴
npm install
- 3.編譯項目
npm run serve
- 4.打包項目
npm run build
如果一路順風，那么會提示打包成功，并在根目錄下生成dist目錄，這個目錄就是編譯好的項目。如果中途出現(xiàn)什么報錯，大家要耐心解決哦！
4.4 運行項目
- 1.上傳dist目錄
將前端打包生成的dist目錄，上傳到Linux系統(tǒng)中的一個目錄即可，這里我是放在了 /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
現(xiàn)在，我們就可以通過 主機ip+nginx端口訪問我們的前端頁面了！
至此，前端部署也完成了！
四、總結撒花
??本文主要講解了如何將SpringBoot+Vue項目分別部署到Tomcat服務器和Nginx服務器上，希望對大家有所幫助，如果還有不懂的地方，歡迎大家給我留言交流哦！??
? 這就是今天要分享給大家的全部內容了，我們下期再見！??
?? 本文由初心原創(chuàng)，首發(fā)于CSDN博客， 博客主頁：初心%??
?? 我在CSDN等你哦！??
文章來源：http://www.zghlxwxcb.cn/news/detail-443206.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-443206.html
到了這里，關于Linux | 將SpringBoot+Vue項目部署到服務器上的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
