手把手教小伙伴们使用Nginx部署TienChin项目！

今天我就来手把手教小伙伴们部署 TienChin 项目&＃xff0c;一起把这个项目跑起来&＃xff0c;看看到底是个什么样的项目。

小伙伴们知道&＃xff0c;对于这种前后端分离的项目&＃xff0c;我们在实际部署的时候&＃xff0c;可以按照前后端分离的方式来部署&＃xff0c;也可以按照前后端不分的方式来部署。接下来两种不同的部署方式我都和小伙伴们来分享一下。

1. 前后端分离部署

1.1 部署架构图

前后端分离部署的话&＃xff0c;我们一般是需要一个 Nginx 服务器&＃xff0c;我先画一个简单的部署示意图给大家参考下&＃xff1a;

简单解释一下就是这样&＃xff1a;

1. 浏览器发出请求。
2. 请求首先到达 Nginx 服务器&＃xff0c;Nginx 服务器&＃xff0c;由 Nginx 服务器进行请求分发。
3. 如果是一个静态资源请求&＃xff0c;则 Nginx 将之转发到静态资源服务器上&＃xff0c;一般可能由 Nginx 自己兼任静态资源服务器&＃xff0c;也就是直接从 Nginx 自己硬盘上将数据读取出来。
4. 如果是一个动态资源&＃xff0c;则 Nginx 将之转发到 Tomcat 上&＃xff0c;对于我们这里就是我们的 Spring Boot 服务上了&＃xff0c;当然&＃xff0c;如果你没有这么多服务器&＃xff0c;我们可以将 Nginx 和 Spring Boot 部署到同一台服务器上。

好了&＃xff0c;这就是我们的大致的一个部署架构图了&＃xff0c;很简单。

1.2 准备工作

接下来有几个事情是需要我们提前准备的。

首先我们先在服务器上安装好 MySQL 和 Redis&＃xff0c;这个具体怎么安装我这里就不啰嗦了&＃xff0c;基操而已。

MySQL 建议大家用 Docker 安装&＃xff0c;省事。如果不懂 Docker&＃xff0c;可以在公众号后台回复 Docker 有松哥写的入门教程&＃xff1b;Redis 可以直接安装&＃xff0c;松哥在之前的 vhr 系列教程中包含有 Redis 教程&＃xff0c;可以公众号后台回复 vhr 查看详情。

这样我们的准备工作就完成了。

1.3 开始部署

1.3.1 拉取项目

首先我们需要从 GitHub 上拉取我们的项目&＃xff0c;TienChin 项目的源代码是开源的&＃xff0c;大家可以直接 Clone&＃xff1a;

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

直接执行 git clone 即可。

拉取下来之后&＃xff0c;有两个文件夹&＃xff1a;

• tienchin 是服务端代码。
• tienchin-ui 是前端代码。

1.3.2 修改配置

首先我们创建一个名为 tienchin 的数据库&＃xff0c;这个好说。

接下来&＃xff0c;我们找到 tienchin/sql/tienchin-video_2023-03-13.sql 文件&＃xff0c;在 tienchin 数据库中执行该脚本。

接下来&＃xff0c;我们找到 tienchin/tienchin-admin/src/main/resources/application-druid.yml 文件&＃xff0c;在该文件中&＃xff0c;根据自己的实际情况&＃xff0c;修改数据库连接地址、数据库名称、用户名和密码。

继续打开 tienchin/tienchin-admin/src/main/resources/application.yml 文件&＃xff0c;在该文件中配置 Redis 的地址、密码等信息。

另外还有一个非常重要的配置也需要修改&＃xff0c;就是在 tienchin/tienchin-admin/src/main/resources/application.yml 文件中&＃xff0c;将 server.servlet.context-path 的值改为 /prod-api。

1.3.3 服务端打包

接下来我们进行服务端打包。小伙伴们需要在自己电脑上安装好 Maven 并且配置好环境变量&＃xff0c;这也是基本操作&＃xff0c;我就不啰嗦了。

如果电脑上还没有配置 Maven 的话&＃xff0c;建议使用 IDEA 自带的 Maven 插件&＃xff0c;就不用额外下载了。IDEA 自带的 Maven 插件在安装目录下的 plugins/maven 目录下&＃xff0c;可以直接配置这里的 bin 目录到环境变量中即可。

服务端打包我们就进入到 tienchin 目录下&＃xff0c;然后执行如下代码即可&＃xff1a;

mvn package -Dmaven.test.skip&＃61;true


看到如下代码就表示编译成功了&＃xff1a;

编译成功之后&＃xff0c;在 tienchin/tienchin-admin/target 目录下&＃xff0c;可以看到一个名为 tienchin-admin.jar 的 jar 文件&＃xff0c;这就是我们所需要的服务端代码。

1.3.4 前端打包

接下来进入到 tienchin-ui 目录下&＃xff0c;执行如下命令安装依赖&＃xff08;注意&＃xff0c;前端需要 NodeJS 至少 14 往上的版本&＃xff09;&＃xff1a;

npm install


然后再执行如下命令进行编译打包&＃xff1a;

npm run build:prod


打包完成后&＃xff0c;会生成 dist 目录&＃xff0c;里边的文件就是我们所需要的静态资源文件&＃xff1a;

这样&＃xff0c;前端代码就打包完成了。

1.3.5 安装 Nginx

接下来我们来安装 Nginx&＃xff0c;我这里直接下载 Nginx 源码进行编译安装&＃xff0c;步骤如下&＃xff1a;

1. 首先安装如下两个编译工具

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. 编译安装

进入到 nginx 解压目录中&＃xff0c;分别执行如下命令进行编译安装&＃xff1a;

./configure
make
make install


如此之后&＃xff0c;我们的 Nginx 就安装好了。

1.3.6 配置 Nginx

接下来我们首先通过命令或者文件上传工具&＃xff0c;先把刚刚打包的后端的 tienchin-admin.jar 和前端的 dist 目录上传到服务器上面来。

接下来&＃xff0c;我们首先启动服务端这个 tienchin-admin.jar&＃xff1a;

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


有的小伙伴在服务端部署的时候&＃xff0c;会抛出如下异常&＃xff1a;

这个是因为服务端缺乏相应的字体&＃xff0c;而 Flowable 在自动生成部署图片的时候&＃xff0c;需要用到这些字体&＃xff0c;所以我们安装需要的字体即可&＃xff1a;

yum install fontconfig
fc-cache --force


服务端启动成功之后&＃xff0c;我们先用 postman 测试一下登录接口&＃xff0c;确保能运行&＃xff0c;就说明服务端部署成功&＃xff1a;

能成功登录&＃xff0c;就说明服务端部署成功。

接下来部署前端。

前端部署很简单&＃xff0c;我们只需要将 dist 中的内容拷贝到 nginx 的 html 目录下即可&＃xff0c;命令如下&＃xff1a;

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


接下来执行如下命令启动 nginx&＃xff1a;

/usr/local/nginx/sbin/nginx


nginx 启动成功之后&＃xff0c;就可以浏览器中访问页面了&＃xff1a;

当然&＃xff0c;现在还登录不了&＃xff0c;因为还缺少 Nginx 的请求转发&＃xff0c;现在当我们请求 Nginx 的时候可以看到前端页面&＃xff0c;但是服务端的数据请求&＃xff0c;Nginx 并不会自动转发到 Spring Boot 上面去&＃xff0c;所以还需要我们继续配置 Nginx&＃xff0c;Nginx 配置文件的位置在 /usr/local/nginx/conf/nginx.conf&＃xff0c;我们增加如下配置&＃xff1a;

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;
}


这里有几个配置参数的含义&＃xff0c;我给大家稍微解释下&＃xff1a;

• try_files&＃xff1a;由于我们的前端 Vue 导航是 history 模式&＃xff0c;这个不同于 vhr 的 hash 模式&＃xff0c;history 模式会把请求路径发到 Nginx 上去找&＃xff0c;很明显 Ngnix 找不到这样的路径&＃xff0c;所以 try_files 就是说如果 404 了&＃xff0c;就默认展示 index.html 页面即可&＃xff0c;然后具体的路由导航由 vue-router 去完成。
• tcp_nodelay&＃xff1a;启动 TCP_NODELAY&＃xff0c;其实就是禁用 Nagle 算法&＃xff0c;允许小包的发送。对于延时敏感型&＃xff0c;同时数据传输量比较小的应用&＃xff0c;开启 TCP_NODELAY 选项无疑是一个正确的选择。Nagle 算法是先把数据缓存起来&＃xff0c;攒到一块发送。

配置完成后&＃xff0c;重启 Nginx&＃xff1a;

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


好啦&＃xff0c;这次重启之后&＃xff0c;就可以顺利玩耍啦&＃xff5e;

2. 前后端不分部署

前后端不分部署相对就简单一些&＃xff0c;不需要 Nginx 了&＃xff0c;不过前面 1.3.1-1.3.4 也是需要的。

1.3.4 小节中&＃xff0c;我们拿到前端编译打包后的内容后&＃xff0c;直接放到 tienchin-admin 模块的 static 静态资源目录下&＃xff0c;然后继续将服务端打成 jar 包&＃xff0c;将 jar 包上传到服务器并启动即可&＃xff0c;启动命令和 1.3.6 小节介绍的 jar 包启动命令一致&＃xff0c;这个过程比较简单&＃xff0c;涉及到的相关命令前面都有介绍&＃xff0c;我就不重复展示了。