Dockerize Angular 英雄之旅

Question

我是 docker 的新手，我正在尝试对 Angular 示例项目“英雄之旅”进行 docker 化，您可以在此处找到：

https://angular.io/generated/zips/toh-pt6/toh-pt6.zip

我已经根据我的研究创建了 Dockerfile，它看起来像这样：

DOCKERFILE

FROM node:latest

RUN mkdir -p /src/app
WORKDIR /src/app

COPY package.json /src/app
RUN npm install

COPY ./ /src/app

EXPOSE 4200
ENTRYPOINT npm start

当我构建容器时，它不会抛出任何错误。

然后我尝试运行图像

docker run -p 4200:4200 toh:app

然后它运行 ng serve（我想知道为什么，我没有把这个命令放在 Dockerfile 上，但我认为这是由于 Node 的版本（？））并说它编译成功。

但是在 localhost:4200 上会出现一条带有 ERR_EMPTY_RESPONSE 的“本地主机没有发送任何数据”的消息。

我看到，当涉及到 Docker 问题时，人们通常也会发布 package.json 文件，所以我也发布了。

PACKAGE.JSON

{
    "name": "angular-tour-of-heroes",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},
"private": true,
"dependencies": {
  "@angular/animations": "~10.1.6",
  "@angular/common": "~10.1.6",
  "@angular/compiler": "~10.1.6",
  "@angular/core": "~10.1.6",
  "@angular/forms": "~10.1.6",
  "@angular/platform-browser": "~10.1.6",
  "@angular/platform-browser-dynamic": "~10.1.6",
  "@angular/router": "~10.1.6",
  "angular-in-memory-web-api": "^0.11.0",
  "rxjs": "~6.6.0",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.2"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.1001.7",
  "@angular/cli": "~10.1.7",
  "@angular/compiler-cli": "~10.1.6",
  "@types/node": "^12.11.1",
  "@types/jasmine": "~3.5.0",
  "@types/jasminewd2": "~2.0.3",
  "codelyzer": "^6.0.0",
  "jasmine-core": "~3.6.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~5.0.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage-istanbul-reporter": "~3.0.2",
  "karma-jasmine": "~4.0.0",
  "karma-jasmine-html-reporter": "^1.5.0",
  "protractor": "~7.0.0",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~4.0.2"
 }
}

我认为问题出在 Dockerfile 上，但我不知道我是否遗漏了明显的东西或可能是什么。

非常感谢。

编辑

正如您在下面的评论中看到的那样，我在尝试使用 ng serve 运行容器来将其 docker 化时遇到了问题，并且我问自己为什么每个人都在使用 nginx 服务器。所以在我问了一些朋友之后，他们的回答是：

Ng serve 用于开发，但是当你尝试 dockerize 你的应用程序时，你应该通过将 /dist 文件复制到 usr/nginx/share/html 来使用 nginx 服务器

我修改了 docker，现在它看起来像这样：

FROM node:10-alpine as build-step

RUN mkdir -p /app

WORKDIR /app

COPY package*.json /app

RUN npm install

COPY . /app

RUN npm run build --prod

#NGINX

FROM nginx:1.17.1-alpine

COPY --from=build-step /app/dist/angular-tour-of-heroes /usr/share/nginx/html

顺便感谢 FlorentB 帮助我解决这个问题。

Answer 1

节点 dockerfile 中不需要入口点。它使用 npm start 命令自动启动

注意：

• WORKDIR 指令选择文件夹作为以下操作的根目录。无需在 /src/app 中复制。喜欢。
• 我会复制 package*.json 以同时复制 -lock 文件
• ng serve 被执行是因为你的 package.json 文件是这样的。 **“开始”：“ng服务”， ** 行暗示当您使用 npm start 时，它会执行 ng 服务。

Answer 2

正如您在下面的评论中看到的那样，我在尝试使用 ng serve 运行容器来将其 dockerize 时遇到了问题，并问自己为什么每个人都在使用 nginx 服务器。所以在我问了一些朋友之后，他们的回答是：

Ng serve 用于开发，但是当你尝试 dockerize 你的应用程序时，你应该通过将 /dist 文件复制到 usr/nginx/share/html 来使用 nginx 服务器

我修改了 docker，现在它看起来像这样：

FROM node:10-alpine as build-step

RUN mkdir -p /app

WORKDIR /app

COPY package*.json /app

RUN npm install

COPY . /app

RUN npm run build --prod

#NGINX

FROM nginx:1.17.1-alpine

COPY --from=build-step /app/dist/angular-tour-of-heroes /usr/share/nginx/html

顺便感谢 FlorentB 帮助我解决这个问题。