Nginx 前后端分离配置

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

背景

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

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

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

前端：app.mangobeta.com/frontend

后端：app.mangobeta.com/backend

架构如图：

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

Nginx 配置：

location /frontend {
    proxy_pass http://localhost:8081;
}

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

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

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

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

方案二 域名做命名空间

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

方案三 前端转发所有流量

架构大概是这样：

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

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

总结

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