Nginx

What is Nginx?

Nginx is a high-performance HTTP server and reverse-proxy, and it is used by many of the world’s biggest websites (like Instagram) along with many different programming languages and frameworks.

Nginx is very simple to use and consumes very little resources like RAM and CPU. It is used to direct traffic to different parts of your project, serving static files and even load balancing. 

Add Nginx to your project

To add Nginx to your projects on Doprax, you need to go to the ‘services’ subsection and click on add service button. You will be directed to add service page, where you can see the list of services that you can add. Click on Nginx service and click ‘add’. Now your project has Nginx! 

When Nginx is added to your project, it will act as the front door of your web application. Every request that arrives at your web application will first hit the Nginx, and it is the responsibility of Nginx to direct it (proxy it) to an appropriate part of your project (usually the main code).

nginx.conf – how to configure Nginx

To configure the Nginx service, go to the ‘Services’ subsection, find Nginx service and add a mounted config file config:

Mount a config file to nginx

For the name of the config file, enter nginx.conf. For the mount path, enter /etc/nginx/nginx.conf and click the ‘CREATE’ button.

create a mounted config file to nginx

Then click the edit button beside the name of the config file, and you will be directed to the online editor.

Start editing the config file

Proxy requests

On the editor page, on the left side of the screen, click ‘nginx.cof’ to open it. A sample Nginx configuration is provided below. It is from the deployment of a Django application. Learn more about Django deployment here.

The SSL encryption (HTTPS) is terminated before it reaches the Nginx instance and all certificates are automatically managed by Doprax, so you don’t need to worry about it here. You just need to use port 80.

The below configuration will config Nginx to direct all traffic to / path to the main source code using this directive. proxy_pass http://yc2e1q5zz8aep:5000; yc2e1q5zz8aep is the hostname of the main source code. You can find all hostnames in the Deploy subsection. Also, all requests that arrive ar /static/ URL will be treated as static files, and they will be served from /app_data/static/ folder 

worker_processes 8;
user root;
error_log  /var/log/nginx/error.log;
pid /var/run/nginx.pid;
events {}
http {
    include mime.types;
    server {
        listen 80; 
        server_name django-examplelhqq.eu-ckhzajsnkv.doprax.com; # copy Your server name here
        location / {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto https;
            proxy_pass http://yc2e1q5zz8aep:5000; # copy main hostname here
        }
        location /static/ {
            alias /app_data/static/;
        }
    }
}

Serving static files

We will use Nginx to act as reverse-proxy for our application and also serve the static files of our application. Websites need to serve images, CSS files and JavaScript files, and other kinds of files static files. For Nginx, in order to be able to serve any static files, it needs to have direct access to them. There are two options:

  • Directly mount a volume  
  • Share a volume

If your static files do not belong to any specific app or service, you can directly mount a volume to the Nginx instance and copy the files there to be served by Nginx. The previous scenario is a little unlikely. Usually, the static files are either part of our main source code (CSS, JavaScript) or are user-uploaded content that is also controlled by the main source code.

For the sample configuration above (borrowed from Django deployment), the static files are part of the Django application. In this case, we need to create a volume for the main and share it with Nginx. To make our static files available to Nginx, we need to create a volume and mount it to the main container (Our source code), and also share it with Nginx. 

Go to the ‘volumes’ subsection and click on ‘create volume’. Give it a title and then select ‘Main’ to mount the volume on. For the path, enter /app_data/static/ and then click the ‘create’ button. 

add volume for static files

Now we need to share this volume with the Nginx service so that it could serve static files to our users. To do that, click on the ‘share’ button on the static volume that we just created. It has been marked by a red rectangle in the image below:

Share static volume with nginx

You will then be prompted to choose the service to mount the volume on and to also enter the path to mount the volume on the target service. Choose ‘Nginx’ and enter /app_data/static/ exactly like mount path of static volume on main. Tick the ‘Read-only’ option as the mount mode so that Nginx could only read from it and not write on it. Click on
“SUBMIT’.

Share volume with nginx

​Now we have a volume that has been shared with two services. 

Please do tell us, did you find the content above helpful?