ng serve 无法在 Docker 容器中工作 [英] ng serve not working in Docker container

问题描述

我有这个 Docker Compose 配置，我只需在其中创建一个 NodeJS 容器并安装 Angular里面的 CLI.

I have this Docker Compose configuration where I simply create a NodeJS container and install Angular CLI inside.

在 docker-compose up -d 之后，我可以使用 docker-compose run node bash 在容器内进行 SSH 连接.ng new 完美运行，但 ng serve 似乎不起作用.它已正确启动，控制台中没有错误.但是，如果我访问 localhost(我将端口 4200 映射到 80)，则不会加载任何内容.

After a docker-compose up -d, I'm able to SSH inside the container with docker-compose run node bash. ng new works perfectly but ng serve does not seem to work. It's launched correctly, no error in the console. But, if I visit localhost (ad I mapped port 4200 to 80), nothing loads.

我错过了什么吗?

推荐答案

在您的 Dockerfile 中，您缺少 暴露 行如:

In your Dockerfile you are missing the Expose line such as:

EXPOSE 4200

尝试将它放在 docker 文件中最后一个 RUN 命令之前.

Try placing it before your last RUN command in the docker file.

这一行暴露了容器本身的端口(在本例中为 4200)，因此来自 compose 的映射有效(80:4200).

This line exposes the port in the container itself (4200 in this case) so the mapping from compose works (80:4200).

Compose 就是这样做的:将 80 从主机转发到容器中的 4200.但它不知道也不关心 4200 是否真的在被监听.dockerfile 中的 Expose 确保构建映像时，为将来运行的容器公开此端口，以便您的 ng serve 可以侦听它.

Compose just does this: forward 80 from the host to 4200 in the container. But it doesn't know or care if the 4200 is actually being listened to. The Expose in the dockerfile makes sure when the image is built, to expose this port for the future running containers, so your ng serve can listen to it.

分辨率

因此，要使用 docker-compose run 获得您想要的内容，请使用 publish 发布端口.由于 run 不使用来自 docker-compose.yml 的映射，它会忽略它们.所以像这样使用它:

So to get what you want with docker-compose run, use publish to publish the ports. As run doesn't use the mappings from your docker-compose.yml, it ignores them. So use it like this:

docker-compose run --publish 80:4200 node bash

然后创建 angular 应用程序并按照您的方式启动它.

Then create the angular app and start it up as you were doing.

测试示例以供将来参考

cd tmp(或任何可写文件夹)

ng new myProject

cd myProject

ng serve --host 0.0.0.0 (--host 0.0.0.0 监听容器的所有接口)

ng serve --host 0.0.0.0 (--host 0.0.0.0 to listen to all the interfaces from the container)

然后在您的浏览器中，转到 localhost，您现在应该会看到 Angular 欢迎页面，因为端口 4200 已发布并绑定到主机端口 80 通过我上面显示的发布命令.

Then in your browser, go to localhost and you should see the angular welcome page now as the port 4200 is published and bound to the host port 80 through the publish command as I showed above.

每次遇到端口转发问题时，如果您打开一个新终端，保留执行原始 run 命令 的另一个终端并运行 docker ps，您将在端口列:

Everytime you have port forwarding issues, if you open a new terminal keeping the other terminal where you executed the original run command and run docker ps you will see this in the Ports column:

0.0.0.0:80->4200/tcp 这意味着您在端口 80 上的主机正在成功转发到您在端口 4200 上的容器.

0.0.0.0:80->4200/tcp which means that your host on port 80 is forwarding to your container in port 4200 successfully.

如果您看到类似 4200/tcp 而不是 -> 部分的内容，则意味着没有发布映射或端口.

If you see something like 4200/tcp and not the -> part, that means there is no mappings or ports published.

这篇关于ng serve 无法在 Docker 容器中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！