今天我就來手把手教小伙伴們部署 TienChin 項(xiàng)目，一起把這個(gè)項(xiàng)目跑起來，看看到底是個(gè)什么樣的項(xiàng)目。

小伙伴們知道，對(duì)于這種前后端分離的項(xiàng)目，我們在實(shí)際部署的時(shí)候，可以按照前后端分離的方式來部署，也可以按照前后端不分的方式來部署。接下來兩種不同的部署方式我都和小伙伴們來分享一下。

1. 前后端分離部署

1.1 部署架構(gòu)圖

前后端分離部署的話，我們一般是需要一個(gè) Nginx 服務(wù)器，我先畫一個(gè)簡單的部署示意圖給大家參考下：

簡單解釋一下就是這樣：

1. 瀏覽器發(fā)出請求。
2. 請求首先到達(dá) Nginx 服務(wù)器，Nginx 服務(wù)器，由 Nginx 服務(wù)器進(jìn)行請求分發(fā)。
3. 如果是一個(gè)靜態(tài)資源請求，則 Nginx 將之轉(zhuǎn)發(fā)到靜態(tài)資源服務(wù)器上，一般可能由 Nginx 自己兼任靜態(tài)資源服務(wù)器，也就是直接從 Nginx 自己硬盤上將數(shù)據(jù)讀取出來。
4. 如果是一個(gè)動(dòng)態(tài)資源，則 Nginx 將之轉(zhuǎn)發(fā)到 Tomcat 上，對(duì)于我們這里就是我們的 Spring Boot 服務(wù)上了，當(dāng)然，如果你沒有這么多服務(wù)器，我們可以將 Nginx 和 Spring Boot 部署到同一臺(tái)服務(wù)器上。

好了，這就是我們的大致的一個(gè)部署架構(gòu)圖了，很簡單。

1.2 準(zhǔn)備工作

接下來有幾個(gè)事情是需要我們提前準(zhǔn)備的。

首先我們先在服務(wù)器上安裝好 MySQL 和 Redis，這個(gè)具體怎么安裝我這里就不啰嗦了，基操而已。

MySQL 建議大家用 Docker 安裝，省事。如果不懂 Docker，可以在公眾號(hào)后臺(tái)回復(fù) Docker 有松哥寫的入門教程；Redis 可以直接安裝，松哥在之前的 vhr 系列教程中包含有 Redis 教程，可以公眾號(hào)后臺(tái)回復(fù) vhr 查看詳情。

這樣我們的準(zhǔn)備工作就完成了。

1.3 開始部署

1.3.1 拉取項(xiàng)目

首先我們需要從 GitHub 上拉取我們的項(xiàng)目，TienChin 項(xiàng)目的源代碼是開源的，大家可以直接 Clone：

• https://github.com/lenve/tienchin

直接執(zhí)行 git clone 即可。

拉取下來之后，有兩個(gè)文件夾：

• tienchin 是服務(wù)端代碼。
• tienchin-ui 是前端代碼。

1.3.2 修改配置

首先我們創(chuàng)建一個(gè)名為 tienchin 的數(shù)據(jù)庫，這個(gè)好說。

接下來，我們找到 tienchin/sql/tienchin-video_2023-03-13.sql 文件，在 tienchin 數(shù)據(jù)庫中執(zhí)行該腳本。

接下來，我們找到 tienchin/tienchin-admin/src/main/resources/application-druid.yml 文件，在該文件中，根據(jù)自己的實(shí)際情況，修改數(shù)據(jù)庫連接地址、數(shù)據(jù)庫名稱、用戶名和密碼。

繼續(xù)打開 tienchin/tienchin-admin/src/main/resources/application.yml 文件，在該文件中配置 Redis 的地址、密碼等信息。

另外還有一個(gè)非常重要的配置也需要修改，就是在 tienchin/tienchin-admin/src/main/resources/application.yml? 文件中，將 server.servlet.context-path? 的值改為 /prod-api。

1.3.3 服務(wù)端打包

接下來我們進(jìn)行服務(wù)端打包。小伙伴們需要在自己電腦上安裝好 Maven 并且配置好環(huán)境變量，這也是基本操作，我就不啰嗦了。

如果電腦上還沒有配置 Maven 的話，建議使用 IDEA 自帶的 Maven 插件，就不用額外下載了。IDEA 自帶的 Maven 插件在安裝目錄下的 plugins/maven 目錄下，可以直接配置這里的 bin 目錄到環(huán)境變量中即可。

服務(wù)端打包我們就進(jìn)入到 tienchin 目錄下，然后執(zhí)行如下代碼即可：

mvn package -Dmaven.test.skip=true

看到如下代碼就表示編譯成功了：

編譯成功之后，在 tienchin/tienchin-admin/target? 目錄下，可以看到一個(gè)名為 tienchin-admin.jar 的 jar 文件，這就是我們所需要的服務(wù)端代碼。

1.3.4 前端打包

接下來進(jìn)入到 tienchin-ui 目錄下，執(zhí)行如下命令安裝依賴（注意，前端需要 NodeJS 至少 14 往上的版本）：

npm install

然后再執(zhí)行如下命令進(jìn)行編譯打包：

npm run build:prod

打包完成后，會(huì)生成 dist 目錄，里邊的文件就是我們所需要的靜態(tài)資源文件：

這樣，前端代碼就打包完成了。

1.3.5 安裝 Nginx

接下來我們來安裝 Nginx，我這里直接下載 Nginx 源碼進(jìn)行編譯安裝，步驟如下：

1. 首先安裝如下兩個(gè)編譯工具

yum install -y zlib-devel
yum -y install pcre pcre-devel

2. 下載 Nginx 源碼并解壓。

wget https://nginx.org/download/nginx-1.22.1.tar.gz
tar -zxvf nginx-1.22.1.tar.gz

3. 編譯安裝

進(jìn)入到 nginx 解壓目錄中，分別執(zhí)行如下命令進(jìn)行編譯安裝：

./configure
make
make install

如此之后，我們的 Nginx 就安裝好了。

1.3.6 配置 Nginx

接下來我們首先通過命令或者文件上傳工具，先把剛剛打包的后端的 tienchin-admin.jar 和前端的 dist 目錄上傳到服務(wù)器上面來。

接下來，我們首先啟動(dòng)服務(wù)端這個(gè) tienchin-admin.jar：

nohup java -jar tienchin-admin.jar > tienchin.log &

有的小伙伴在服務(wù)端部署的時(shí)候，會(huì)拋出如下異常：

這個(gè)是因?yàn)榉?wù)端缺乏相應(yīng)的字體，而 Flowable 在自動(dòng)生成部署圖片的時(shí)候，需要用到這些字體，所以我們安裝需要的字體即可：

yum install fontconfig
fc-cache --force

服務(wù)端啟動(dòng)成功之后，我們先用 postman 測試一下登錄接口，確保能運(yùn)行，就說明服務(wù)端部署成功：

能成功登錄，就說明服務(wù)端部署成功。

接下來部署前端。

前端部署很簡單，我們只需要將 dist 中的內(nèi)容拷貝到 nginx 的 html 目錄下即可，命令如下：

cp dist/* /usr/local/nginx/html/

接下來執(zhí)行如下命令啟動(dòng) nginx：

/usr/local/nginx/sbin/nginx

nginx 啟動(dòng)成功之后，就可以瀏覽器中訪問頁面了：

當(dāng)然，現(xiàn)在還登錄不了，因?yàn)檫€缺少 Nginx 的請求轉(zhuǎn)發(fā)，現(xiàn)在當(dāng)我們請求 Nginx 的時(shí)候可以看到前端頁面，但是服務(wù)端的數(shù)據(jù)請求，Nginx 并不會(huì)自動(dòng)轉(zhuǎn)發(fā)到 Spring Boot 上面去，所以還需要我們繼續(xù)配置 Nginx，Nginx 配置文件的位置在 /usr/local/nginx/conf/nginx.conf，我們增加如下配置：

location /prod-api {
       proxy_pass http://127.0.0.1:8080;
       tcp_nodelay     on;
       proxy_set_header Host            $host;
       proxy_set_header X-Real-IP       $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
       root /usr/local/nginx/html/;
       expires 30d;
       try_files $uri $uri/ /index.html;
}

這里有幾個(gè)配置參數(shù)的含義，我給大家稍微解釋下：

• try_files：由于我們的前端 Vue 導(dǎo)航是 history 模式，這個(gè)不同于 vhr 的 hash 模式，history 模式會(huì)把請求路徑發(fā)到 Nginx 上去找，很明顯 Ngnix 找不到這樣的路徑，所以 try_files 就是說如果 404 了，就默認(rèn)展示 index.html 頁面即可，然后具體的路由導(dǎo)航由 vue-router 去完成。
• tcp_nodelay：啟動(dòng) TCP_NODELAY，其實(shí)就是禁用 Nagle 算法，允許小包的發(fā)送。對(duì)于延時(shí)敏感型，同時(shí)數(shù)據(jù)傳輸量比較小的應(yīng)用，開啟 TCP_NODELAY 選項(xiàng)無疑是一個(gè)正確的選擇。Nagle 算法是先把數(shù)據(jù)緩存起來，攢到一塊發(fā)送。

配置完成后，重啟 Nginx：

/usr/local/nginx/sbin/nginx -s reload

好啦，這次重啟之后，就可以順利玩耍啦～

2. 前后端不分部署

前后端不分部署相對(duì)就簡單一些，不需要 Nginx 了，不過前面 1.3.1-1.3.4 也是需要的。

1.3.4 小節(jié)中，我們拿到前端編譯打包后的內(nèi)容后，直接放到 tienchin-admin 模塊的 static 靜態(tài)資源目錄下，然后繼續(xù)將服務(wù)端打成 jar 包，將 jar 包上傳到服務(wù)器并啟動(dòng)即可，啟動(dòng)命令和 1.3.6 小節(jié)介紹的 jar 包啟動(dòng)命令一致，這個(gè)過程比較簡單，涉及到的相關(guān)命令前面都有介紹，我就不重復(fù)展示了。