前言

給大家分享以下我是如何部署 SpringBoot + Vue 前后端分離的項(xiàng)目的，我用的 Linux 發(fā)行版是 CentOS7.5

有了一個(gè)基于 ElementUI 的電商后臺(tái)管理系統(tǒng)，在開發(fā)一個(gè)相似的后臺(tái)就會(huì)輕松很多。不過前面的系統(tǒng)的后端是使用 node 完成的，對(duì)于我們 Java 開發(fā)者來說，用不到。我學(xué)習(xí)的是 ElementUI 的使用，就足夠了，然后后端服務(wù)就全部可以自己使用 SpringBoot 來完成

最近貌似 Vue3 正式版也發(fā)布了，正好有空看可以去看一看

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、Vue 打包的項(xiàng)目如何部署？

1.1 Vue 項(xiàng)目打包

溫馨提示：如果你的電腦上沒有裝 vue 環(huán)境的話，請(qǐng)先安裝好 node，下面使用 Express（一個(gè) http 框架，提供了快速搭建服務(wù)器的功能） 也是基于 node 的。具體安裝方法請(qǐng)自行百度，我這里就不介紹如何安裝了

我的項(xiàng)目是使用 vue cli4 搭建的，使用腳手架搭建的項(xiàng)目，如果不知道自己的 vue cli 是什么版本的，可以輸入如下命令進(jìn)行查看

vue -V

使用腳手架搭建好處，就是什么都是可視化的，一鍵啟動(dòng)項(xiàng)目，一鍵編譯項(xiàng)目，安裝依賴也會(huì)變的非常非常的方便。效果圖如下

我們 點(diǎn)擊 build ，然后運(yùn)行，等待項(xiàng)目構(gòu)建完成之后，就可以在項(xiàng)目根路徑生成一個(gè)dist 文件夾，這個(gè)文件就存放著我們 vue 項(xiàng)目打包好的所有內(nèi)容

1.2 使用 Express 代理靜態(tài)資源文件

當(dāng)然代理靜態(tài)資源還有很多種方法，這是一種我認(rèn)為比較輕松的方案，那么要如何來做呢？

提示：無論是 Linux 環(huán)境還是 Windows 環(huán)境，以下方案是通用的（前提是你已經(jīng)安裝好了 node 以及 npm，我們要用npm 包安裝環(huán)境）

• 創(chuàng)建一個(gè)新的文件夾比如 ：myapp mkdir myapp然后進(jìn)入該文件夾 ：cd myapp
• 然后初始化 node 環(huán)境：npm init ，
• 然后它會(huì)讓你自己選擇配置一些 JSON 信息
• 然后安裝 Express 環(huán)境：npm install express --save ，-- save 表示僅在當(dāng)前環(huán)境使用。這里也會(huì)提示你創(chuàng)建一個(gè) js 文件，你可以忽略，也可以創(chuàng)建
• 然后創(chuàng)建 app.js 文件：touch app.js ，和 dist 文件夾在同一個(gè)目錄哦
• 編寫 Express 代理靜態(tài)資源的代碼，windows 環(huán)境用文本編輯器，Linux 環(huán)境用 vim 編輯器

const express = require('express')
const app = express()

// 代理靜態(tài)資源
app.use(express.static('./dist'))

// 監(jiān)聽 4000 端口作為資源的訪問路徑
app.listen(4000, () => {
 console.log('server running at http://127.0.0.1:4000')
})

編輯完畢，保存代碼我們使用一個(gè)項(xiàng)目管理的工具包 pm2

windows 同理

安裝這個(gè)我們可以實(shí)時(shí)查看項(xiàng)目的情況

使用這個(gè)，我們就不必用 node app.js 運(yùn)行項(xiàng)目了，這樣直接運(yùn)行的弊端就是當(dāng)你關(guān)閉 shell 或者 Linux shell 項(xiàng)目也會(huì)自動(dòng)關(guān)閉。這樣項(xiàng)目管理就會(huì)非常的方便哦

二、SpringBoot 項(xiàng)目如何部署？

2.1 數(shù)據(jù)庫部署可能出現(xiàn)的問題

• 首先要確保我們的服務(wù)器上安裝了 mysql 數(shù)據(jù)庫
• 然后就是數(shù)據(jù)庫的相關(guān)配置，設(shè)置遠(yuǎn)程訪問等等
• 數(shù)據(jù)庫默認(rèn)是不支持遠(yuǎn)程連接的，如果需要請(qǐng)放開，設(shè)置 % 就代表運(yùn)行外部用戶訪問

mysql> update mysql.user set host='%' where user='root' and host='localhost';
mysql> FLUSH PRIVILEGES;

// 如果上面不起效果，請(qǐng)輸入這條命令，應(yīng)該就可以解決遠(yuǎn)程訪問的問題了
mysql> grant all privileges on *.* to root@'%' identified by '你的數(shù)據(jù)庫登錄密碼';

2.2 SpringBoot 項(xiàng)目打包上傳

通過在網(wǎng)上查找，我們得知 SpringBoot 項(xiàng)目打包有兩種方式。

• 使用內(nèi)嵌 Tomcat 直接運(yùn)行
• 不使用內(nèi)嵌 Tomcat，將項(xiàng)目打包成 war 包，部署到 Tomcat 運(yùn)行

第二種方案我在 Java EE 階段使用過，現(xiàn)在使用第一種

打包項(xiàng)目我們要在 maven 的 pom 依賴種添加如下插件

<build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>

打開你的 Idea，點(diǎn)擊右邊的 package 即可完成打包，生成的文件在 target 目錄里面

然后我們可以通過命令，直接在命令行運(yùn)行項(xiàng)目。

java -jar xxx.jar 

java -jar xxxx.war

三、服務(wù)器配置

3.1 SpringBoot 項(xiàng)目在 Linux 環(huán)境啟動(dòng)與停止

在這里將我們打包好的 SpringBoot 項(xiàng)目和 vue 項(xiàng)目上傳到服務(wù)器中。

vue 項(xiàng)目就按照上面的步驟， windows 平臺(tái)和 Linux 平臺(tái)是通用的。

我們知道 java -jar 運(yùn)行項(xiàng)目很方便，但是同樣會(huì)遇到一個(gè)問題，那就是 Linux Shell 關(guān)閉時(shí)，服務(wù)也關(guān)閉了，因此我們要使用腳本保證我們的這個(gè)進(jìn)程（SpringBoot 服務(wù)）在后臺(tái)也能保持運(yùn)行。

我們編寫一段 bash 腳本，我們只需要將 demo-0.0.1-SNAPSHOT 替換成你自己導(dǎo)出的 jar 包即可

#!/bin/sh
nohup java -jar demo-0.0.1-SNAPSHOT.jar &

這里的&不能省略 ，表示守護(hù)進(jìn)程的意思，及這個(gè)進(jìn)程可以運(yùn)行在后臺(tái)。

保存，運(yùn)行腳本

sh startup.sh

ps： 如果這里執(zhí)行不了命令，需要給這個(gè)文件夾賦予讀寫的權(quán)限 chmod 777 *

查看進(jìn)程是否在運(yùn)行

ps -ef | grep java

找到項(xiàng)目名稱的，第一列就是你的 pid
輸入 kill -9 pid 即可停止你的java 項(xiàng)目

3.2 Nginx 反向代理 SpringBoot 服務(wù)

鑒于一些業(yè)務(wù)需要使用 https 服務(wù)，所以我們需要將我們的后端服務(wù)反向代理成 https 服務(wù)。

前提是，我們假設(shè)你已經(jīng)配置好了下面的環(huán)境，如果不會(huì)請(qǐng)移步Nginx 的安裝及 SSL 配置

• 你已經(jīng)在裝了 Nginx 服務(wù)器
• 你已經(jīng)配置好了 SSL 證書，并實(shí)現(xiàn)了 https 服務(wù)，如果你不會(huì)，可以i查看這篇文章

在 http 里面配置后端服務(wù)的代稱，SpringBoot 項(xiàng)目的代稱不可以使用 ‘_'

upstream tikuApiServer {
 	server 127.0.0.1:9999;
 }

然后在 server 為 443 的服務(wù)中這樣配置

 server {
 listen 443 ssl http2 default_server;
 listen [::]:443 ssl http2 default_server;
 server_name 你的域名;
 root https 項(xiàng)目的路徑;
 index index.html index.htm;
#
 ssl_certificate "證書.crt";
 ssl_certificate_key "證書.key";
 ssl_session_cache shared:SSL:1m;
 ssl_session_timeout 10m;
 ssl_ciphers HIGH:!aNULL:!MD5;
 ssl_prefer_server_ciphers on;

 # Load configuration files for the default server block.
 include /etc/nginx/default.d/*.conf;
 include mime.types;
		default_type application/octet-stream;
		
		// ================== 在這里 =====================
 location /tiku/ {
 	proxy_pass http://tikuApiServer/api/v1/;
 }

 error_page 404 /404.html;
 location = /40x.html {
 }

 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 }
 }

這樣我們的后端 API 就可以直接訪問 https://域名/tiku/xxxx 就好了

總結(jié)

提示：這里對(duì)文章進(jìn)行總結(jié)：

1. 前后端分離 SpirngBoot + Vue 集成部署
2. bash 腳本編寫（守護(hù)進(jìn)程運(yùn)行項(xiàng)目）
3. mysql 遠(yuǎn)程訪問

到此這篇關(guān)于SpringBoot + Vue 項(xiàng)目部署上線到Linux 服務(wù)器的文章就介紹到這了,更多相關(guān)SpringBoot + Vue 部署Linux 服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論