Hosting Multiple Web Apps and APIs with Nginx Reverse Proxies

In today’s interconnected world, it’s common for developers to work on multiple web applications and APIs simultaneously. Managing these applications efficiently, especially when they run on the same server, requires careful configuration to avoid conflicts and optimize resource usage. One powerful tool for achieving this is Nginx reverse proxies. In this article, we’ll explore how to host multiple web apps and APIs using Nginx reverse proxies.

Understanding Nginx Reverse Proxies

Nginx is a high-performance web server known for its speed and scalability. In addition to serving static content, Nginx can act as a reverse proxy, forwarding client requests to other servers or applications. This allows Nginx to handle incoming requests, distribute traffic, and optimize performance across multiple backend services.

Setting Up Nginx

Before configuring Nginx as a reverse proxy, ensure it’s installed on your server. You can install Nginx using your package manager:

sudo apt-get update
sudo apt-get install nginx

Once installed, Nginx’s configuration files are typically located in /etc/nginx. The main configuration file is nginx.conf, but for better organization, we'll create separate configuration files for each web app or API in the sites-available directory.

Configuring Nginx for Multiple Web Apps

Let’s assume we have two web applications: App1 running on port 8000 and App2 running on port 9000. We want to access these apps via the same domain but different paths:

• http://example.com/app1 should point to App1.
• http://example.com/app2 should point to App2.

We’ll create separate configuration files for each app:

app1.conf

server {
    listen 80;
    server_name example.com;

    location /app1 {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $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 $scheme;
    }
}

app2.conf

server {
    listen 80;
    server_name example.com;

    location /app2 {
        proxy_pass http://localhost:9000;
        proxy_set_header Host $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 $scheme;
    }
}

Enabling and Testing Configuration

After creating these configuration files, symlink them to the sites-enabled directory:

sudo ln -s /etc/nginx/sites-available/app1.conf /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/app2.conf /etc/nginx/sites-enabled/

Then, test the Nginx configuration for syntax errors:

sudo nginx -t

If the test is successful, reload Nginx to apply the changes:

sudo systemctl reload nginx

Conclusion

Nginx reverse proxies provide a flexible and efficient solution for hosting multiple web applications and APIs on the same server. By carefully configuring Nginx to route traffic to different backend services based on URL paths or domain names, you can streamline your infrastructure and improve performance. Experiment with different configurations to suit your specific requirements and scale your applications with ease.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io