无法为 Angular 容器指定非根 nginx 位置答案

【问题标题】：Unable to specify a non-root nginx location to angular container无法为 Angular 容器指定非根 nginx 位置
【发布时间】：2021-03-31 09:24:37
【问题描述】：

我正在尝试将我的网站容器化，该网站最初有一个 Angular 项目来处理某些操作，首页是一个静态引导网页，以及一个将请求路由到所需应用程序的 Nginx 反向代理。
我正在尝试将这三个组件移动到三个不同的 docker 容器中。但是，对于我需要的非常具体的用例，角度容器不会被路由到。

下面给出了我的代码，此外，我正在使用一个空白的 Angular 项目来测试它，它是我用ng new test-project 创建的。

docker-compose.yml

version: "3.4"
services:
  nginx:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - "./config/:/etc/nginx/"

  bootstrap:
    image: bootstrap_image
    ports:
      - "8889:80" # Just for testing

  angular:
    image: angular_image
    ports:
      - "8888:80" # Just for testing

Angular 应用程序的 Dockerfile

##############
# build dist #
##############
FROM node as build

RUN mkdir -p /app

WORKDIR /app

COPY package.json .
RUN ["npm", "install"]
RUN ["npm", "install", "-g", "@angular/cli"]

COPY . .

RUN ["ng", "build"]


##############
# prod image #
##############
FROM nginx:alpine as prod

COPY --from=build /app/dist/test-project /usr/share/nginx/html

EXPOSE 80

bootstrap 镜像也使用相同的 nginx:alpine 镜像，只是将 html 文件复制到/usr/share/nginx/html

Nginx 反向代理配置

server {
        listen 80;
        # root /usr/share/nginx/html;
        # index index.html index.htm;

        location /home {
            proxy_pass http://angular:80/;
        }

        location / {
            proxy_pass http://bootstrap:80/;
        }

}

目前的配置非常简单。在调试时，我发现了以下事实：

当我将位置检查器换成两个容器（角度上的 /，引导上的 /home）时，它可以工作。
当我转到 localhost:80/home 时，它永远不会碰到角容器。
当我根据引导映像将 Angular 服务与另一个容器交换时，localhost:80/home 会适当地点击该服务。
虽然没有加载角度页面，但选项卡上的标题显示正确。

我不知道是什么原因造成的，因为这两个容器肯定在工作。我通过访问localhost:8888 和localhost:8889 对此进行了测试。我目前的结论是 Angular 构建应用程序的方式有问题，也许我需要对 angular.json 文件做一些事情来解决这个问题。任何帮助将不胜感激！

谢谢！

【问题讨论】：

标签： angular docker nginx docker-compose nginx-reverse-proxy

【解决方案1】：

我会调查 Angular 容器是否正在使用 http 重定向或尝试通过相对地址加载其他资源。即如果 Angular 认为它的根地址是 http://angular:80/ 并且它试图告诉客户端加载 http://angular:80/index.html （例如），客户端将无法找到它。 Nginx proxy_pass 仅是一种方式，您还需要添加其他指令：proxy_redirect 和（我认为）proxy_set_header HOST

【讨论】：