node.js - Docker 镜像构建但在浏览器中看不到

Question

我有一个 Angular 项目，我构建了一个图像，它在本地运行，换句话说，我可以使用 npm start 启动它，并在 localhost:4200< 上查看我的应用程序。
但是当我构建它时，我无法在浏览器中的同一网址上看到该项目。只是我的浏览器告诉我无法连接。我也使用Postman同样的错误。

Dockerfile:

FROM node:latest

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app
EXPOSE 4200
CMD [ "npm", "start" ]

命令

docker build -t test-front .
...
docker run -it -p 4200:4200 test-front

它构建了图像并运行良好，但我无法在浏览器上访问它。

我用这个问题的答案来重新制作我的 Dockerfile: Cannot find module for a node js app running in a docker compose environment

---

我做了什么:

我执行了“docker exec -it NAME_OF_THE_CONTAINER/bin/bash”来进入容器，然后我在容器内重试了“npm start”。 由于端口 4200 已被使用，它要求我使用另一个端口:

root@a66d5cff3e64:/usr/src/app# npm start

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="473f3f3f077769776977" rel="noreferrer noopener nofollow">[email protected]</a> start
> ng serve

? Port 4200 is already in use.
Would you like to use a different port? Yes
✔ Browser application bundle generation complete.

...

** Angular Live Development Server is listening on localhost:43225, open your browser on http://localhost:43225/ **

项目在容器中正确启动，没有错误消息。 我认为，容器没有正确暴露端口。

检查端口

我使用了命令:

user@user:~/front$ docker port <container_name>
4200/tcp -> 0.0.0.0:4200
4200/tcp -> :::4200

这就是我所拥有的。

---

小细节

我想准确地说，在 Dockerfile 中使用 node:boron 导致 docker run 中断。当我使用 docker run 命令时它不起作用。

带有消息:

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6aeaeaeaeaeae96e6f8e6f8e6" rel="noreferrer noopener nofollow">[email protected]</a> start /usr/src/app
> ng serve

/usr/src/app/node_modules/@angular/cli/bin/ng:26
  );
  ^

SyntaxError: Unexpected token )
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.runMain (module.js:611:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:160:9)

npm ERR! Linux 5.11.0-22-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.17.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a9a9a9a991e1ffe1ffe1" rel="noreferrer noopener nofollow">[email protected]</a> start: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93ebebebebd3a3bda3bda3" rel="noreferrer noopener nofollow">[email protected]</a> start script 'ng serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the xxx package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs xxx
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls xxx
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /usr/src/app/npm-debug.log

---

我已将最后一行更改为 CMD [ "npm", "run", "ng", "serve", "-host", "0.0.0.0"]。

我可以构建图像，但是当我运行它时，我得到:

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="beca93d3dfd493c8d1d2caccd1d093d8ccd1d0cafe8e908e908e" rel="noreferrer noopener nofollow">[email protected]</a> ng
> ng "serve" "0.0.0.0"

Project '0.0.0.0' does not exist.
npm notice 
npm notice New minor version of npm available! 7.15.1 -> 7.19.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.19.0
npm notice Run npm install -g <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f9978994b9ced7c8c0d7c9" rel="noreferrer noopener nofollow">[email protected]</a> to update!
npm notice 

---

一个工作的 Dockerfile:

# base image
FROM node:12.14

# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7516191c35425b465b4c" rel="noreferrer noopener nofollow">[email protected]</a>

# add app
COPY . /app
EXPOSE 4200
# start app
CMD ng serve --host 0.0.0.0

Answer 1

我相信您缺少公开端口和本地主机之间的端口转发。 您可以通过-p进行转发或--expose标志和 <localport>:<containerport>

就您而言:

docker run -it -p 4200:4200 test-front

将转发来自 localhost:4200 的流量进入你的容器

编辑

I did some more reading看起来在 docker 中使用 Angular 时还有一个额外的步骤。

尝试编辑您的npm start命令 ng serve --host 0.0.0.0 。正如 Juan 非常彻底地解释的那样添加--host标志将“监听容器中的所有接口(interface)”