NGINX: Serving Multiple Apps on Subdirectories

Introduction

NGINX is a powerful web server that excels at serving static content, functioning as a reverse proxy, and handling HTTP requests efficiently. With its lightweight and modular design, NGINX can handle multiple applications on a single server by using subdirectories. In this tutorial, you’ll learn how to configure NGINX to serve multiple web applications through different subdirectories effectively.

Prerequisites

• An Ubuntu server with NGINX installed.
• Root or sudo privileges.
• Basic understanding of NGINX configuration files.
• At least two web applications ready to be served.

Basic NGINX Configuration

Before diving into the multi-application setup, let’s ensure your NGINX is set up correctly. Open your server block configuration typically found at /etc/nginx/sites-available/.

server {
    listen 80;
    server_name example.com;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}

Test the configuration and reload NGINX:

sudo nginx -t
sudo systemctl reload nginx

Now you should be able to see your main website by navigating to http://example.com.

Serving Multiple Apps on Subdirectories

Say you have two apps: a blog platform and a project management tool you want to serve on /blog and /projects subdirectories. Here’s how you can set it up.

1. Configuring the first subdirectory

location /blog {
    alias /path/to/your/blog;
    try_files $uri $uri/ =404;

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    }
}

This configuration defines the subdirectory and its physical path on your server. You must also specify how to handle PHP files if your application uses them.

2. Adding the second subdirectory

location /projects {
    alias /path/to/your/projects;
    try_files $uri $uri/ /index.html;
}

Repeat the same process for the other applications you are serving. Ensure the alias points to the appropriate directory where your application is located.

Once again, test your configuration and reload NGINX.

sudo nginx -t
sudo systemctl reload nginx

At this point, you should be able to access your applications on http://example.com/blog and http://example.com/projects.

Advanced Configuration

If you need to add WebSocket support or handle static content differently, you need an advanced setup.

WebSocket Support

Some applications, like chat servers or real-time notification services, might use WebSocket. Here’s how to set up WebSocket on a subdirectory:

location /socketapp {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

This ensures that NGINX properly handles WebSocket connections at the specified subdirectory.

Handling Static and Media Files

Applications often have numerous static files like images, JavaScript, and CSS. You might want to optimize the way NGINX serves these files.

location ~* ^/blog/static/ {
    alias /path/to/your/blog/static/;
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

This configuration serves static files in the /blog/static/ directory with caching rules to optimize speed and performance.

Securing Your Subdirectories

Security is crucial, and you may want to restrict access to certain applications. Here’s an example of how to secure a subdirectory with basic authentication:

location /privateapp {
    auth_basic "Restricted Access";
    auth_basic_user_file /etc/nginx/.htpasswd;
    alias /path/to/private/app;
}

You’ll need to create an .htpasswd file with credentials. Use htpasswd command to do this.

Conclusion

Configuring NGINX to serve multiple apps on subdirectories requires understanding of server blocks, locations, and aliases. With these principles in mind, catering to complex hosting needs becomes simplified, leveraging the full potential of NGINX’s architecture.