Dockerizing an angular app

In this article I will show you how to dockerize an angular application using nginx server. If you would like more information about the nginx server you can find it here: https://www.nginx.com/

To get started we create a dockerfile with two stages:

Stage 1
Installing and building the angular application:

1. Copy the angular code from a local machine to a docker machine.
2. Copy the packages.json to install dependencies.
3. Install the angular-cli and npm dependencies.
4. Build an angular application.

For this stage we use a node machine image from the dockerhub https://hub.docker.com/_/node

Stage 2

1. Copy the angular dist folder from the previous docker machine named build on to the nginx location folder.
2. Then we use the default cmd that starts the nginx server.

For this stage we will use a node machine from the dockerhub https://hub.docker.com/_/nginx

FROM node:12.7-alpine AS build
WORKDIR /app
COPY / ./
COPY package*.json ./

RUN npm install -g @angular/cli@10.0.4 && \
    npm install && \
    ng build
COPY . .

STAGE 2: Run

FROM nginx:1.17.1-alpine
WORKDIR /app
COPY --from=build /app/dist/ui /usr/share/nginx/html

Once that is done, we will create the Dockerfile, and build the image to run it.

> docker build -t <image_name> -f Dockerfile .

Now we can verify if the image is created by running the following command.

> docker images

Now that we have created the image in order to run it we have two options:.
1) Run it using the docker command line or 2) run it using the docker-compose.
If we decide to run it using the docker-compose we have to create a docker-compose.yml file like this:

version: '3'
services:
    server:
        image: <image_name>
        ports:
            - "80:80"
        tty: true
        expose:
            - "80" 
        stdin_open: true
        environment:
            - MODE=dev
        command: <command to run>

If we want to run a command when we run the image we can specify on command.
In addition to that, we can run the image without the docker-compose by using a command line.

docker run -d -p 80:80 <image_name> command

Hope you liked and also helps you in case you have to dockerize an angular app.

Comments

[Daniel Frascarelli]

an amazing article!! as usual , @ollita7 !