Dockerizing Angular 8+ application with Nginx-Alpine

Containerize Angular app to be built and to to run withing Docker image.

Dockerizing Angular 8+ application with Nginx-Alpine

In the root folder of your Angular app add three files:

### STAGE 1: Build ###
FROM node:alpine AS builder

# set working directory
COPY . .
RUN npm install
RUN npm install -g @angular/cli@8.3.25
RUN ng build --configuration production

## STAGE 2: Run ###
FROM nginx:1.19.4-alpine
COPY --from=builder /app/dist/myapplicationname /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf
server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
nginx configuration (default.conf)

Dockerfile is a multistage build. STAGE 1 builds our angular application.

STAGE 2 copies from STAGE 1 our built angular app and copies the files into what is going to be our running container.

The reason for doing multistage builds is to avoid having all unnecessary files within our docker container, such as build dependencies, build tools, extra files, ..., making our image as small as possible.

Run the build in the root folder of your app:

docker build -t myappname:latest .

Testing the containerized docker image

Simply run the docker container and go to: http://localhost

docker run -p 80:80 -ti myappname:latest

There you have it. Done and done.