angular - 如何配置 nginx 以在/和代理/api 上为另一个 api 服务器提供 Angular 应用程序？

Question

我正在尝试配置一个 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。

Answer 1

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

location ^~ /api/ { }

您可以在此处阅读更多信息 -> https://www.journaldev.com/26342/nginx-location-directive