与Angular 4和Django的Docker编译成功,但localhost:4200不能正常工作

我想用Django后端和postgresql数据库dockerize Angular 4前端。 在这一刻我的文件如下所示。 我记得确定这是否正确完成? 当我尝试docker-compose up我得到了Angular 4前端和Django后端都成功启动的信息。 不幸的是,当我打开http:// localhost:4200它不起作用(localhost:8001似乎工作):

 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 

服务器在端口4200上运行,但是您在8010上暴露了80端口:

  angular: build: MainDirectory/frontend ports: - "8010:80" # <==== HERE depends_on: - django 

你应该可以使用:

  angular: build: MainDirectory/frontend ports: - "4200:4200" depends_on: - django 

您可能还必须让您的服务器( npm start脚本)绑定到0.0.0.0