Question

我有一个工作正常的Angular 5应用，正在努力与docker-compose配合使用。

尽管许多人都遇到过类似的问题，但是建议的解决方案对我不起作用：

Access Angular app running inside Docker container

Cannot access nodejs app on browser at localhost:4200 (docker run -p 4200:4200 ....)

nodejs app doesn't connect to localhost when running within a docker container

ng serve not working in Docker container

not able to access angular2 app from docker container

这是我的docker-compose.yml

version: '3'
services:

  webui-ng:
     container_name: bcrm-webui-ng
     build: ./webui-angular   
     ports: 
      - 4200:4200

下面是位于./webui-angular下的Docker文件。

FROM node:9.6.1

# Create app directory
WORKDIR /usr/src/app

COPY package*.json ./

# Install app dependencies
RUN npm install

# Bundle app source
COPY . .

# Expose API port to the outside
EXPOSE 4200

# Launch application
#CMD ["npm","run ng serve"]
#CMD ["npm", "run", "ng", "serve", "--host", "0.0.0.0"]
#CMD ["npm", "run", "ng", "serve", "--host", "0.0.0.0", "--port", "4200"]
#ENTRYPOINT ["npm", "run", "ng", "serve", "--open", "--host", "0.0.0.0", "--port", "4200"]
CMD npm run ng serve --host 0.0.0.0

请注意，在最后一行注释的所有命令均无效。也就是说，当我打开http://localhost:4200

时，在Firefox中总是出现“连接已重置”错误

这是命令行输出

bcrm-webui-ng | 
bcrm-webui-ng | > Xyz@0.1.0 ng /usr/src/app
bcrm-webui-ng | > ng "serve" "0.0.0.0"
bcrm-webui-ng | 
bcrm-webui-ng | ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
bcrm-webui-ng | Date: 2018-09-24T14:03:38.509Z                                                           
bcrm-webui-ng | Hash: 4ac012def02ed7e0a08a
bcrm-webui-ng | Time: 19848ms
bcrm-webui-ng | chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
bcrm-webui-ng | chunk {main} main.bundle.js, main.bundle.js.map (main) 1.81 MB {vendor} [initial] [rendered]
bcrm-webui-ng | chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 221 kB {inline} [initial] [rendered]
bcrm-webui-ng | chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 28.2 kB {inline} [initial] [rendered]
bcrm-webui-ng | chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.25 MB [initial] [rendered]
bcrm-webui-ng | 
bcrm-webui-ng | webpack: Compiled successfully.

Answer 1

您的码头工人没有得到它第一次得到的port地址。每次您使用run而不是start码头工人时，都会发生这种情况。它将4200端口与第一个容器绑定在一起（如果您运行docker ps -a，则会看到它）。

解决方案是

在运行docker compose之前删除先前的容器
每次执行docker compose时都要进行docker检查
为您的容器设置一个名称，以便您的docker compose会警告您不要创建重复的容器。可以使用docker run命令中的--name完成。

您可以选择其中之一。

Answer 2

进一步调查，我知道问题不在docker端，而是以下命令不起作用

npm run ng serve --host 0.0.0.0 --disable-host-check

但是只有通过才能很好地工作。

ng serve --host 0.0.0.0 --disable-host-check

Angular 5应用程序无法通过网络或Docker外部访问

2 个答案: