使用 Docker 容器化 Angular 项目答案

【问题标题】：Containerizing Angular project with Docker使用 Docker 容器化 Angular 项目
【发布时间】：2020-07-08 17:53:57
【问题描述】：

我最近学习了如何使用 Docker，并且正在尝试将我一直在从事的 Angular 项目容器化。

项目的package.json如下：

{
"name": "argon-dashboard-angular",
"version": "1.0.1",
"scripts": {
  "ng": "ng",
  "start": "ng serve --port 8080",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
},
"private": true,
"dependencies": {
  "@angular/animations": "7.2.4",
  "@angular/common": "7.2.4",
  "@angular/compiler": "7.2.4",
  "@angular/core": "7.2.4",
  "@angular/forms": "7.2.4",
  "@angular/http": "7.2.4",
  "@angular/platform-browser": "7.2.4",
  "@angular/platform-browser-dynamic": "7.2.4",
  "@angular/router": "7.2.4",
  "@ng-bootstrap/ng-bootstrap": "4.0.1",
  "bootstrap": "4.1.3",
  "chart.js": "2.7.3",
  "clipboard": "2.0.4",
  "core-js": "2.6.4",
  "ngx-clipboard": "11.1.9",
  "ngx-toastr": "9.1.2",
  "nouislider": "13.1.1",
  "rxjs": "6.4.0",
  "zone.js": "0.8.29"
},
"devDependencies": {
  "@angular-devkit/build-angular": "0.13.1",
  "@angular/cli": "7.3.1",
  "@angular/compiler-cli": "7.2.4",
  "@angular/language-service": "7.2.4",
  "@types/jasmine": "3.3.8",
  "@types/jasminewd2": "2.0.6",
  "@types/node": "11.9.0",
  "codelyzer": "4.5.0",
  "jasmine-core": "3.3.0",
  "jasmine-spec-reporter": "4.2.1",
  "karma": "4.0.0",
  "karma-chrome-launcher": "2.2.0",
  "karma-coverage-istanbul-reporter": "2.0.4",
  "karma-jasmine": "2.0.1",
  "karma-jasmine-html-reporter": "1.4.0",
  "protractor": "5.4.2",
  "ts-node": "8.0.2",
  "tslint": "5.12.1",
  "typescript": "3.2.4"
  }
}

我的Dockerfile如下：

FROM node:10.18.0-alpine AS build
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
CMD ["npm","start"]
EXPOSE 8080

我从镜像构建并运行我的容器：

docker build .
docker run <container-id>

容器运行后，我尝试访问 http://localhost:8080 ，但浏览器显示“localhost 拒绝连接”。

此外，我的 Docker 桌面应用程序在我的容器旁边显示这些按钮：

通常左侧会有另一个按钮在我的浏览器中打开容器的端口。

另外，在浏览了一些教程后，我注意到许多人建议使用 Nginx Docker 映像来为我的 Web 应用程序提供服务。这是必要的吗？为什么我不能通过ng serve 提供我的应用程序？

【问题讨论】：

开发服务器不是为生产使用而设计的。最好使用多阶段构建，其中 Node 容器运行 ng build 并且结果由例如服务提供。 Nginx。这也将导致容器更小（Nginx 映像比任何 Node 都轻得多，并且您不需要 node_modules 等）。
尝试在dockerfile上面移动EXPOSE 8080这一行，然后尝试docker restart <containerId>
将最后一行更改为 CMD ["ng","serve","--host", "0.0.0.0"]
您在运行 Docker 容器时是否映射了端口？ docs.docker.com/engine/reference/commandline/run 选项 --publish-all , -P
只是为了生产。如果你想在容器中进行开发，你会完全不同地设置它，例如将目录挂载到其中而不是复制文件。

标签： angular docker nginx dockerfile

【解决方案1】：

出于构建目的，最好使用如下所示的多阶段构建：

FROM node:10 AS builder

WORKDIR /app
RUN npm install -g @angular/cli
RUN ng new my-app --routing=true --style=css --skipGit=true --minimal=true
WORKDIR /app/my-app
RUN ng build --prod

FROM nginx
COPY --from=builder /app/my-app/dist/my-app/ /usr/share/nginx/html

https://docs.docker.com/develop/develop-images/multistage-build/

【讨论】：

如果我只是想构建一个开发服务器怎么办？我还应该使用 Nginx 映像吗？