Docker：Angular 容器工作，但机器 node_modules 是空的，每次都会创建一个新卷

Question

我有一个 Angular 容器用于开发和启用热重载。我发现的问题之一是，在 Visual Studio 代码上，我的所有文件都有很多错误，因为 node_modules 文件夹是空的。但是，该应用程序可以正常工作运行。错误直接在我的文件夹上 If do npm install 。理想情况下，我想安装组件并让它们在我的机器和容器上可用。

此外，每次我运行我的容器 docker compose -f development.yml up -d 都会创建一个新的卷，所以当我不断地打开和关闭服务时，我最终会得到很多卷。

我的Docker文件是这样的：

FROM node:16

WORKDIR /app
COPY package.json ./

RUN npm install

COPY . .

EXPOSE 4200

然后我构建 Docker 文件以包含一个名为 angular_frontend 的图像。

我的 Docker 撰写文件是：

    services:
      angular-frontend:
        image: angular_frontend
        command: "npm run start-docker-dev"
        ports:
          - 4200:4200
        volumes:
          - /app/node_modules
          - .:/app
        hostname: frontend-localhost.domain.com

另外 package.json 我使用的是：

    {
      "name": "frontend",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start-dev": "PROJECT=frontend ng serve --ssl --host frontend.domain.com",
        "start-docker-dev": "PROJECT=frontend ng serve --ssl --proxy-config docker.dev.proxy.conf.json --host frontend.domain.com --public-host frontend.domain.com",
        "build-prod": "PROJECT=frontend NODE_ENV=production ng build --configuration=production",
        "build-qa": "PROJECT=frontend NODE_ENV=production ng build --configuration=qa",
        "build-dev": "PROJECT=frontend ng build",
        "lint": "ng lint",
        "test": "jest --coverage --reporters=default --reporters=jest-junit --detectOpenHandles",
        "test-watch": "jest --watch",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~12.2.13",
        "@angular/common": "~12.2.13",
        "@angular/compiler": "~12.2.13",
        "@angular/core": "~12.2.13",
        "@angular/forms": "~12.2.13",
        "@angular/platform-browser": "~12.2.13",
        "@angular/platform-browser-dynamic": "~12.2.13",
        "@angular/router": "~12.2.13",
        "@ed/subtract": "^2.4.1",
        "@fnando/sparkline": "^0.3.10",
        "chart.js": "^3.4.1",
        "chartjs-plugin-datalabels": "^2.0.0",
        "lodash": "^4.17.21",
        "ngx-cookie-service": "^12.0.0",
        "rxjs": "~6.6.6",
        "tailwindcss": "^2.0.4",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.4"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~12.2.13",
        "@angular-eslint/builder": "12.6.1",
        "@angular-eslint/eslint-plugin": "12.6.1",
        "@angular-eslint/eslint-plugin-template": "12.6.1",
        "@angular-eslint/schematics": "12.6.1",
        "@angular-eslint/template-parser": "12.6.1",
        "@angular/cli": "~12.2.13",
        "@angular/compiler-cli": "~12.2.13",
        "@types/chart.js": "^2.9.32",
        "@types/fnando__sparkline": "^0.3.3",
        "@types/jest": "^26.0.20",
        "@types/lodash": "^4.14.168",
        "@types/node": "^12.11.1",
        "@typescript-eslint/eslint-plugin": "4.28.2",
        "@typescript-eslint/parser": "4.28.2",
        "codelyzer": "^6.0.0",
        "eslint": "^7.26.0",
        "eslint-config-airbnb-typescript": "^12.3.1",
        "eslint-plugin-import": "2.22.1",
        "eslint-plugin-jsdoc": "30.7.6",
        "eslint-plugin-prefer-arrow": "1.2.2",
        "jest": "^26.6.3",
        "jest-junit": "^12.0.0",
        "jest-preset-angular": "^8.3.2",
        "ts-node": "~8.3.0",
        "typescript": "~4.3.5"
      },
      "jest": {
        "preset": "jest-preset-angular",
        "setupFilesAfterEnv": [
          "<rootDir>/setup-jest.ts"
        ],
        "roots": [
          "<rootDir>/projects/a",
          "<rootDir>/projects/b"
        ],
        "modulePaths": [
          "<rootDir>/projects/a",
          "<rootDir>/projects/b"
        ]
      }
    }

Answer 1

既然你说你的用例是为了开发目的 - 我建议稍微调整一下你的方法。

1。 Dockerfile

只有在 Dockerfile 中运行 npm install 才有意义，如果您将使用此映像来运送带有模块的完整代码。由于您将它用于开发 - 它在这里没用。此外 - 因为您将把整个本地文件夹安装到容器中 - 删除 ADD 和 COPY 命令。

FROM node:16

WORKDIR /app

EXPOSE 4200

2。 docker-撰写

您应该删除 /app/node_modules 卷并更改容器将使用的命令：

services:
  angular-frontend:
    image: angular_frontend
    command: "bash -c 'npm install && npm run start-docker-dev'"
    ports:
      - 4200:4200
    volumes:
      - .:/app
    hostname: frontend-localhost.domain.com

这样 - 您的整个项目文件夹作为一个卷映射到 /app 文件夹。 npm install 命令将在容器启动时运行。

Docker：Angular 容器工作，但机器 node_modules 是空的，每次都会创建一个新卷

Docker: Angular container works, but machine node_modules are empty and a new volume is created each time

node-modules

docker

dockerfile

docker-compose

angular

1。 Dockerfile

2。 docker-撰写