Nginx 前后端分离配置

了解耦前后端,我们将前后端分离,但同时增加了架构的复杂度。本文探讨两种基于 Nginx 的前后端分离配置思路。

背景

假设我们有前后端两个应用,需要 Nginx 做流量转发,前端转发给 frontend, 后端转发给 backend 结构如下图:

nginx-conf1.png

方案一 使用同一个域名,应用加前缀

应用加前缀,其实相当于在应用上加了命名空间,这样配置下来如下:

前端:app.mangobeta.com/frontend

后端:app.mangobeta.com/backend

架构如图: nginx-conf2.png

这样做的好处是,前后端不存在跨域问题,配置也比较灵活,一次性工作,比较推荐。

Nginx 配置:

1
2
3
4
5
6
7
location /frontend {
    proxy_pass http://localhost:8081;
}

location /backend {
    proxy_pass http://localhost:8082;
}

但有时后端不方便加前缀,使用 Nginx rewrite 重写规则也可以。

通过 /backend 访问 localhost:8082 示例:

1
2
3
4
location /backend {
    rewrite /backend/(.*) /$1  break;
    proxy_pass http://localhost:8081;
}

方案二 域名做命名空间

直接在域名层面分隔。这样做的好处是前后端完全解耦,坏处是引申出跨域的问题。

nginx-conf2.png

方案三 前端转发所有流量

架构大概是这样:

nginx-conf4.png

这个就比较奇葩了,nginx 将流量转发给前端,前端再把流量转给后端。后端强依赖前端,前后端在结构上耦合。

笔者真的见过有这么干的。极不推荐。

总结

如果应用规模小的话还是推荐方案一,方案二会带来额外的运维成本,次之。

updatedupdated2020-11-122020-11-12
Load Comments?