侧边栏壁纸
  • 累计撰写 35 篇文章
  • 累计创建 58 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录

nginx对前后端分离项目的配置

Wonder
2021-04-02 / 0 评论 / 2 点赞 / 35 阅读 / 913 字 / 正在检测是否收录...

现如今绝大多数项目都是前后端分离形式的,前端开发完成后会有一堆html、js、css、图片文件等静态资源,后端可以通过类似tomcat的容器启动起来,那么应该如何通过nginx来将二者统一配置起来呢?

0.最简单的方式

将前端编译打包后的文件拷贝到后端项目中,然后启动后端服务即可。

如Spring Boot项目中,可将前端资源文件拷贝至src/main/resources/static

但是这种方式违背了前后端分离的初衷,前端开发还是得依赖于后端去更新服务,本文主要讲通过nginx来实现前后端分离,并且还可以实现负载均衡。

1.配置前端资源

配置前端资源时,只需在server中添加一个location,nginx将根据匹配规则进行访问。

server {
   listen 80;
   # 修改为你的域名
   server_name  _;
	…
  location / {
    root /data/dist;
    index index.html index.htm;
    try_files $uri $uri/ @rewrite;
  }
  location @rewrite{
    rewrite ^.*$ /index.html last;
  }
}
  • root 是指定项目的根目录,适用与server和location。可以指定多个,如果locaiton没有指定,会往其外层的server或http中寻找继承。
  • index 是指定网站初始页。该指令后面可以跟多个文件,用空格隔开;如果包括多个文件,Nginx会根据文件的枚举顺序来检查,直到查找的文件存在;文件可以是相对路径也可以是绝对路径,绝对路径需要放在最后;文件可以使用变量$来命。
  • try_files 最核心的功能是可以替代rewrite;按顺序检查文件是否存在,返回第一个找到的文件。结尾的斜线表示为文件夹 $uri/。如果所有的文件都找不到,会进行一个内部重定向到最后一个参数。
  • rewrite 是实现URL重定向的重要指令,他根据regex(正则表达式)来匹配内容跳转到replacement,结尾是flag标记。

2.配置后端

假定后端通过tomcat的默认端口号(8080)启动了。

在配置中再添加一个location,其后的路径可以与前端商议决定,比如设为api,这样前端请求后端时在uri上拼一个/api即可。

location /api/{
  proxy_pass http://localhost:8080;
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header REMOTE-HOST $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
  • proxy_pass 配置的路径即为需要将请求转发到的后端服务地址;
  • proxy_set_header 用来重定义发往后端服务器的请求头。

3.实现负载均衡

其实至此已经可以实现前后端分离的访问了,但nginx还提供了一个很好用的功能——负载分离,配置文件中配置upstream,再改一下proxy_pass的地址即可。

假设有两台机器上部署了后端服务,权重六四分,完整的配置文件为:

upstream qiming.info{
  server 10.128.134.129:8080 weight=6;
  server 10.128.134.130:8080 weight=4;
}

server {
  listen 80;
  # 修改为你的域名
  server_name  _;
	
  location / {
    root /data/dist;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /api/{
    proxy_pass http://qiming.info;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   html;
  }

}
2

评论区