如何修复 Docker 在 Angular 15 中卡在 “RUN npm run build” 的问题

huangapple go评论61阅读模式
英文:

How do I fix Docker getting stuck at "RUN npm run build" with Angular 15

问题

I'm trying to build an Angular 15 project in Docker, but the build always hangs at the RUN npm run build step and never completes. This a fresh install ng new ng-sandbox-15 with the Dockerfile, .dockerignore, and nginx.conf copied from a working Angular 14 fresh install.

./Dockerfile


# Copy dependency definitions
COPY package.json package-lock.json ./

# disabling ssl for npm for Dev or if you are behind proxy
RUN npm set strict-ssl false

## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm ci && mkdir /app && mv ./node_modules ./app

# Change directory so that our commands run inside this new directory
WORKDIR /app

# Get all the code needed to run the app
COPY . /app/

# Build the application
RUN npm run build

FROM nginx:1.17-alpine
## From 'builder' copy published folder
COPY --from=builder /app/dist /usr/share/nginx/html

COPY nginx/nginx.conf /etc/nginx/nginx.conf

# Expose the port the app runs in
EXPOSE 4000

CMD ["nginx", "-g", "daemon off;"]

./package.json:

{
  "name": "ng-sandbox-15",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.5",
    "@angular/cli": "~15.2.5",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

As seen in the image below, the Angular build completes successfully in 26.5 seconds, but the step is still stuck 20+ minutes later.

英文:

I'm trying to build an Angular 15 project in Docker, but the build always hangs at the RUN npm run build step and never completes. This a fresh install ng new ng-sandbox-15 with the Dockerfile, .dockerignore, and nginx.conf copied from a working Angular 14 fresh install.

./Dockerfile

FROM node:16-alpine as builder

# Copy dependency definitions
COPY package.json package-lock.json ./

# disabling ssl for npm for Dev or if you are behind proxy
RUN npm set strict-ssl false

## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm ci && mkdir /app && mv ./node_modules ./app

# Change directory so that our commands run inside this new directory
WORKDIR /app

# Get all the code needed to run the app
COPY . /app/

# Build the application
RUN npm run build


FROM nginx:1.17-alpine
## From 'builder' copy published folder
COPY --from=builder /app/dist /usr/share/nginx/html

COPY nginx/nginx.conf /etc/nginx/nginx.conf

# Expose the port the app runs in
EXPOSE 4000

CMD ["nginx", "-g", "daemon off;"]

./package.json:

{
  "name": "ng-sandbox-15",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.5",
    "@angular/cli": "~15.2.5",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

As seen in the image below, the Angular build completes successfully in 26.5 seconds, but the step is still stuck 20+ minutes later.

如何修复 Docker 在 Angular 15 中卡在 “RUN npm run build” 的问题

The most similar problem I've seen is https://stackoverflow.com/questions/70271194/docker-build-getting-stuck-at-npm-run-build-step, and I disagree with the only proposed answer CMD ["npm", "run", "build"] because that will not wait for the build to complete before trying to copy the built project into the nginx html directory.

答案1

得分: 1

I face the same issue when updated my angular 13 projects to 15.

我在将我的 Angular 13 项目升级到 15 版本时遇到相同的问题。

I have 4 projects, 2 will build success and 2 will stuck after the RUN npm run build.

我有 4 个项目,其中 2 个构建成功,而另外 2 个在执行 RUN npm run build 后卡住。

After compare the projects I found out in my case is causing by the analytics inside the angular build.

在比较这些项目后,我发现在我的情况下问题是由 Angular 构建中的分析功能引起的。

Change the parameter in angular.json from

angular.json 中的参数更改为

"cli": {
"analytics": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX",
},

to

"cli": {
"analytics": false,
},

This solution solved my issue. The root cause may be causing by upload the analytics data are blocked inside docker build.

这个解决方案解决了我的问题。根本原因可能是由于在 Docker 构建中阻止了分析数据的上传。

英文:

I face the same issue when updated my angular 13 projects to 15.

I have 4 projects, 2 will build success and 2 will stuck after the RUN npm run build. After compare the projects I found out in my case is causing by the analytics inside the angular build.

Change the parameter in angular.json from

"cli": {
  "analytics": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX",
},

to

"cli": {
  "analytics": false,
},

This solution solved my issue. The root cause may be causing by upload the analytics data are blocked inside docker build

答案2

得分: 0

你能检查复制路径,应该是./而不是. /在Docker文件中。

另请查看以下代码:

  1. 在单独的层上安装和存储Node模块将防止每次构建时不必要的npm安装:
RUN npm install && mkdir /app && mv ./node_modules ./app
  1. 更改目录,以便我们的命令在此新目录内运行:
WORKDIR /app
  1. 获取运行应用程序所需的所有代码
COPY ./ /app/
英文:

Can you check the copy path it should be ./ not . / in the docker file.

Also please look into the below code

  1. Installing and storing node modules on a separate layer will prevent unnecessary npm installs at each build:
RUN npm install && mkdir /app && mv ./node_modules ./app
  1. Change directory so that our commands run inside this new directory:
WORKDIR /app
  1. Get all the code needed to run the app
COPY ./ /app/

huangapple
  • 本文由 发表于 2023年4月11日 08:21:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/75981611.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定