Nginx 反向代理 + Nginx 服务的 Angular

Question

我有一个 Angular 应用程序 my-app，我使用 ng build --prod 在本地构建它并使用 Nginx dockerized 服务，Dockerfile 是：

FROM nginx:alpine
COPY /dist/my-app /usr/share/nginx/html
EXPOSE 80

只要我使用此Dockerfile 启动基于映像构建的容器，它就可以工作。 虽然，我需要在这个之前放置另一个 Nginx 作为反向代理，但我想使用类似 /my-app 的路由将流量重定向到内部 Nginx 服务 Angular，如下所示：

http://DOMAIN/my-app ---> Reverse Proxy ---> Nginx+Angular

我将使用 Docker Compose 进行本地开发。我的docker-compose.yml很简单：

version: '3'

services:
    nginx:
        container_name: my-nginx
        build: ./nginx
        ports:
            - "80:80"
    my-app:
        container_name: my-app
        build: ./my-app

对于 Angular 应用程序，我在 angular.json 文件中重新定义 "baseHref": "./my-app/"，我再次构建并配置反向代理，如下所示：

events {}

http {

  server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root                /var/www;
    index               index.html;

    location / {
        index           index.html;
    }

    location /my-app {
      rewrite                     /my-app/(.*) /$1 break;
      proxy_pass                  http://my-app:80;
      proxy_set_header Host       $host;
      proxy_set_header Upgrade    $http_upgrade;
      proxy_set_header Connection $http_connection;
      proxy_set_header Host       $host;
    }
  }
}

这里，location / 指令中的 index.html 是自定义的，而不是 Angular 应用程序的。因此，我希望我的反向代理在访问路由 / 时为 index.html 提供服务，但我在尝试访问 /my-app/ 时收到 400 Bad Request 错误。 有人对此有解决方案吗？我怎么了？谢谢！

Answer 1

只是猜测。我会那样做。

    # Maybe not necessary to redirect from /my-app to /my-app/.
    location ~ ^/my-app$ {
      set $myargs $args;  # workaround to encode spaces in query string!
      return 303 $scheme://$server_name/my-app/$is_args$myargs;
    }

    location /my-app/ {  # works mostly with and sometimes without slash at end!
      proxy_pass                  http://my-app:80/;  # slash at end is goddamn important here; it hides /my-app/ and does all the $request_uri or regex, $is_args and $args magic for you!
      proxy_set_header Host       $host;
      proxy_set_header Upgrade    $http_upgrade;
      proxy_set_header Connection $http_connection;
      proxy_set_header Host       $host;
    }

如果您的后端发送重定向，您可能会被搞砸。请与curl -IL http://my-app 联系。如果您看到 301、302、303 到 308，目标为 Location: - 这是一个重定向。但也许我的其他答案可以帮助（重写重定向）：https://serverfault.com/a/986034/304842 或尝试proxy_redirect。我看到的问题是你想要 websockets！？也许您也需要sub_filter 或subs_filter，从源代码中删除/my-app/ 以获取其他链接和资源。在浏览器中使用 [F12] -> 网络检查。