记：怎么部署前后端分离项目

前言

前后端分离，是指前端html页面与后端开发独立、运行（部署）独立。

物料准备

部署物料

• 编译好的前端代码
• 打包好的后端java程序
• 稳定版的 Ngnix 前往下载

图1：物料清单

安装Ngnix（windows）

将下载好的nginx-1.22.1.zip 解压进行双击 nginx.exe 进行安装：

图2：安装Nginx

验证Nginx 安装，访问：http://localhost

图2：安装Nginx

表示安装成功，在Windows环境安装，需要注意，安装目录不能有中文。

部署应用

发布规划

• 通过 example.org 能够访问到页面
• 启动2个后端节点做负载均衡

配置代理

为了后面更好的维护代理的配置文件，在 conf 目录下新建一个conf.d的目录，用于存放后续扩展的配置。然后通过 include conf.d/*.conf 引入到nginx.conf主配置文件中。

图3：Nginx配置目录 图4：引入子配置文件目录

注：includ 子配置文件的路径是相对路径，基于 conf目录；当然也可以用绝对路径。

配置前端静态代理

创建conf.d/example.conf配置文件，并配置前端代理。

server {
    listen 80;
    server_name example.org;
    location / {
    # 存放静态资源的路径，此处是相对路径，以 Nginx 根路径为基础，也可以用绝对路径
      root www/html;
    }
}

图5：静态资源存放路径

配置后端反向代理

首先，跟前端开发进行约定，通过/api前缀访问后端接口，在Nginx就可以通过/api的代理路径，反向代理到后端接口。同时，按照我们的发布规划，后端需要做负载。

去到conf.d/example.conf配置文件中，配置后端的方向代理，并做负载。

upstream backend {
   # 因为在本地部署，所以是localhost，可以是不同的服务器IP或者域名
   server localhost:8080;
   server localhost:8081;
}

server {
    listen 80;
    server_name example.org;
    location / {
    # 存放静态资源的路径，此处是相对路径，以 Nginx 根路径为基础，也可以用绝对路径
      root www/html;
    }
    
    location /api/ {
      proxy_pass http://backend/;
    }
}

提示：完成上面配置之后，确保后端应用程序启动的2个节点的端口是 8080 和8081。

更新Nginx 配置，使其生效：

./nginx.exe -s reload

验证部署

添加 hosts

127.0.0.1 example.org

浏览器输入：http://example.org 访问

图6：部署验证

至此，项目部署完成。

总结

• Nginx 安装目录不能有中文
• Nginx 静态目录的相对路径是基于Nginx安装的根目录
• Nginx 子配置文件的相对路径是基于conf 目录