Nginx 反向代理 + Angular 由 Nginx 服务

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/(.*) / 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 提供服务，但我在尝试时收到 400 Bad Request 错误访问 /my-app/。有人对此有解决方案吗？我错了什么？谢谢！

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。如果您看到带有目标 Location: 的 301、302、303 到 308 - 这是重定向。但也许我的其他答案可以提供帮助（重写重定向）：https://serverfault.com/a/986034/304842 或尝试 proxy_redirect。我看到的问题是你想要 websockets！？也许您还需要 sub_filter 或 subs_filter，以便从其他链接和资源的源代码中删除 /my-app/。在浏览器中使用 [F12] -> 网络检查。

Nginx 反向代理 + Angular 由 Nginx 服务

Nginx reverse proxy + Angular served by Nginx

reverse-proxy

nginx

angular

nginx-reverse-proxy