共计 3560 个字符，预计需要花费 9 分钟才能阅读完成。
明天我就来手把手教小伙伴们部署 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 包启动命令统一，这个过程比较简单，波及到的相干命令后面都有介绍，我就不反复展现了。
