node.js - 浏览器不呈现 Dockerized AngularJS 应用程序

Question

因此，我正在尝试将 AngularJS 应用程序 dockerize 以进行一些练习。这是我的 repo https://github.com/Nigel33/angularJS_docker_test :
(它来自官方 Angular-phonecat 存储库，但我添加了 Dockerfile 和 docker-compose)

这是我的 Dockerfile:

FROM node:lts-alpine
RUN npm install -g http-server

WORKDIR /app
COPY package*.json ./

COPY . .

RUN npm install && \
    npm run start

EXPOSE 8000

CMD [ "http-server", "dist" ]

这是我的 docker-compose.yml:

version: '3'
services:
  front:
    build: .
    command: bash -c "npm start"
    volumes: 
      - .:/angular-phonecat
    ports: 
      - "8000:8000"

当我执行 docker-compose build 然后 docker-compose up 时，它似乎基于日志运行:

Building front
Step 1/8 : FROM node:lts-alpine
 ---> b95baba1cfdb
Step 2/8 : RUN npm install -g http-server
 ---> Using cache
 ---> 082793f64510
Step 3/8 : WORKDIR /app
 ---> Using cache
 ---> e76e23fa5a08
Step 4/8 : COPY package*.json ./
 ---> Using cache
 ---> 9960651e0929
Step 5/8 : COPY . .
 ---> c06eaebcfb38
Step 6/8 : RUN npm install &&     npm run start
 ---> Running in e2622118028d
npm WARN lifecycle angular-phonecat@0.0.0~postinstall: cannot run in wd angular-phonecat@0.0.0 npm run copy-libs (wd=/app)
audited 3777 packages in 6.409s
found 57 vulnerabilities (2 low, 2 moderate, 53 high)
  run `npm audit fix` to fix them, or `npm audit` for details

> angular-phonecat@0.0.0 prestart /app
> npm install

npm WARN lifecycle angular-phonecat@0.0.0~postinstall: cannot run in wd angular-phonecat@0.0.0 npm run copy-libs (wd=/app)
audited 3777 packages in 5.338s
found 57 vulnerabilities (2 low, 2 moderate, 53 high)
  run `npm audit fix` to fix them, or `npm audit` for details

> angular-phonecat@0.0.0 start /app
> http-server ./app -a localhost -p 8000 -c-1

Starting up http-server, serving ./app
Available on:
  http://localhost:8000
Hit CTRL-C to stop the server

但是当我打开浏览器并导航到 localhost:8000 时，我得到了“无法访问此站点”页面。知道有什么问题吗？谢谢!

更新

Dockerfile

FROM node:lts-alpine
RUN npm install -g http-server

WORKDIR /app
COPY package*.json ./

COPY . .

RUN npm install 

EXPOSE 8000
CMD ["npm", "run", "start"]

docker 组成:

version: '3'
services:
  front:
    build: .
    ports: 
      - "8000:8000"

终端

Building front
Step 1/8 : FROM node:lts-alpine
 ---> b95baba1cfdb
Step 2/8 : RUN npm install -g http-server
 ---> Using cache
 ---> 082793f64510
Step 3/8 : WORKDIR /app
 ---> Using cache
 ---> e76e23fa5a08
Step 4/8 : COPY package*.json ./
 ---> Using cache
 ---> 9960651e0929
Step 5/8 : COPY . .
 ---> Using cache
 ---> 35b3086dc43d
Step 6/8 : RUN npm install
 ---> Using cache
 ---> 961eddc4df33
Step 7/8 : EXPOSE 8000
 ---> Using cache
 ---> ede5977a2a0e
Step 8/8 : CMD ["npm", "run", "start"]
 ---> Using cache
 ---> efc2186c9bf2
Successfully built efc2186c9bf2
Successfully tagged angular-phonecat_front:latest
Chriss-Air:angular-phonecat chrisshopline$ docker-compose up
Creating network "angular-phonecat_default" with the default driver
Creating angular-phonecat_front_1 ... done
Attaching to angular-phonecat_front_1
front_1  | 
front_1  | > angular-phonecat@0.0.0 prestart /app
front_1  | > npm install
front_1  | 
front_1  | npm WARN lifecycle angular-phonecat@0.0.0~postinstall: cannot run in wd angular-phonecat@0.0.0 npm run copy-libs (wd=/app)
front_1  | audited 3777 packages in 4.622s
front_1  | found 57 vulnerabilities (2 low, 2 moderate, 53 high)
front_1  |   run `npm audit fix` to fix them, or `npm audit` for details
front_1  | 
front_1  | > angular-phonecat@0.0.0 start /app
front_1  | > http-server ./app -a localhost -p 8000 -c-1
front_1  | 
front_1  | Starting up http-server, serving ./app
front_1  | Available on:
front_1  |   http://localhost:8000
front_1  | Hit CTRL-C to stop the server

虽然仍然有同样的问题:-/

Answer 1

以上日志来自 Docker 构建，而不是来自容器。由于构建过程停留在

RUN npm install && \
    npm run start

您不需要在 Dockerfile RUN 启动应用程序命令。它应该在 CMD或 Entrypoint
更新您的 Dockerfile，它应该可以工作。

RUN npm install

此外，Docker-compose 中的某些内容应该很清楚。

    command: bash -c "npm start"
    volumes: 
      - .:/angular-phonecat

它将覆盖 CMD在 Dockerfile CMD [ "http-server", "dist" ] 中定义.

它还将覆盖 - .:/angular-phonecat .如果您已经在构建阶段复制了应用程序，则不需要音量。

更新:

我看到您在 package.json 中设置地址至 localhost .应该是 0.0.0.0或者你可以设置 CMD http-server .或 http-server -a 0.0.0.0 -p 8000 -c-1 .或 http-server -d /app/dist/ -a 0.0.0.0 -p 8000 -c-1.
此外， dist在您的存储库中不存在，我假设它存在于您在 docker build 期间复制的构建目录中。