Dockerizing angular 应用程序时出现问题

Question

我是 docker 和 angular 的新手，我在构建 docker 图像时遇到错误 index.html generation failed 谁能帮我解决问题 index.html generation failed 错误或如果我的 docker 文件中有任何错误请纠正我。

Docker 文件

 FROM node:latest AS builder
 WORKDIR /csswebdockerimage
 COPY . .
 RUN npm i
 RUN npm run build --prod

 FROM nginx:alpine
 COPY --from=builder /csswebdockerimage/dist/cssweb-demo1/ /usr/share/nginx/html
 # EXPOSE 80
 # CMD ["nginx","-g"]

package.json

{
   "name": "cssweb-demo",
     "version": "0.0.0",
       "scripts": {
    "ng": "ng",
    "start": "ng serve  --poll=2000 --proxy-config proxy.config.json ",
    "build": "ng build",
     "watch": "ng build --watch --configuration development",
      "test": "ng test"
       },
     "private": true,
      "dependencies": {
    "@angular/animations": "~12.0.4",
   "@angular/cdk": "^12.0.4",
   "@angular/common": "~12.0.4",
   "@angular/compiler": "~12.0.4",
   "@angular/core": "~12.0.4",
   "@angular/forms": "~12.0.4",
   "@angular/material": "^12.0.4",
  "@angular/platform-browser": "~12.0.4",
   "@angular/platform-browser-dynamic": "~12.0.4",
   "@angular/router": "~12.0.4",
   "@ngtools/webpack": "^12.1.0",
   "angular-material": "^1.2.2",
   "rxjs": "~6.6.0",
   "tslib": "^2.1.0",
   "zone.js": "~0.11.4"
    },
  "devDependencies": {
   "@angular-devkit/build-angular": "~12.0.4",
   "@angular/cli": "~12.0.4",
   "@angular/compiler-cli": "~12.0.4",
   "@types/jasmine": "~3.6.0",
   "@types/node": "^12.11.1",
  "jasmine-core": "~3.7.0",
   "karma": "~6.3.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "~2.0.3",
  "karma-jasmine": "~4.0.0",
   "karma-jasmine-html-reporter": "^1.5.0",
  "typescript": "~4.2.3"
   }
   }

Answer 1

你可以尝试先复制 package.json 并安装所有软件包，然后再从当前目录复制所有文件，就像这样

Docker 文件

FROM node:12.7-alpine AS builder
WORKDIR /csswebdockerimage
COPY package.json ./
RUN npm cache clean --force
RUN npm i
COPY . .
RUN node_modules/.bin/ng build --prod --aot --build-optimizer --vendor-chunk=true


FROM nginx:1.19.0-alpine
VOLUME /var/cache/nginx
COPY --from=builder /csswebdockerimage/dist/cssweb-demo1/ /usr/share/nginx/html
COPY ./.config/.nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

Answer 2

不知道这是否解决了问题，但这是我如何 dockerize Angular

FROM node:12-alpine
LABEL Author="okira-e"

COPY package*.json ./
RUN npm install -g @angular/cli
RUN npm install

RUN mkdir src
WORKDIR /src

COPY . .

EXPOSE 4200

Dockerizing angular 应用程序时出现问题

Issue while Dockerizing angular application

angular

docker

dockerfile

alpine

angular11

Docker 文件

package.json