一起聊聊怎麼使用Nginx部署TienChin項目
- 青灯夜游轉載
- 2023-04-04 19:46:021114瀏覽
這篇文章就來手把手教小夥伴們部署 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：
直接執行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.gztar -zxvf nginx-1.22.1.tar.gz
- 编译安装
进入到 nginx 解压目录中，分别执行如下命令进行编译安装：
./configuremakemake 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/nginx
nginx 启动成功之后，就可以浏览器中访问页面了：
当然，现在还登录不了，因为还缺少 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 包启动命令一致，这个过程比较简单，涉及到的相关命令前面都有介绍，我就不重复展示了。
最后，对 TienChin 项目感兴趣的小伙伴戳这里：TienChin 项目配套视频来啦。
推薦教學：nginx教學
以上是一起聊聊怎麼使用Nginx部署TienChin項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！