如何配置 nginx 以在 / 上提供 Angular 应用程序并将 /api 代理到另一个 api 服务器？答案

【问题标题】：How to configure nginx to serve an angular app on / and proxy /api to another api server?如何配置 nginx 以在 / 上提供 Angular 应用程序并将 /api 代理到另一个 api 服务器？
【发布时间】：2022-01-26 21:53:35
【问题描述】：

我正在尝试配置一个 nginx Docker 容器，以在其根路径上为 Angular 应用程序提供服务（到目前为止有效），并通过 /api 上的代理使后端可用。

我在 Stackoverflow 和一些博客上阅读了多个线程，但到目前为止还没有任何配置起作用。如果我在 / Angular 应用程序上调用我的应用程序。当我尝试在同一个 url 上调用 /api 时，它会被重定向到 / 并且不显示任何内容——我猜 Angular 路由器有一些它无法处理的路由。但是 Nginx 应该在调用 Angular 应用程序之前捕获该路由。我该怎么做？

我不确定出了什么问题。您在我的配置中看到错误了吗？

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html =404;
  }
  
  location /api/ {
    proxy_pass http://host.docker.internal:8080/api/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Edit1： 我发现了一个问题：容器无法访问 api-server。我在配置中将其更改为 host.docker.internal，可通过docker ci 访问。但我仍然无法在 nginx 容器上调用 /api。我现在得到一个 404。

【问题讨论】：

您只打电话给/api 还是/api/<some resource>？您的 api 位置块由斜杠 (/api/) 而不是 /api 触发。
@RobertKeck 我称之为它背后的东西。以 /api/Names 为例。
我想我找到了问题...我在另一个文件夹中，用于另一个我停止并启动的前端应用程序。上面的配置有效，我只是在错误的文件夹中......哎哟。

标签： angular nginx proxy reverse-proxy

【解决方案1】：

我会使用下面的语法让 Nginx 知道这是在您的通用位置之前出现的location /。

location ^~ /api/ { }

你可以在这里阅读更多 -> https://www.journaldev.com/26342/nginx-location-directive

【讨论】：

【解决方案2】：

事实证明上面的配置有效，我在另一个项目的错误文件夹中。

【讨论】：