Docker for Angular

Sinze Docker 17.05 you can use multi-stage builds. Thats perfect, now you can build an small container for your Angular app with in one file.

Here I will show you my example dockerized Angular setup with multi-stage build, running on nginx.

File Dockerfile

### Build app ###

FROM node:8-alpine as builder

ENV APP_TMP /tmp/app
ENV APP_HOME /home/node/app

COPY package.json yarn.lock $APP_TMP/

RUN echo \
 && cd $APP_TMP \
 && yarn config set no-progress \
 && yarn config set cache-folder $APP_TMP/.yarn-cache \
 && yarn install \
 && mkdir -p $APP_HOME \
 && cp -R ./node_modules $APP_HOME \
 && echo

WORKDIR $APP_HOME

COPY . $APP_HOME

RUN yarn build


### Setup nginx ###
FROM nginx:1.13-alpine

RUN rm -rf /usr/share/nginx/html/*

COPY nginx/default.conf /etc/nginx/conf.d/
COPY --from=builder /home/node/app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

File nginx/default.conf

server {

  listen 80;

  sendfile on;

  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;


  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

Build and run your docker image

Build your docker image with the tag your-app.

$ docker build -t your-app .

Now you can run your container from image your-app.

$ docker run -p 8800:80 your-app

Open your app on http://localhost:8800/ … 🎉