Angular + Docker
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