Node.js 通过docker compose运行angular 8时获得“无法访问此站点”

我能够为我的angular UI应用程序运行npm start。然而，当我将API和UI移动到docker中时，我一直在访问这个无法访问的站点。谁能帮我检查一下脚本哪里出了问题

**API Dockerfile:**

FROM node:10.16

WORKDIR /usr/src/app/api

COPY package*.json ./

RUN npm install

EXPOSE 3000

CMD ["npm", "run", "dev"]

这是我的api开始脚本：

dev:nodemon index.js

**UI Dockerfile**

FROM node:10.16

WORKDIR /usr/src/app/ui

COPY package*.json ./

RUN npm install -g @angular/cli @angular-devkit/build-angular && npm install

EXPOSE 4200

CMD ["npm", "start"]

这是我的UI启动脚本：

开始：ng serve-host 0.0.0.0-port 4200，***有人建议添加-host和-port，但我仍然收到相同的错误

这是我的docker-compose.yml文件：

version: '3'
services:
  app-api:
    build:
      context: ./api
      dockerfile: Dockerfile-dev
    ports:
      - "3000:3000"
    container_name: app-api
    volumes:
      - ./api:/usr/src/app/api
      - /usr/src/app/api/node_modules
  app-ui:
    build:
      context: ./ui
      dockerfile: Dockerfile-dev
    ports:
      - "4200:4200"
    container_name: app-ui
    volumes:
      - ./ui:/usr/src/app/ui
      - /usr/src/app/ui/node_modules
  nginx:
    image: "nginx:latest"
    ports:
      - 8080:8080
    volumes:
      - ./proxy/conf.d:/etc/nginx/conf.d
    depends_on:
      - app-ui
      - app-api

我添加了nginx：

server {
    listen 8080;

    server_name localhost;

    location / {
        proxy_pass http://app-ui: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;
    }

    location /api {
        proxy_pass http://app-api:3000;
        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 compose时没有错误。

我正在使用windows 10 docker工具箱

---

对于angular，您不应该在prod中使用npm start或ng serve。您应该首先使用ng build构建angular项目，然后为dist文件夹中输出的文件提供服务。

可能是一个明显的问题，但您是在http://localhost:8080 ?

尝试以下简化的nginx配置

upstream backend {
    server backend_container_name:8080;
}

upstream frontend{
    server frontend_container_name:4200;
}


server {
    listen 8080;
    listen [::]:8080;

    server_name $hostname;
    include extensions/proxy.conf;

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

    

    location /{
        proxy_pass http://frontend;
    
    }
}