javascript - 提高 Angular 应用程序的 Docker 构建速度

Question

我已经使用 Docker 设置了 Angular 开发工作流。然而，构建 docker 并为 Angular 应用程序提供服务有点慢，大约需要 7 分钟(考虑到所有预下载的基础图像)。

./package.json:

{
  "scripts": {
    "ng": "ng",
    "docker-serve-dev": "docker-compose -f docker-compose.development.yml up --build",
  },
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.2.6",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.6",
    "@angular/compiler": "^7.2.6",
    "@angular/core": "^7.2.6",
    "@angular/forms": "^7.2.6",
    "@angular/http": "^7.2.6",
    "@angular/platform-browser": "^7.2.6",
    "@angular/platform-browser-dynamic": "^7.2.6",
    "@angular/router": "^7.2.6",
    "@asymmetrik/ngx-leaflet": "5.0.1",
    "@nebular/auth": "3.3.0",
    "@nebular/bootstrap": "3.3.0",
    "@nebular/security": "3.3.0",
    "@nebular/theme": "3.3.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.4",
    "@swimlane/ngx-charts": "^10.1.0",
    "angular-tree-component": "8.3.0",
    "angular2-chartjs": "0.5.1",
    "angular2-toaster": "^7.0.0",
    "bootstrap": "4.3.1",
    "chart.js": "^2.7.3",
    "ckeditor": "4.11.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.6.5",
    "echarts": "^4.1.0",
    "error-stack-parser": "^2.0.2",
    "eva-icons": "^1.1.1",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "jwt-decode": "^2.2.0",
    "leaflet": "1.4.0",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "nebular-icons": "1.1.0",
    "ng-snotify": "^4.3.1",
    "ng2-ckeditor": "^1.2.2",
    "ng2-completer": "2.0.8",
    "ng2-slim-loading-bar": "^4.0.0",
    "ng2-smart-table": "1.4.0",
    "ngx-echarts": "^4.1.0",
    "normalize.css": "8.0.1",
    "pace-js": "1.0.2",
    "primeicons": "^1.0.0",
    "primeng": "^7.0.5",
    "roboto-fontface": "0.8.0",
    "rxjs": "6.4.0",
    "rxjs-compat": "6.4.0",
    "socicon": "3.0.5",
    "stacktrace-gps": "^3.0.2",
    "stacktrace-js": "^2.0.0",
    "tinymce": "4.5.7",
    "tslib": "^1.9.3",
    "typeface-exo": "0.0.61",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.3",
    "@angular/cli": "^7.3.3",
    "@angular/compiler-cli": "^7.2.6",
    "@angular/language-service": "7.2.6",
    "@compodoc/compodoc": "^1.1.8",
    "@fortawesome/fontawesome-free": "^5.7.2",
    "@types/d3-color": "1.2.2",
    "@types/googlemaps": "^3.30.16",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/leaflet": "1.4.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^4.5.0",
    "conventional-changelog-cli": "2.0.12",
    "husky": "1.3.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "npm-run-all": "4.1.5",
    "prettier-tslint": "^0.4.2",
    "protractor": "~5.4.0",
    "rimraf": "^2.6.3",
    "stylelint": "9.10.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.12.1",
    "tslint-language-service": "^0.9.9",
    "typescript": "~3.1.6"
  },
  "tasks": [
    {
      "type": "npm",
      "script": "lint",
      "problemMatcher": {
        "base": "$tslint5",
        "fileLocation": "relative"
      }
    }
  ]
}

./docker-compose.development.yml:

version: '3.4'

services:
  cc-ui-docker-service:
    container_name: cc-ui-dev-container
    image: cc-ui-dev-dev
    build:
      context: .
      dockerfile: .docker/development.dockerfile
    environment:
      NODE_ENV: development
    volumes:
      - './:/usr/share/app'
      - /app/node_modules/
    ports:
      - 4200:80
    ## set your startup file here
    command: ['sh', '-c', 'ng serve --host=0.0.0.0 --watch --poll=2000']

./.docker/development.dockerfile:

FROM node:10.15.1-alpine

# set working directory
RUN mkdir /usr/share/app
WORKDIR /usr/share/app

# add `/usr/share/app/node_modules/.bin` to $PATH
ENV PATH /usr/share/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/share/app/package.json
COPY package-lock.json /usr/share/app/package-lock.json
RUN npm install
RUN npm install -g @angular/cli@7.3.3

# add app
COPY . /usr/share/app
EXPOSE 80 443
CMD ["ng", "--host=0.0.0.0","--watch", "--poll=2000", "serve"]

如何缩短构建时间？

Answer 1

您可以在 docker 外部构建应用程序，并仅将 dist 文件夹复制到 nginx docker image 中.

之后你不需要每次都安装node_modules。

Dockerfile 示例

FROM nginx:latest
ENV TZ=Europe/Moscow
COPY ./dist/my-app /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

nginx.conf 示例

server {
  server_name my-app;
  root /var/www/frontend/src;

  try_files $uri $uri/ index.html;
}