Python 已成功编译带有Angular 4和Django的Docker,但localhost:4200不工作
我想将Angular 4前端与Django后端和postgresql数据库对接。此时,我的文件如下所示。我确信这是正确的吗?当我尝试docker compose up时,我得到的信息是,Angular 4的前端和Django的后端都已成功启动。不幸的是,当我打开它时,它不起作用localhost:8001似乎起作用:Python 已成功编译带有Angular 4和Django的Docker,但localhost:4200不工作,python,django,angular,typescript,docker,Python,Django,Angular,Typescript,Docker,我想将Angular 4前端与Django后端和postgresql数据库对接。此时,我的文件如下所示。我确信这是正确的吗?当我尝试docker compose up时,我得到的信息是,Angular 4的前端和Django的后端都已成功启动。不幸的是,当我打开它时,它不起作用localhost:8001似乎起作用: django_1 | Django version 1.11, using settings 'project.settings' django_1 | Starting
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:
服务器在端口4200上运行,但您在8010上暴露端口80时使用了:
angular:
build: MainDirectory/frontend
ports:
- "8010:80" # <==== HERE
depends_on:
- django
您可能还需要让服务器npm启动脚本绑定到0.0.0.0。我已将angular中的端口更改为-4200:4200,但仍然无法工作。是超时还是服务器出错?您是否更改了绑定?safari无法打开页面,因为服务器意外断开了连接。我只更改了更新帖子中显示的端口。我对safari不是非常熟悉,但听起来它现在可以连接到服务器了,问题已经改变。进步尝试使用Safari开发者工具、angular日志和/或Wireshark找出服务器断开连接的原因。应该有一个错误记录的地方,以帮助查明新的问题。在谷歌浏览器我得到这个页面不工作。localhost未发送任何数据。错误\u空\u响应
angular:
build: MainDirectory/frontend
ports:
- "8010:80" # <==== HERE
depends_on:
- django
angular:
build: MainDirectory/frontend
ports:
- "4200:4200"
depends_on:
- django