How to Set Up a Reverse Proxy for Multiple Self-Hosted Apps

In today’s rapidly evolving tech landscape, hosting applications on your own infrastructure is an appealing choice for developers, businesses, and hobbyists alike. Whether you're hosting a web app, a content management system, or a complex set of services, managing them individually can quickly become cumbersome. This is where a reverse proxy comes into play. A reverse proxy is a server that sits between client devices and your backend services, handling requests and directing them to the appropriate application.

For those self-hosting multiple apps, a reverse proxy simplifies the process, improving both the management and scalability of your infrastructure. This blog post will guide you through setting up a reverse proxy for multiple self-hosted apps, exploring the benefits, configurations, and best practices to ensure a seamless and efficient setup.

What is a Reverse Proxy?

Before diving into the setup, let’s first understand what a reverse proxy is. In simple terms, a reverse proxy sits in front of your backend servers, intercepting requests from clients (such as web browsers) and directing them to the appropriate application. Unlike a forward proxy, which forwards requests from clients to the internet, a reverse proxy works on behalf of the server, routing external requests to the right internal service.

A reverse proxy can perform several key functions:

1. Load Balancing: Distributes traffic across multiple servers to ensure no single server becomes overwhelmed.
2. SSL Termination: Handles secure HTTPS connections, freeing backend services from the need to manage SSL certificates.
3. Caching: Caches static content for faster retrieval, improving performance.
4. Security: Provides an extra layer of security by hiding the internal architecture of your services.
5. Centralized Authentication: Can enforce authentication across multiple applications through a single point.

Why Use a Reverse Proxy for Multiple Self-Hosted Apps?

When you host multiple self-contained applications on the same server or network, the complexity of managing them increases. This can include handling multiple ports, dealing with conflicts, and struggling with SSL certificates. Using a reverse proxy provides several advantages:

• Centralized Routing: Instead of accessing each application via its unique port (e.g., http://yourdomain.com:8001), you can access them via distinct subdomains or paths (e.g., app1.yourdomain.com or yourdomain.com/app1).
• SSL/TLS Offloading: A reverse proxy can handle SSL/TLS termination for all your apps, reducing the overhead on individual services.
• Improved Performance: With caching capabilities, reverse proxies can serve static content faster, reducing load on your backend services.
• Scalability: As your infrastructure grows, a reverse proxy can easily scale to accommodate more backend applications.

Choosing a Reverse Proxy

Several popular reverse proxy solutions are available, but the two most common and widely used are Nginx and Traefik. Let’s take a look at both options:

• Nginx: Nginx is a high-performance web server and reverse proxy server. It’s widely used for load balancing, security, and caching. It’s relatively simple to configure and extremely efficient in handling high volumes of traffic.
• Traefik: Traefik is a modern, dynamic reverse proxy designed for microservices and containerized environments like Docker and Kubernetes. It automatically discovers services and routes traffic accordingly, making it an excellent choice for developers working with Docker containers or Kubernetes.

In this blog, we’ll focus on setting up Nginx as a reverse proxy for multiple self-hosted applications, but the principles can easily be adapted to Traefik or other solutions.

Step-by-Step Guide: Setting Up Nginx as a Reverse Proxy

1. Install Nginx

The first step is to install Nginx on your server. Depending on your operating system, the installation steps may vary:

• For Ubuntu/Debian-based systems:

  bash
  sudo apt update
  sudo apt install nginx
  

• For CentOS/RHEL-based systems:

  bash
  sudo yum install nginx
  

After installation, start Nginx and enable it to start automatically at boot:

bash
sudo systemctl start nginx
sudo systemctl enable nginx

2. Configure Nginx for Reverse Proxy

Once Nginx is installed, you need to configure it to route traffic to your self-hosted apps. To do this, you will edit the Nginx configuration files.

Basic Structure of a Reverse Proxy

Nginx configuration files are located in the /etc/nginx directory, with the main configuration file being /etc/nginx/nginx.conf. However, the best practice is to create individual configuration files for each app under the /etc/nginx/sites-available directory and then create symlinks to /etc/nginx/sites-enabled.

For example, let’s say you have two self-hosted apps: app1 and app2, running on ports 8001 and 8002, respectively.

• Create a configuration file for app1:

bash
sudo nano /etc/nginx/sites-available/app1

Add the following configuration:

nginx
server {
    listen 80;
    server_name app1.yourdomain.com;

    location / {
        proxy_pass http://localhost:8001;
        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;
    }
}

This configuration tells Nginx to forward requests for app1.yourdomain.com to localhost:8001.

• Create a configuration file for app2:

bash
sudo nano /etc/nginx/sites-available/app2

Add the following configuration:

nginx
server {
    listen 80;
    server_name app2.yourdomain.com;

    location / {
        proxy_pass http://localhost:8002;
        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;
    }
}

This configuration tells Nginx to forward requests for app2.yourdomain.com to localhost:8002.

Enable the Sites

Once the configuration files are created, create symbolic links to the sites-enabled directory to enable them:

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

3. Test the Configuration and Reload Nginx

Before reloading Nginx to apply the changes, it’s a good idea to test the configuration for syntax errors:

bash
sudo nginx -t

If everything is fine, you will see a message like this:

bash
nginx: configuration file /etc/nginx/nginx.conf test is successful

Now, reload Nginx to apply the changes:

bash
sudo systemctl reload nginx

4. Verify the Setup

To verify that the reverse proxy is working, open a browser and visit app1.yourdomain.com and app2.yourdomain.com. You should see the respective applications loading through the reverse proxy.

Securing Your Reverse Proxy with SSL/TLS

To secure your reverse proxy, it’s essential to set up SSL/TLS encryption. You can use Let’s Encrypt, a free, automated certificate authority, to easily obtain SSL certificates.

• Install Certbot (Let's Encrypt client):

bash
sudo apt install certbot python3-certbot-nginx

• Obtain SSL Certificates:

bash
sudo certbot --nginx -d app1.yourdomain.com -d app2.yourdomain.com

This command will automatically configure SSL for your sites, including renewing the certificates.

5. Redirect HTTP to HTTPS

It’s a good idea to force HTTP traffic to redirect to HTTPS. You can do this by modifying your Nginx configuration to include the following:

nginx
server {
    listen 80;
    server_name app1.yourdomain.com;

    return 301 https://$host$request_uri;
}

Repeat for app2.yourdomain.com as well. After updating the configuration, reload Nginx:

bash
sudo systemctl reload nginx

Now, all HTTP traffic will be automatically redirected to HTTPS.

Advanced Configuration Options

Once you have the basic setup running, you may want to implement some advanced features:

• Load Balancing: If you have multiple instances of an app running, you can configure Nginx to load balance traffic between them.

  Example:

  nginx
  upstream app1_backend {
      server localhost:8001;
      server localhost:8002;
  }
  
  server {
      listen 80;
      server_name app1.yourdomain.com;
  
      location / {
          proxy_pass http://app1_backend;
      }
  }
  

• Authentication: Nginx can be configured to require basic authentication for certain applications using the auth_basic directive.

• Caching: Nginx can cache static content to improve performance.

Conclusion

Setting up a reverse proxy for multiple self-hosted applications is a powerful way to manage and scale your infrastructure. Whether you're using Nginx or another solution like Traefik, the process provides benefits such as simplified routing, SSL offloading, and better security. By following this guide, you can easily set up a reverse proxy for your own applications and enjoy a more streamlined and efficient hosting environment.

Remember to monitor the performance of your reverse proxy setup and keep your configurations updated to ensure optimal performance and security.