通过 docker compose 运行 Angular 8 时出现“无法访问此站点”答案

【问题标题】：Getting "This site can’t be reached" when running angular 8 via docker compose通过 docker compose 运行 Angular 8 时出现“无法访问此站点”
【发布时间】：2020-10-12 03:09:15
【问题描述】：

我能够通过 npm start 为我的 Angular UI 应用程序运行。但是，当我将 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 启动脚本：

"start": "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 up 时没有错误。

我正在使用 Windows 10 docker 工具箱

【问题讨论】：

标签： node.js angular docker nginx docker-compose

【解决方案1】：

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

【讨论】：

【解决方案2】：

可能很明显的问题，但您是在 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;
    
    }
}

【讨论】：