1 min read

Dockerizing Angular 8+ application with Nginx-Alpine

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

.git
node_modules
dist
/e2e
/docs
.gitignore
.dockerignore
### STAGE 1: Build ###
FROM node:alpine AS builder

# set working directory
WORKDIR /app
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
EXPOSE 80
Dockerfile
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.

Author image

Igor Rendulic

  • Salt Lake City
Explorer, developer, ... Using this website as the bookmarking service for the things that might become useful in the future.
You've successfully subscribed to Igor Technology
Great! Next, complete checkout for full access to Igor Technology
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.