我做了什么：

Question

我有一个 Angular 项目，我构建了一个映像，它在本地运行，换句话说，我可以使用 npm start 启动它，然后在 localhost:4200 上查看我的应用。
但是当我构建它时，我无法在浏览器中在同一个 url 上看到该项目。只是我的浏览器告诉我它无法连接。我也用过邮递员同样的错误。

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

> xxx@0.0.0 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
4200/tcp -> 0.0.0.0:4200
4200/tcp -> :::4200

这就是我所拥有的。

小细节

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

随着消息：

> xxxxxx@0.0.0 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! xxxx@0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the xxxx@0.0.0 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" ]。

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

> t-maj-voltron-front@0.0.0 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 npm@7.19.0 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/cli@7.3.9

# 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 标志将“侦听容器中的所有接口”

Docker 镜像构建但在浏览器中看不到

我做了什么：

检查端口

小细节

1 个答案: