Reducing Docker image size from 1.4GB to 15MB - Angular app

Disclosure; No sane developer would start from a 1.4GB container image for this scenario, but I’m lazy, and I want to make my case :)

In general, an Angular application is accessed through the standalone server that is shipped along with it. This server is meant to be used only for development and it’s not for production workloads. Let’s go with it and work our way down the trenches.

Being lazy couch potatoes

First, let’s see what we get if we bundle our layers without any optimization, directly from the parent Node image and leverage the built-in Angular development server.

FROM node:19.7.0
WORKDIR /app
COPY . .
RUN npm install
RUN npm install -g @angular/cli
EXPOSE 4200
CMD ["ng", "serve", "--host", "0.0.0.0"]

$ docker build -t app:lazy .

Optimizing the parent image

There are actually quite a few options you can choose from when building your Node-based container. We are going to switch Linux distributions and use Alpine as the base image, which is way lighter and thus leads to a much slimmer container image.

FROM node:19.7.0-alpine3.16
WORKDIR /app
COPY . .
RUN npm install
RUN npm install -g @angular/cli
EXPOSE 4200
CMD ["ng"…