为什么我在 nginx 上托管的 Angular 应用程序会抛出错误 502 bad gateway 错误，但在终端中构建

Question

哟，我一直在尝试使用 Docker 在 NGINX 上托管 Angular 应用程序，但是当我构建容器并转到 localhost:8080 时，我收到 502 Bad Gateway 错误。

这是我的 Dockerfile：

FROM node:latest as build

WORKDIR /usr/local/app

COPY package.json .

RUN npm install

COPY . .

CMD ["npm", "start"]

这是我的 docker-compose.yml：

version: "3.9"

services:
  app:
    container_name: app
    build:
      context: .

  nginx:
    container_name: nginx
    image: nginx
    ports:
      - "80:80"
    depends_on:
      - app
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf

这是我的default.conf 文件：

server {
    listen 80;
    server_name app;
    location / {
        proxy_pass http://app:4200;
        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;
    }
}

这是我用来构建图像的线：

docker build -t front .

这是我用来运行图像的行：

docker run -d -p 8080:80 front

还可以使用：

docker compose up -d

我有这个错误

2024/04/28 14:47:13 [错误] 32#32: *7 连接到上游时失败（111：连接被拒绝），客户端：172.18.0.1，服务器：应用程序，请求：“GET / favicon.ico HTTP/1.1”，上游：“172.18.0.2:4200/favicon.ico”，主机：“localhost”，引荐来源：“localhost” 这是错误 我需要帮助解决此错误

Answer 1

在你的默认文件中，指令是不是丢失了？

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;