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
> [email protected] install /usr/src/ng-app/node_modules/fsevents
> node install
> [email protected] 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 -)
> [email protected] 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/[email protected] 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/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @nth-cloud/[email protected] 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
> [email protected] 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.
2
Answers
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 toRUN
it at build time.This is my current setup for building angular apps in an container
Depending on your
angular.json
the output should be in./dist
or./dist/ng-app