时间戳

首页 > 解决方案 > Nginx 反向代理到前端和后端

nginx - Nginx 反向代理到前端和后端

问题描述

我有两个在 localhost:3000(frontend) 和 localhost:3001(backend) 上运行的 react 应用程序。我想从同一个 server_name 为后端和前端提供服务。例如，如果用户点击 example.com，Nginx 应该将流量路由到在 (localhost:3000) 上运行的前端，如果用户点击 example.com/admin/登录流量应该被路由到后端（localhost:3001）。

'''

server {
    listen 80;
    server_name example.com;

    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;

    location / {
        proxy_pass http://localhost:3001;
    }
    location /admin-login {
        proxy_pass http://localhost:3000;
    }
}

'''

使用上述配置。我在 example.com 上运行前端。但是，当我调用 example.com/admin/login 时，我被重定向到在前端 (localhost:3000) 上运行的应用程序，而不是在 (localhost:3001) 上运行的后端。

根据下面给出的答案进行更新。我有以下配置。它仍然具有相同的行为。

server {
  listen 80;
  server_name example.com;

  location /admin-login {
    proxy_pass http://127.0.0.1:3000/admin-login;
  }
 
  location / {
    proxy_pass http://127.0.0.1:3001;
  }
 
  location /home {
    proxy_pass http://127.0.0.1:3001/home;
  }

  location /login {
    proxy_pass http://127.0.0.1:3001/login;
  }

   location /signup {
     proxy_pass http://127.0.0.1:3001/signup;
  }

   location /article {
     proxy_pass http://127.0.0.1:3001/article;
   }

}

标签： nginxnginx-reverse-proxynginx-config

解决方案

我认为这里的问题是

location / {
  proxy_pass http://localhost:300
}

匹配所有查询，因此也会将任何内容重定向到/admin-login

您可以重新排列您的块以使该块在配置文件中的admin-login块上方，或进行以下调整：/

location = / {
  proxy_pass http://localhost:300
}

这个调整后的块应该只将查询重定向到/而不是/*

如果您想了解更多信息，请参阅此处的文档 - https://nginx.org/en/docs/http/ngx_http_core_module.html#location

推荐阅读