如何配置 nginx 为 / 上的 angular 应用程序提供服务，并将 /api 代理到另一个 api 服务器？

Question

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

我已经阅读了 Whosebug 和一些博客上的多个线程，但到目前为止没有配置有效。如果我在 / 上调用我的应用程序，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

Answer 2

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

如何配置 nginx 为 / 上的 angular 应用程序提供服务，并将 /api 代理到另一个 api 服务器？

How to configure nginx to serve an angular app on / and proxy /api to another api server?

angular

nginx

proxy

reverse-proxy