今天我就來手把手教小夥伴們部署 TienChin 項目，一起把這個項目跑起來，看看到底是個什麼樣的項目。
小夥伴們知道，對於這種前後端分離的項目，我們在實際部署的時候，可以按照前後端分離的方式來部署，也可以按照前後端不分的方式來部署。接下來兩種不同的部署方式我都和小夥伴們來分享一下。
1. 前後端分離部署
1.1 部署架構圖
前後端分離部署的話，我們一般是需要一個 Nginx 服務器，我先畫一個簡單的部署示意圖給大家參考下：
簡單解釋一下就是這樣：
- 瀏覽器發出請求。
- 請求首先到達 Nginx 服務器，Nginx 服務器，由 Nginx 服務器進行請求分發。
- 如果是一個靜態資源請求，則 Nginx 將之轉發到靜態資源服務器上，一般可能由 Nginx 自己兼任靜態資源服務器，也就是直接從 Nginx 自己硬盤上將數據讀取出來。
- 如果是一個動態資源，則 Nginx 將之轉發到 Tomcat 上，對於我們這裏就是我們的 Spring Boot 服務上了，當然，如果你沒有這麼多服務器，我們可以將 Nginx 和 Spring Boot 部署到同一台服務器上。
好了，這就是我們的大致的一個部署架構圖了，很簡單。
1.2 準備工作
接下來有幾個事情是需要我們提前準備的。
首先我們先在服務器上安裝好 MySQL 和 Redis，這個具體怎麼安裝我這裏就不囉嗦了，基操而已。
MySQL 建議大家用 Docker 安裝，省事。如果不懂 Docker，可以在公眾號後台回覆 Docker 有鬆哥寫的入門教程；Redis 可以直接安裝，鬆哥在之前的 vhr 系列教程中包含有 Redis 教程，可以公眾號後台回覆 vhr 查看詳情。
這樣我們的準備工作就完成了。
1.3 開始部署
1.3.1 拉取項目
首先我們需要從 GitHub 上拉取我們的項目，TienChin 項目的源代碼是開源的，大家可以直接 Clone：
- https://github.com/lenve/tienchin
直接執行 git clone 即可。
拉取下來之後，有兩個文件夾：
- tienchin 是服務端代碼。
- tienchin-ui 是前端代碼。
1.3.2 修改配置
首先我們創建一個名為 tienchin 的數據庫，這個好説。
接下來，我們找到 tienchin/sql/tienchin-video_2023-03-13.sql 文件，在 tienchin 數據庫中執行該腳本。
接下來，我們找到 tienchin/tienchin-admin/src/main/resources/application-druid.yml 文件，在該文件中，根據自己的實際情況，修改數據庫連接地址、數據庫名稱、用户名和密碼。
繼續打開 tienchin/tienchin-admin/src/main/resources/application.yml 文件，在該文件中配置 Redis 的地址、密碼等信息。
另外還有一個非常重要的配置也需要修改，就是在 tienchin/tienchin-admin/src/main/resources/application.yml 文件中，將 server.servlet.context-path 的值改為 /prod-api。
1.3.3 服務端打包
接下來我們進行服務端打包。小夥伴們需要在自己電腦上安裝好 Maven 並且配置好環境變量，這也是基本操作，我就不囉嗦了。
如果電腦上還沒有配置 Maven 的話，建議使用 IDEA 自帶的 Maven 插件，就不用額外下載了。IDEA 自帶的 Maven 插件在安裝目錄下的 plugins/maven 目錄下，可以直接配置這裏的 bin 目錄到環境變量中即可。
服務端打包我們就進入到 tienchin 目錄下，然後執行如下代碼即可：
mvn package -Dmaven.test.skip=true看到如下代碼就表示編譯成功了：
編譯成功之後，在 tienchin/tienchin-admin/target 目錄下，可以看到一個名為 tienchin-admin.jar 的 jar 文件，這就是我們所需要的服務端代碼。
1.3.4 前端打包
接下來進入到 tienchin-ui 目錄下，執行如下命令安裝依賴（注意，前端需要 NodeJS 至少 14 往上的版本）：
npm install然後再執行如下命令進行編譯打包：
npm run build:prod打包完成後，會生成 dist 目錄，裏邊的文件就是我們所需要的靜態資源文件：
這樣，前端代碼就打包完成了。
1.3.5 安裝 Nginx
接下來我們來安裝 Nginx，我這裏直接下載 Nginx 源碼進行編譯安裝，步驟如下：
- 首先安裝如下兩個編譯工具
yum install -y zlib-devel
yum -y install pcre pcre-devel- 下載 Nginx 源碼並解壓。
wget https://nginx.org/download/nginx-1.22.1.tar.gz
tar -zxvf nginx-1.22.1.tar.gz- 編譯安裝
進入到 nginx 解壓目錄中，分別執行如下命令進行編譯安裝：
./configure
make
make install如此之後，我們的 Nginx 就安裝好了。
1.3.6 配置 Nginx
接下來我們首先通過命令或者文件上傳工具，先把剛剛打包的後端的 tienchin-admin.jar 和前端的 dist 目錄上傳到服務器上面來。
接下來，我們首先啓動服務端這個 tienchin-admin.jar：
nohup java -jar tienchin-admin.jar > tienchin.log &有的小夥伴在服務端部署的時候，會拋出如下異常：
這個是因為服務端缺乏相應的字體，而 Flowable 在自動生成部署圖片的時候，需要用到這些字體，所以我們安裝需要的字體即可：
yum install fontconfig
fc-cache --force服務端啓動成功之後，我們先用 postman 測試一下登錄接口，確保能運行，就説明服務端部署成功：
能成功登錄，就説明服務端部署成功。
接下來部署前端。
前端部署很簡單，我們只需要將 dist 中的內容拷貝到 nginx 的 html 目錄下即可，命令如下：
cp dist/* /usr/local/nginx/html/接下來執行如下命令啓動 nginx：
/usr/local/nginx/sbin/nginxnginx 啓動成功之後，就可以瀏覽器中訪問頁面了：
當然，現在還登錄不了，因為還缺少 Nginx 的請求轉發，現在當我們請求 Nginx 的時候可以看到前端頁面，但是服務端的數據請求，Nginx 並不會自動轉發到 Spring Boot 上面去，所以還需要我們繼續配置 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;
}這裏有幾個配置參數的含義，我給大家稍微解釋下：
- try_files：由於我們的前端 Vue 導航是 history 模式，這個不同於 vhr 的 hash 模式，history 模式會把請求路徑發到 Nginx 上去找，很明顯 Ngnix 找不到這樣的路徑，所以 try_files 就是説如果 404 了，就默認展示 index.html 頁面即可，然後具體的路由導航由 vue-router 去完成。
- tcp_nodelay：啓動 TCP_NODELAY，其實就是禁用 Nagle 算法，允許小包的發送。對於延時敏感型，同時數據傳輸量比較小的應用，開啓 TCP_NODELAY 選項無疑是一個正確的選擇。Nagle 算法是先把數據緩存起來，攢到一塊發送。
配置完成後，重啓 Nginx：
/usr/local/nginx/sbin/nginx -s reload好啦，這次重啓之後，就可以順利玩耍啦～
2. 前後端不分部署
前後端不分部署相對就簡單一些，不需要 Nginx 了，不過前面 1.3.1-1.3.4 也是需要的。
1.3.4 小節中，我們拿到前端編譯打包後的內容後，直接放到 tienchin-admin 模塊的 static 靜態資源目錄下，然後繼續將服務端打成 jar 包，將 jar 包上傳到服務器並啓動即可，啓動命令和 1.3.6 小節介紹的 jar 包啓動命令一致，這個過程比較簡單，涉及到的相關命令前面都有介紹，我就不重複展示了。
