Learn how to deploy your Angular Application in a Docker Container
in 5-minutes

Taking an angular application into production can be daunting enough as it is. This is a simple, straight-forward, guide that will have you running your application inside of a docker container in 5-minutes flat.

We’ll use an node.js container to build your application but then move over into an nginx container to serve the final product. It’s a common misconception that running your production built application from a node.js http server is the right way to go. Please do not do this.

By moving into an nginx container we copy only your dist directory and leave everything else behind!

projectRoot/Dockerfile

First, place this Dockerfile in your applications root directory:

FROM node:alpine AS builder

WORKDIR /app

COPY package.json .
RUN npm install

COPY . .
RUN npm run build

FROM nginx:alpine

COPY --from=builder /app/dist/<name of your app>/* /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf

projectRoot/nginx.conf

Next, place this file called nginx.conf in your root directory as well. We need to configure nginx so that it rewrites all urls to index.html for angular processing:

server {

    server_name localhost;
    listen      80;
    root        /usr/share/nginx/html;
    index       index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

    }

}

Docker Commands

Now build your docker image:

$ docker build -t my-angular-app:v1 .

Then run it!

$ docker run -p 80:80 --name angular my-angular-app:v1

Open up http://localhost on your local machine and enjoy!

You can stop your docker container with:

$ docker stop angular

To see log files simply run:

$ docker logs -f angular