fbpx

How to Dockerize an AngularJS App

Do you have an AngularJS project that you would like to build into a Docker container? If   yes, you will have to start with making a Dockerfile inside your projects base folder.

### STAGE 1: Build the AngularJS app ###

FROM node:8-alpine as builder
COPY package.json package-lock.json ./
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app
WORKDIR /ng-app
COPY . .
## Production mode build
RUN $(npm bin)/ng build --env=staging --prod --build-optimizer


### STAGE 2: Add Nginx for hosting the AngularJS app ###

FROM nginx:1.13.3-alpine
## Removes the default nginx html files
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
Place the above contents in a filed called Dockerfile, and place this file in your projects base folder

Once you have the Dockerfile placed, you can use Docker itself to build the AngularJS project. You do not need to build your AngularJS project separately.

Building the Docker container

Run the following command from your project’s base folder. This is the same location as where you placed your Dockerfile.

docker build .

You can also build your container by naming and tagging it, with the following command

docker build -t blobcity/angular-app:latest .

This will create the container blobcity/angular-app with the tag latest

Running the Docker container

You can start the container using the following docker run command. When the container is started, the AngularJS app is deployed and ready to use.

docker run blobcity/angular-app:latest

If you are running this command on your own computer, then open the browser at the following URL to use your AngularJS application

http://localhost:80

If you have started the Docker container on a remote server, you will need a public IP address to that server for using your AngularJS app

http://<server-ip>:80

 

Nginx Proxy with Docker-Compose

docker-logoversion: '2'
services:
  nginxproxy:
   restart: always
   image: jwilder/nginx-proxy
   volumes:
     - /var/run/docker.sock:/tmp/docker.sock:ro
   ports:
     - "80:80"

  angular-app:
    image: "blobcity/angular-app:latest"
    restart: always
    environment:
      VIRTUAL_HOST: angular-app.blobcity.com
      VIRTUAL_PORT: 80
    expose:
     - "80"
docker-compose.yml

The above docker-compose.yml file provides and Nginx proxy confirmation, that forwards to an AngularJS application.  The above contents should be placed in a file called docker-compose.yml.

Replace image: “blobcity/angular-app:latest” with the image name of your application. It can be an AngularJS, NodeJS or any other docker based application.

Configure your domain, by replacing angular-app.blobcity.com with your domain.

To start Nginx and Angular app

> docker-compose up

To start as a daemon

> docker-compose up -d

To stop

> docker-compose stop