开发时使用angular和docker

Question

我尝试使用docker搭建开发环境，nginx访问angular程序时返回502

我使用docker搭建开发环境。容器启动时可以使用http://localhost/api访问api服务，也可以使用http://localhost:27017访问mongodb，但是访问“http://localhost”时出现502错误

码头工人撰写

# docker-compose up -d
version: "3.9"

services:
  web:
    image: nginx
    working_dir: /web
    networks:
      - overlay
    ports:
      - "80:80"
    volumes:
      - ./conf.d:/etc/nginx/conf.d
    depends_on:
      - admin
      - api

  admin:
    image: node:14
    working_dir: /web/apps/admin
    command: bash -c "npm i && npm run start"
    networks:
      - overlay
    expose:
      - 4200
    volumes:
      - ./apps/admin:/web/apps/admin
    depends_on:
      - api

  api:
    image: node:14
    working_dir: /web/apps/api
    command: bash -c "npm i && npm run start:dev"
    expose:
      - 3000
    networks:
      - overlay
    volumes:
      - ./apps/api:/web/apps/api
    depends_on:
      - mongo

  mongo:
    image: mongo
    restart: always
    networks:
      - overlay
    ports:
      - "27017:27017"
    volumes:
      - ./mongo_data:/data/db

networks:
  overlay:

nginx 配置

server {
    listen 80;
    server_name 127.0.0.1;

    location /api/ {
        proxy_pass http://api:3000;
    }

    location / {
        proxy_pass http://admin:4200;
    }
}

存储库在这里：https://github.com/januwA/ng-nest-admin

我不知道出了什么问题

Answer 1

我需要在 angular.json 中添加开发配置

...
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "host": "0.0.0.0",
            "port": 4200,
            "disableHostCheck": true
          },
        },

重启容器后，nginx正常工作