Angular build for production inside Docker apparently being skipped

Question

After reading around to find a decent guide on how to build an angular app using Docker containers for deployment, I've settled on this Dockerfile:

FROM node:12.2.0 AS builder

WORKDIR /usr/src/ng-app
COPY . .
RUN npm ci
RUN npm install --no-progress --loglevel=error
CMD npm run build:prod --no-progress --loglevel=error

FROM nginx:alpine

RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /usr/src/ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
EXPOSE 4200

To give some context, this image is run by a Jenkins pipeline that prior to running it, simply clone the repository locally and then run a basic docker -t appname:latest ..

This is an example of output I've run directly from the Jenkins VM, with the user jenkins, adding --rm=false to inspect the images created:

Sending build context to Docker daemon  803.3kB
Step 1/11 : FROM node:12.2.0 AS builder
 ---> 502d06d3bfdf
Step 2/11 : WORKDIR /usr/src/ng-app
 ---> Running in e6737ca37c2d
 ---> 4eedd3d5f1bb
Step 3/11 : COPY . .
 ---> ab706d4786a1
Step 4/11 : RUN npm ci
 ---> Running in b6baf5e5661e

> fsevents@1.2.9 install /usr/src/ng-app/node_modules/fsevents
> node install


> core-js@2.6.9 postinstall /usr/src/ng-app/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js@2.6.9 postinstall /usr/src/ng-app/node_modules/karma/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> @angular/cli@8.0.6 postinstall /usr/src/ng-app/node_modules/@angular/cli
> node ./bin/postinstall/script.js

added 1024 packages in 14.498s
 ---> 7da6fc7fe1c6
Step 5/11 : RUN npm install
 ---> Running in 2df014d1ba6b
npm WARN @angular/animations@8.2.13 requires a peer of @angular/core@8.2.13 but none is installed. You must install peer dependencies yourself.
npm WARN @nth-cloud/ng-toggle@4.0.0 requires a peer of rxjs@^6.5.4 but none is installed. You must install peer dependencies yourself.

audited 1092 packages in 5.733s
found 723 vulnerabilities (700 low, 4 moderate, 19 high)
  run `npm audit fix` to fix them, or `npm audit` for details
 ---> 5d633645ce12
Step 6/11 : CMD npm run build:prod
 ---> Running in ab6dd15e76a1
 ---> 2ede963b2ceb
Step 7/11 : FROM nginx:alpine
 ---> 629df02b47c8
Step 8/11 : RUN rm -rf /usr/share/nginx/html/*
 ---> Running in 7b71bea26781
 ---> 8078910455af
Step 9/11 : COPY --from=builder /usr/src/ng-app/dist/ /usr/share/nginx/html
COPY failed: stat usr/src/ng-app/dist/: file does not exist

Inspecting the container that should have the /dist folder shows that there is in fact no folder, as if the command is not executed. Howver, running the command npm run build:prod directly in that image, once mounted as container, runs perfectly without any issue:

root@82a35d98b488:/usr/src/ng-app# npm run build:prod

> vets@0.1.0 build:prod /usr/src/ng-app
> ng build --configuration=production

Browserslist: caniuse-lite is outdated. Please run next command `npm update`

Date: 2021-01-26T10:24:19.807Z
Hash: 5a483fd2f6b20f6335bf
Time: 72314ms
chunk {0} runtime-es5.741402d1d47331ce975c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main-es5.3bdcbcdf43db7adf3586.js (main) 1.53 MB [initial] [rendered]
chunk {2} polyfills-es5.4e06eb653a3c8a2d581f.js (polyfills) 111 kB [initial] [rendered]

Date: 2021-01-26T10:25:31.394Z
Hash: 09fc7e775fd293abec30
Time: 71366ms
chunk {0} runtime-es2015.858f8dd898b75fe86926.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main-es2015.da87330ad9289237401f.js (main) 1.44 MB [initial] [rendered]
chunk {2} polyfills-es2015.5728f680576ca47e99fe.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} styles.3d74d94089157e391ac0.css (styles) 153 kB [initial] [rendered]

I've no clue as to why the command seems to be skipped and would greatly appreciate any pointers. Finding some documentation has been quite hard as everything seems to be scattered between git issues, paywalled articles and other stackoverflow questions that seems related but are not really the same problem.

The most common I've found is about the memory available and a slowness due to the terser plugin but it's not the case for me.

question from:https://stackoverflow.com/questions/65901287/angular-build-for-production-inside-docker-apparently-being-skipped

Answer 1

Your first stage is only setting a CMD to run the Angular build if it were eventually to be run in a standalone container. You need to RUN it at build time.

FROM ... AS builder
RUN npm install         # run now
CMD npm run build:prod  # recorded but not run
                        # (should probably be RUN to run now also)

FROM ...
COPY --from=builder /app/dist ...
# Fails, because `npm run build:prod` hasn't been run