使用buildx构建Angular多架构Docker镜像失败求助

环境配置 #

Dockerfile #

FROM node:14.1-alpine AS builder
WORKDIR /app

COPY package.json package-lock.json ./
#RUN npm cache clean --force
RUN npm install

ENV PATH="./node_modules/.bin:$PATH"

COPY . ./

RUN ng build

FROM nginx:1.17-alpine
COPY nginx.conf /etc/nginx/nginx.conf 
COPY --from=builder /app/dist/ /usr/share/nginx/html

Buildx构建命令 #

docker buildx build  --push --platform linux/amd64,linux/arm64 --tag <some-tag> .

报错信息 #

#0 12.99 Compiling @angular/cdk/overlay : es2015 as esm2015
#0 13.45 Compiling @angular/cdk/layout : es2015 as esm2015
#0 13.63 Compiling ngx-window-token : es2015 as esm2015
#0 13.74 Compiling @angular/material/button : es2015 as esm2015
#0 13.75 Compiling @angular/material/form-field : es2015 as esm2015
#0 13.80 Compiling @angular/material/tooltip : es2015 as esm2015
#0 14.21 Compiling @angular/platform-browser-dynamic : es2015 as esm2015
#0 14.23 Compiling @angular/material/select : es2015 as esm2015
#0 14.41 Compiling ngx-clipboard : es2015 as esm2015
#0 14.59 Compiling @ngx-translate/core : es2015 as esm2015
#0 14.79 Compiling ng-inline-svg : module as esm5
#0 14.91 Compiling @ng-bootstrap/ng-bootstrap : es2015 as esm2015
#0 14.94 Compiling @angular/router : es2015 as esm2015
#0 15.05 Compiling ngx-webstorage : es2015 as esm2015
#0 15.46 Compiling ng-apexcharts : es2015 as esm2015
#0 15.68 Compiling ngx-perfect-scrollbar : es2015 as esm2015
#0 15.89 Compiling @ng-select/ng-select : es2015 as esm2015
#0 15.99 Compiling ngx-pagination : module as esm5
#0 16.44 Compiling @angular/material/paginator : es2015 as esm2015
#0 16.53 Compiling @angular/material/icon : es2015 as esm2015
#0 17.14 - Generating browser application bundles...
#0 56.04 ✔ Browser application bundle generation complete.
#0 57.65 - Generating ES5 bundles for differential loading...
------
Dockerfile:12
--------------------
 10 |     COPY . ./
 11 |     
 12 | >>> RUN ng build
 13 |     
 14 |     FROM nginx:1.17-alpine
--------------------
ERROR: failed to solve: process "/bin/sh -c ng build" did not complete successfully: exit code: 137

解决方案 #

• 增加Buildx构建容器内存：exit code 137本质是进程因内存不足被系统终止。直接在构建命令中指定内存限制：

  docker buildx build --memory 8g --push --platform linux/amd64,linux/arm64 --tag <some-tag> .
  

  也可提前创建带内存配置的builder实例：

  docker buildx create --name mybuilder --driver-opt memory=8g
  docker buildx use mybuilder
  docker buildx build --push --platform linux/amd64,linux/arm64 --tag <some-tag> .
  

• 优化Angular构建参数：

  • 修改ng build为生产模式并关闭差分加载，降低内存消耗：

    RUN ng build --prod --no-differential-loading
    

  • 编辑angular.json，调整budgets或打包策略进一步优化。

• 更换Node基础镜像：alpine镜像虽小巧，但内存管理效率和依赖完整性不如完整版。改用非alpine镜像：

  FROM node:14.1 AS builder
  

• 启用Buildx缓存：复用构建缓存减少重复编译的内存压力：

  docker buildx build --push --platform linux/amd64,linux/arm64 --tag <some-tag> \
    --cache-from type=registry,ref=<some-tag>-cache \
    --cache-to type=registry,ref=<some-tag>-cache,mode=max .
  

内容的提问来源于stack exchange，提问作者boycod3