Deploy Angular Application With NGINX and Docker

ritesh4u — Fri, 21 Jan 2022 06:04:27 +0000

Hello folks, from past few months i was reading about the docker and deployment stuffs, so i thought it will be useful to share the steps which i usually follow.

Note: I presumed that u already know about the docker and how angular build takes place

If you didn't know much about docker you can go through link below

https://docs.docker.com/get-started/overview/

If you want to know more about angular you can go through link below

https://angular.io/cli/build

If you want to know more about nginx you can go through link below

https://nginx.org/en/docs/

Before start we need few things to be setup correctly
1) Nodejs

https://nodejs.org/en/download/

2) Angular CLI

https://angular.io/cli

3)Docker

https://docs.docker.com/get-docker/

So, Lets create simple angular application for this blog You can skip this step 1 if you have app with you

1) On Terminal run below command to create angular application

ng new angular-docker-blog

2) Create 2 file with name Dockerfile , .dockerignore and nginx.conf in project root folder

Dockerfile will consist of commands which needs to execute when we are building docker image
.dockerignore contains which file/folder we need to ignore while docker build takes place

Dockerfile



# STEP-1 BUILD
# Defining node image and giving alias as node-helper
# It's better to define version otherwise me might face issue in future build

FROM node:14-alpine3.15 as node-helper

#Accepting build-arg to create environment specific build
#it is useful when we have multiple environment (e.g: dev, tst, staging, prod)
#default value is development
ARG build_env=development

#Creating virtual directory inside docker image
WORKDIR /app

RUN npm cache clean --force

#Copying file from local machine to virtual docker image directory
COPY . .

#installing deps for project
RUN npm install

#creating angular build
RUN ./node_modules/@angular/cli/bin/ng build --configuration=$build_env

#STEP-2 RUN
#Defining nginx img 
FROM nginx:1.20 as ngx

#copying compiled code from dist to nginx folder for serving
COPY --from=node-helper /app/dist/angular-docker-blog /usr/share/nginx/html

#copying nginx config from local to image
COPY /nginx.conf /etc/nginx/conf.d/default.conf

#exposing internal port
EXPOSE 80

.dockerignore



.git
.gitignore
/node_modules

nginx.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;
    }
}

3)Docker build command

for creating docker image open terminal and run command

For creating development build



docker build -t ad-blog:development .

For creating tst build



docker build -t ad-blog:tst --build-arg build_env=tst .

For creating production build



docker build -t ad-blog:production --build-arg build_env=production .

-t: Tag (if not specified, docker will take "latest" by default)
--build-arg : for passing build argument, in our case we are passing 'build_env' to tell angular which environment to pick while creating build.

4) for creating docker container



docker run -p 8080:80 -d ad-blog:tst

-p for defining port
Syntex:-> [host-port]:[docker-port]
80 port is exposed from container and we are mapping that with 8080

-d for running running container in Detach mode
the docker will keep the console running

Finally

If you followed steps correctly you will have docker container running on port 8080 and you will able to access you application on http://localhost:8080/

Extras

if you want to see running docker containers you can run this command



docker ps

for stoping docker container



docker stop CONTAINER_ID

CONTAINER_ID you will get from docker ps command

GITHUB Repo

If you want to see how i configured for different environment
consider checking angular.json, environment folder here Github

DEV Community: ritesh4u