NGINX, Docker and NodeJS
Tags: nginx, proxy, javascript, programming
Published: 2022-08-04 12:17:00

_This article focuses on using Nginx with Nodejs and Docker. Follow this [article](https://dev.to/drsimplegraffiti/dockerize-nodejs-application-2p3i) to Learn how to dockerize a Nodejs application._ 


---

#### Prerequisite
1. Install NodeJs on your computer.
1. Basic understanding of Express and Nginx
1. Knowledge of Docker containerization 

&nbsp;

#### Table of Content
⚫ Introduction to Nginx
⚫ Installation
⚫ Nginx terms
⚫ Serving static files
⚫ Mime types
⚫ Location block
⚫ Running Nginx with Docker as a HTTP load balancer 
⚫ Conclusion
⚫ Resources

---

#### Introduction
_NGINX is pronounced as "engine-ex" is open source software that can be used for web serving, reverse proxying, caching, load balancing, media streaming, and other purposes._

Nginx can be used effectively as an HTTP load balancer to distribute traffic to multiple application servers and to improve web application performance, scalability, and reliability.

Nginx excels at serving static content quickly, has its own robust module system, and can forward dynamic requests as needed to other software.

NGINX improves content and application delivery, security, and scalability and availability for the internet's busiest websites. 

---

#### Installing Nginx 
To download and install Nginx, go to this [link](https://nginx.org/en/download.html) and follow the installation [instructions ](http://nginx.org/en/docs/windows.html)

##### Steps
To download and install Nginx, go to this link and follow the installation instructions. 

After downloading the zip pack, unzip

![tempsnip](https://user-images.githubusercontent.com/70065792/182035243-26e2c055-75e9-4591-9bfd-e57b6bad9aca.png)

Cut and paste the unzip folder in your <mark>Program File Folder</mark>. Double click the `nginx.exe` or run with cmd

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdlb86hhqmj697rqaz5g.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/on2wnnm8kkyfemjnqiqv.png)

---

You can also see if nginx is properly installed by launching cmd from the directory where you downloaded the nginx file. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m6zhypmvj4a7py8sra8.png)

Another method is to use the following command to start ngnix in the project folder. `start nginx`

Run the `tasklist` command-line utility to see nginx processes: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhgvphdywbzjqry040lh.png)

&nbsp;

#### Here are a few commands to use
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjm0ttfrtzid3z7kokv7.png)
 
### How to shutdown Nginx server 
1. **Method 1**: End the server by pressing Ctrl + Shift + Esc. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i458qx2b9iy3nllqc5ta.png)
 
1. **Method 2**: Run the command 
`nginx -s stop`

&nbsp;

#### Check to see if Nginx was properly installed on your computer. 
Navigate to localhost:80 in your browser. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5pxl6o2ibmeodj8rp89.png)

Navigate to the network tab in the developer tool and inspect the browser. We can see that we are using nginx to serve our web content to our browser **highlighted in green**. 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnj27gzjx600iaq6zxzh.png)


---

#### Nginx terms
The key-value pairs are referred to as Directives and the block of codes enclosed within a curly brackets are referred to as context
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zfano08eoiumdj2n0co.png)

---

#### Serving static content
Now that we've established that our nginx is operational, let's use it to serve static content. Let's open our ngix.conf file in vscode. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pfg14rnmewkkoh9s4tn.png)


To serve static files using nginx, let's create a new folder, a new file called `index.html` linked to a css

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz129xkvpf35rpdh8fgk.png)

Now we can serve our custom web content using the nginx.conf file


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4canrwvih7q960detji.png)

The rectangle highlighted in `orange` is the file path to the root folder for the content we want to serve when we listen to the port we allocated to the server context. Then we reload Nginx with the `nginx -s reload` command

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeaesj73dryqgy2nlhbb.png)

Yeah! 🥳
Our content has just been served, but there is a problem: the CSS style has not yet been loaded; we will address this shortly. 
 
  

---

#### Mime Types
Mime types are media that indicates the nature and format of a document, file, or assortment of bytes. [source](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)

Let's update our nginx.conf file to accommodate our style sheet.

Add the following commands to the conf file, reload Nginx, and then 'ctrl + shift + r' your browser. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0fgykgzkonl9gftn3p7.png)

We got the following after hard reloading our server: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2kj4luybd5ql3mcjmtj.PNG)

##### Making use of Nginx mime types 
Nginx comes preloaded with various mime types. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2chx3xkknk31mmuy5lbw.png)

Using the 'include' keyword, we can add this mime.types to our nginx.conf file. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1eippjtz9sf7qamxhc7.png)
 
 
---

#### Location block
Assume we want to serve content from a different folder, we can use the location block
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5mtxjtu40bn9ho64tm6.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33iapt1y8qug4fpez1r7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gejjcu85xl7haot4jmmh.png)
  

---


#### Running Nginx with Docker as a HTTP load balancer

**Why the need to Load-Balance our application?**
Load balancing across multiple application instances is a commonly used technique for optimizing resource utilization, maximizing throughput, reducing latency, and ensuring fault‑tolerant configurations. [source](https://docs.nginx.com/nginx/admin-guide/load-balancer/http-load-balancer/)

##### Proxying HTTP Traffic to a Group of Servers 
Create a new folder called server and run the following code to initiate a node app
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4uxnu5int8s802z7pu9.PNG)
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d8c5me5skmxlelo4s3r.png)

Let's create our server
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59p725gbuhdt2e4lek0i.png)
 
Run the application
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ty8u49njic48w80n7rr.png)


##### Containerizing our application
You can use any of the methods to build an image and run a Docker container
**Method 1**
Let's build our docker image
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apmzdri2h2jf1cj7uwlq.png)

Let build multiple container
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqndv3ns86iu0vbcp5m3.PNG)
   
**Method 2**
Use docker compose to run four different containers in docker
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz2zxg3w8uah5kwfrb0v.png)

Result
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b0jh00cbhi5lcxhnl3n.png)
 

We can now configure our `nginx.conf` file for the load balancer.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqs0b7g8bhqt3gi2umt9.png)

Result
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zi9kh26b0q8bw4rvhjw.png)
 

#### Conclusion
I hope this post was useful in getting started with Nginx as a static content server and load balancer.
For more information, consult the official documentation. 

#### Resources
[Mime types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
[Nginx](https://www.nginx.com/)
[Install nginx with instructions](https://www.maketecheasier.com/install-nginx-server-windows/)