python - Dockerized Angular 4 和 Django 编译成功但是 localhost :4200 is not working

Question

我想将 Angular 4 前端与 Django 后端和 postgresql 数据库对接。此时我的文件如下所示。我注意到这是否正确完成？当我尝试 docker-compose up我得到的信息表明使用 Angular 4 的前端和使用 Django 的后端都已成功启动。不幸的是，当我打开 http://localhost:4200它不起作用(localhost:8001 似乎工作):

Safari can't open the page because the server unexpectedly dropped the connection

我的日志:

django_1   | Django version 1.11, using settings 'project.settings'
django_1   | Starting development server at http://0.0.0.0:8001/
django_1   | Quit the server with CONTROL-C.
angular_1  | ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **                                                             
angular_1  | Time: 20657ms
angular_1  | chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 232 kB {4} [initial] [rendered]
angular_1  | chunk    {1} main.bundle.js, main.bundle.js.map (main) 222 kB {3} [initial] [rendered]
angular_1  | chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 11.6 kB {4} [initial] [rendered]
angular_1  | chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.41 MB [initial] [rendered]
angular_1  | chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
angular_1  | webpack: Compiled successfully.

我的文件结构:

├── Backend
│   ├── AI
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   │   ├── __init__.cpython-36.pyc
│   │   │   ├── settings.cpython-36.pyc
│   │   │   ├── urls.cpython-36.pyc
│   │   │   └── wsgi.cpython-36.pyc
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py
├── Dockerfile
├── Frontend
│   └── angularProject
        ├── Dockerfile
│       └── all files in my angular project 
├── docker-compose.yml
└── requirements.txt

Dockerfile从前端:

# Create image based on the official Node 6 image from dockerhub
FROM node:6

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm install

# Get all the code needed to run the app
COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

Dockerfile从主目录:

FROM python:3.6.1
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip3 install -r requirements.txt
ADD . /code/

docker-compose.yml :

version: '3'

services:
  db:
    image: postgres
    environment:
      POSTGRES_USER: aso
      POSTGRES_PASSWORD: somepass
  django:
    build: .
    command: python3 MainDirectory/backend/myProject/manage.py runserver 0.0.0.0:8001
    volumes:
      - .:/code
    ports:
      - "8001:8001"
    depends_on:
      - db
  angular:
    build: MainDirectory/frontend
    ports:
      - "4200:4200"
    depends_on:
      - django

听力:

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
e214d1966286        dockerproj_angular   "npm start"              2 hours ago         Up 36 seconds       0.0.0.0:4200->4200/tcp   dockerpri_angular_1
b9fa457bd119        dockerproj_django    "python3 PROJ/backe..."   2 hours ago         Up 37 seconds       0.0.0.0:8000->8000/tcp   dockerpri_django_1
e36635448b6e        postgres            "docker-entrypoint..."   2 hours ago         Up 37 seconds       5432/tcp                 dockerpri_db_1
docker exec e214d1966286 ss -ltn
State      Recv-Q Send-Q        Local Address:Port          Peer Address:Port 
LISTEN     0      128              127.0.0.11:42403                    *:*     
LISTEN     0      128               127.0.0.1:4200                     *:*   

解决方案:
我换了 package.json "start": "ng serve"至 "start": "ng serve --host 0.0.0.0" .

Answer 1

该问题似乎与您的节点应用程序正在监听的接口(interface)有关。

当 docker 映射一个端口时，它在主机接口(interface)和 eth0 容器接口(interface)之间进行，而不是到 localhost 接口(interface)。

所以，正如你所说，改变这个:

"start": "ng serve"

到:

"start": "ng serve --host 0.0.0.0".

将解决问题。