What is NGINX? How to Serve a Web Page with NGINX?

Prerequisites: Basic Docker

Hello everyone, in this article, I will talk about a ‘web server’ technology that we can serve our web projects under the following headings:

1- What is Nginx?

2- How Can We Serve a Web Application with Nginx?

Let’s start with a definition.

1- What is NGINX?

Nginx, in its shortest form, is an open source ‘web server’ software. Its focus is on providing the highest performance and stable behavior to users in the simplest and smallest format. Besides being a simple web server, it has the necessary functions for ‘reverse proxy’ and ‘load balancing’ operations.

Nginx works on Unix-based operating systems, so unfortunately it does not have support on Windows machines or it would be more accurate to say that it has limited support.

2- How Can We Serve a Web Application with Nginx?

Now let’s put it into practice and serve a simple react application using Nginx Web Server. Since Nginx does not support windows machines, I will use Nginx as a docker container for everyone. For this, we will first need to use an nginx image as the ‘base’ image. Then we will create a Dockerfile and configure its settings to run our web project in this image.

Now let’s open the directory of our React project and create a file named nginx.conf for nginx configurations. I’ll continue with VSCode:

So what should be in an nginx.conf file?

You can take a look at a sample conf file on the Nginx official site here.

In this project, we will continue with the following conf file, let’s continue with these simple settings in the first step:

server {
  listen 80;
  include etc/nginx/mime.types;
  location /{
    root /usr/share/nginx/html/;
  }
}

listen → The config that specifies which port the server will broadcast on. In our case, it specifies which port to reach in the container.

include → We include the mime.types file where we specify all the types that our web service can offer to clients. We did not create this file ourselves because it exists in the specified directory in the Nginx image we are currently using. You can find sample content here. Or you can create your own in a similar format.

location → Here we specify which location the server will reference when it runs. Here we can specify an endpoint after the location clause.

For example:

location /test {
  root /usr/share/nginx/html/test/;
}

We can define more than one location as above.

root → We specify the file path where the source codes of the web page are located. In the Nginx container, this location is set as /usr/share/nginx/html. But we can specify a different location and copy the source files there.

Yes, we have created our nginx.conf file. The next thing to do is to compile our react application and serve it in the nginx image. For this, we first need to build our react project. Let’s do this with the following command:

npm run build

Now let’s run a container with the Nginx image we downloaded. Let’s copy the config file we created above and our react files created as a result of the build into this container. For these processes, we will create a Dockerfile in our React project. (I will use the lightened alpine version of Nginx. You can find other images of Nginx here) After creating, let’s add the following commands in it:

docker build -t nginx_react_image .

After the build process is complete, let’s get the container up and running with the following command:

docker run -p 3000:80 -d nginx_react_image

We mapped the ports with -p, that is, we opened our web service, which serves from port 80 in the container, to the outside world with port 3000. Now we can open the browser and access our react application, which we serve with nginx, from localhost:3000.

In this article, we have touched on how we can serve a web application using nginx without going into too much detail. For example, we used a react application, but you can serve any application you want through the nginx web server with this method. Likewise, you can run nginx on your local machine without running it on a docker container, or you can run it on a remote server. In my next articles, I will be answering the question of how to install a server on the web.

So how do we do Load Balancing with nginx? For the answer to this question, you can find the related article here.

You can find the source code of the work here.

Buy me a coffee:

Ahmet Emre Demirşen is creating software development tutorials

Thanks, Have a good work!