Skip to main content

NGINX Server Configuration

This document focuses only on the NGINX configuration of the vm-app-dev server. The settings on vm-app-prod are almost the same, so understanding the logic and structure here will be sufficient.

Folder Structure​

The NGINX configuration directory is located under /etc/nginx. There are two important folders here:

  • sites-available: The folder where all virtual host definitions are kept.
  • sites-enabled: The folder containing the active virtual hosts loaded by NGINX. Typically, this contains symbolic links to files inside sites-available.

The current folder and file structure is as follows:

sites-available
├── default
├── dev-admin.wastelog.co
├── dev-api-v2.wastelog.co
├── dev-collector.wastelog.co
└── dev-external.wastelog.co

sites-enabled
├── default -> /etc/nginx/sites-available/default
├── dev-admin.wastelog.co -> /etc/nginx/sites-available/dev-admin.wastelog.co
├── dev-api-v2.wastelog.co -> /etc/nginx/sites-available/dev-api-v2.wastelog.co
├── dev-collector.wastelog.co -> /etc/nginx/sites-available/dev-collector.wastelog.co
└── dev-external.wastelog.co -> /etc/nginx/sites-available/dev-external.wastelog.co

Below is an explanation of how to use the sites-available and sites-enabled directories when adding a new domain (virtual host) or removing an existing domain:

Adding a New Domain​

  1. Create the Configuration File: Create a new file in the sites-available directory, for example:

    sudo nano /etc/nginx/sites-available/new-domain.wastelog.co

    Fill in the content as needed.

  2. Create a Symlink: Use the following command to create a symbolic link (symlink) enabling the new file:

    sudo ln -s /etc/nginx/sites-available/new-domain.wastelog.co /etc/nginx/sites-enabled/

  3. Test the Configuration and Reload NGINX:

    sudo nginx -t
    sudo systemctl reload nginx

Removing an Existing Domain​

  1. Delete the Symlink: To disable a domain, delete the related symlink from the sites-enabled directory:

    sudo rm /etc/nginx/sites-enabled/old-domain.wastelog.co

  2. (Optional) Delete the Actual File: If the configuration file is no longer needed, you can also delete it from sites-available:

    sudo rm /etc/nginx/sites-available/old-domain.wastelog.co

  3. Test the Configuration and Reload NGINX:

    sudo nginx -t
    sudo systemctl reload nginx

Note: Using symbolic links (symlinks) allows you to easily add and remove domains and simplifies configuration management. You can add symlinks with ln -s and remove them with rm.

Virtual Host Configurations​

1. dev-admin.wastelog.co​

Configured for the React-based admin panel. File path: /var/www/admin/build

Example content:

server {
    listen 80;
    server_name dev-admin.wastelog.co;

    root /var/www/admin/build;

    index index.html;
    server_tokens off;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
  • SPA routing is supported with the try_files feature, which is required for modern frontend frameworks.
  • Gzip and basic security settings are available.

2. dev-api-v2.wastelog.co​

Configured for the backend API service. It forwards to port 5001 for the API application (running in the /var/www/backend directory).

Example content:

server {
    listen 80;
    server_name dev-api-v2.wastelog.co;

    # Security: Hide Nginx version
    server_tokens off;

    location / {
 # Forward Traffic to the Backend App
        proxy_pass http://127.0.0.1:5001;

        # Standard Proxy Headers
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        # WebSocket Support
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # Cloudflare / Real IP Handling
        proxy_set_header X-Real-IP $http_cf_connecting_ip;
        proxy_set_header X-Forwarded-For $http_cf_connecting_ip;
    }
}
  • All incoming API traffic is forwarded to the backend server running on 127.0.0.1:5001.
  • Extra headers are set to reflect the correct client IP to the app when using Cloudflare.
  • WebSocket support included.

3. dev-collector.wastelog.co​

Configuration for the Collector app, which is a separate Vue/React-based application. File path: /var/www/collector/dist

Example content:

server {
    listen 80;
    server_name dev-collector.wastelog.co;

    root /var/www/collector/dist;

    index index.html;
    server_tokens off;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

4. dev-external.wastelog.co​

For public-facing apps or landing-page style services. File path: /var/www/external

Example content:

server {
    listen 80;
    server_name dev-external.wastelog.co;

    root /var/www/external;

    index index.html;
    server_tokens off;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Application Directories on the Server​

Files belonging to each application are kept in the relevant folders under /var/www:

/var/www/
├── admin        # Admin Panel (React)
├── backend      # Your API application (NestJS)
├── collector    # Collector application (React)
├── external     # External application (React)
├── html         # (NGINX default directory)

SSL, HTTPS, Cloudflare​

  • SSL is terminated at the Azure Gateway.
  • Therefore, all configurations made on the NGINX server listen on only port 80 (HTTP).
  • All processes related to SSL and HTTPS are handled on the cloud side (Azure Gateway and Cloudflare).
  • SSL certificates and keys are generated and managed on Cloudflare.
  • No additional SSL setup or configuration is required on the (NGINX) server.