手把手教小伙伴们使用 Nginx 部署 TienChin 项目！-51CTO.COM

今天我就来手把手教小伙伴们部署 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/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 包启动命令一致，这个过程比较简单，涉及到的相关命令前面都有介绍，我就不重复展示了。