Angular 不会从 docker 上的 django 端点检索对象或消息

Question

尝试使用 Docker 部署 Django Rest Framework 和 Angular。

我有 3 个容器：django、db 和 Angular（上面有 nginx）

部署已完成，我可以打开 localhost:80 并查看我的 Angular 组件。

但是，组件服务正在调用

http://localhost:8000/api/sensores/

来检索数据库中的所有对象（我确保那里有一个对象，它是我从 django shell 创建的，并在数据库容器上查看它）并且它正在获取错误。 Chrome 控制台上出现两条日志：

Error al obtener sensores: ct {headers: e, status: 0, statusText: 'Unknown Error', url: 'http://localhost:8000/api/sensores/', ok: false, …}error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: 'error', …}headers: e {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}message: "Http failure response for http://localhost:8000/api/sensores/: 0 Unknown Error"name: "HttpErrorResponse"ok: falsestatus: 0statusText: "Unknown Error"url: "http://localhost:8000/api/sensores/"[[Prototype]]: zn ...

polyfills-FFHMD2TL.js:1

GET http://localhost:8000/api/sensores/ net::ERR_CONNECTION_REFUSED

从我的 Angular-nginx 容器中的执行控制台，我可以这样做：

curl http://api:8000/api/sensores/

并获取我正在寻找的对象，但 Angular 本身无法做到。

这是我的

docker-compose.yml

：

version: '3.8'

services:
  angular:
    container_name: angular-nginx
    build: ./hello
      # context: ./hello
    ports:
      - "80:80"
    volumes:
      - ./hello/nginx.conf:/etc/nginx/nginx.conf:ro  
      - ./hello/dist/hello/browser:/usr/share/nginx/html
    depends_on:
      - db

  api:
    build:
      context: ./django
    command: gunicorn helloDocker.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - ./django:/app
    expose:
      - "8000"
    environment:
      - DEBUG=False
      - DJANGO_SECRET_KEY=your_secret_key
      - DATABASE_URL=postgres://myuser:mypassword@localhost:5432/vituclim
    depends_on:
      - db

  # Servicio de base de datos
  db:
    container_name: postgre
    image: postgres:latest
    environment:
      POSTGRES_DB: vituclim
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:

这是我的 nginx.conf，位于 Angular 项目文件夹中：

user nginx;
worker_processes auto; 
pid /var/run/nginx.pid; 

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types; 
    default_type  application/octet-stream; 

    access_log  /var/log/nginx/access.log;

    server {
        listen 80;

        server_name localhost;

        location / {
            root /usr/share/nginx/html;  
            index index.html;            

            try_files $uri $uri/ /index.html;
        }

        location /api/ {
            proxy_pass http://api:8000/;o
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

    }
}

对于

/api/

方向的最后一个配置，无论有没有它都不起作用。

我希望调用组件服务并检索要在 HTML 上显示的对象（传感器）列表。组件的 TS 和 HTML 都很好，因为问题来自于服务。

我想问题出在 Angular 或 nginx 配置上。但我看不清楚。

Answer 1

组件服务应调用http://localhost:80/api/sensores/

Nginx 正在您打开并映射端口 80 的

angular-nginx

容器上运行。
根据你的 nginx 配置，它将处理到你的服务器的重定向，并且能够做到这一点，因为你将端口 8000（在

api

服务中）暴露给其他 docker 容器（这就是为什么你可以 curl http:// api:8000/api/sensores/ 在 nginx 容器内）。

向任何想知道的人提供快速简单的解释：

ports

config 在“您的机器”上打开一个端口，并将其映射到您正在配置的容器中的端口。在本例中，例如，它打开 80 端口并将其映射到容器 angular-nginx 的 80 端口。
相反，

expose

config 在您正在配置的容器上打开一个端口，但只能从另一个容器访问该端口。