浏览器不呈现 Dockerized AngularJS 应用程序

Question

所以，我正在尝试对 AngularJS 应用程序进行 dockerize 以进行一些练习。这是我的回购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

• 它将覆盖在 Dockerfile CMD [ "http-server", "dist" ] 中定义的 CMD。
• 它还将覆盖- .:/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 期间复制的构建目录中。