DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for NGINX, Docker and NodeJS
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on

NGINX, Docker and NodeJS

This article focuses on using Nginx with Nodejs and Docker. Follow this article to Learn how to dockerize a Nodejs application.


Prerequisite

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

Β 

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 and follow the installation instructions

Steps

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

After downloading the zip pack, unzip

tempsnip

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

Image description

Image description


You can also see if nginx is properly installed by launching cmd from the directory where you downloaded the nginx file.
Image description

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

Β 

Here are a few commands to use

Image description

How to shutdown Nginx server

  1. Method 1: End the server by pressing Ctrl + Shift + Esc.
    Image description

  2. Method 2: Run the command
    nginx -s stop

Β 

Check to see if Nginx was properly installed on your computer.

Navigate to localhost:80 in your browser.

Image description

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


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


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

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

Image description

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

Image description

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

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

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

We got the following after hard reloading our server:
Image description

Making use of Nginx mime types

Nginx comes preloaded with various mime types.
Image description

Using the 'include' keyword, we can add this mime.types to our nginx.conf file.
Image description


Location block

Assume we want to serve content from a different folder, we can use the location block
Image description

Image description

Image description


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

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

Image description

Let's create our server
Image description

Run the application
Image description

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

Let build multiple container
Image description

Method 2
Use docker compose to run four different containers in docker
Image description

Result
Image description

We can now configure our nginx.conf file for the load balancer.
Image description

Result
Image description

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
Nginx

Top comments (0)

🌚 Life is too short to browse without dark mode