Deploy Angular Application With NGINX and Docker
Tags: angular, docker, nginx, webdev
Published: 2022-01-21 06:04:27

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


![file location in root folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qhsibdo4x2bqyrxhtba.png)

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/](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](https://github.com/ritesh4u/angular-docker-blog)