How to dockerize an Angular app that uses different environments?

Question

I'm new to Docker, and I'm trying to dockerize an Angular app. The Angular app has multiple environment configurations that are loaded using ng build -c=[configration_name] . Building for production loads environments.prod.ts , and building for staging loads environments.stage.ts .

To build the docker file, I'm considering approaches A and B below:

(A) If I first build the angular app using ng build and then copy the dist folder to the docker image - I would have to create multiple images - one for each environment:

Dockerfile for production:

#stage 1
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN ng build --prod # Loads variables from environments.prod.ts
#stage 2
FROM nginx:alpine
COPY --from=node /app/dist/demo-app /usr/share/nginx/html

Dockerfile for staging:

#stage 1
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN ng build -c=staging # Loads variables from environments.stage.ts
#stage 2
FROM nginx:alpine
COPY --from=node /app/dist/demo-app /usr/share/nginx/html

(B) If I first copy only the angular source-code files to the docker image, and then build the angular app - I would have a single image, but then (1) I will have to pass the environment name to the docker file, and (2) I won't be able to know if the build is successful in this line CMD ["ng", "build", "-c={{environment-name}}"] , because it would be run by the deployment.

#stage 1
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install

#stage 2
CMD ["ng", "build", "-c={{environment-name}}"]
FROM nginx:alpine
COPY /app/dist/demo-app /usr/share/nginx/html

Two questions: (1) What is the right approach to dockerize an Angular app with multiple environments? (2) How can I pass the environment name to the docker file?

I looked through other questions in SO, the closest one is this , but it is not exactly what I'm asking.

Answer 1

i'm not using angular but i can help you with your question, for an express app using typescript i have 3 stages (dev, prod and test), i build dockerfile with 3 stages and in each stage my NODE_ENV change: when i run docker build --target prod -t me/myimagename. i'm building an image for production without executing dev and test (builds), but for dev for example when i execute the command that target the dev stage: the prod and dev stage will be executed and for testing i execute the 3 stages.

FROM node:17-alpine as prod

ENV NODE_ENV=production

EXPOSE 8000

WORKDIR /app

RUN apk add --no-cache tini

COPY package*.json  ./

RUN npm ci  && npm cache clean --force


ENTRYPOINT ["/sbin/tini", "--"]

COPY . .

CMD [ "node","./dist/index.js" ]

######### developement stage :

FROM prod as dev

RUN apk update && apk add bash

ENV NODE_ENV=development

WORKDIR /app

RUN npm install --only=development && \
    npm install --global --unsafe-perm typescript && \
    npm install -D typescript &&\
    npm install --global @vercel/ncc && \
    npm install --global nodemon

CMD [ "nodemon","./dist/index.js" ]
######## testing stage

FROM dev as test

ENV NODE_ENV=development

CMD [ "npm","test"]

for production run

docker build --target prod -t me/myimagename. .

for dev run

docker build --target dev -t me/myimagename. .

for test stage run

docker build --target test -t me/myimagename. .