乐趣区

关于nginx:手把手教小伙伴们使用-Nginx-部署-TienChin-项目

jiezi

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

小伙伴们晓得，对于这种前后端拆散的我的项目，咱们在理论部署的时候，能够依照前后端拆散的形式来部署，也能够依照前后端不分的形式来部署。接下来两种不同的部署形式我都和小伙伴们来分享一下。

1. 前后端拆散部署

1.1 部署架构图

前后端拆散部署的话，咱们个别是须要一个 Nginx 服务器，我先画一个简略的部署示意图给大家参考下：

简略解释一下就是这样：

  1. 浏览器发出请求。
  2. 申请首先达到 Nginx 服务器，Nginx 服务器，由 Nginx 服务器进行申请散发。
  3. 如果是一个动态资源申请，则 Nginx 将之转发到动态资源服务器上，个别可能由 Nginx 本人专任动态资源服务器，也就是间接从 Nginx 本人硬盘上将数据读取进去。
  4. 如果是一个动静资源，则 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 源码进行编译装置，步骤如下：

  1. 首先装置如下两个编译工具 
yum install -y zlib-devel
yum -y install pcre pcre-devel
  1. 下载 Nginx 源码并解压。
wget https://nginx.org/download/nginx-1.22.1.tar.gz
tar -zxvf nginx-1.22.1.tar.gz
  1. 编译装置

进入到 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 包启动命令统一，这个过程比较简单，波及到的相干命令后面都有介绍，我就不反复展现了。

退出移动版