How to Host Multiple Sites on the Same Server Using Nginx?

In this tutorial, we'll go through the steps to host multiple sites on the same server using Nginx. We'll cover the installation of Nginx, basic configuration, and examples of setting up a Node.js app, a static site, a PHP app, and a Django app on different ports.

What is Nginx?

Nginx is a high-performance web server, reverse proxy server, and load balancer that is widely used to serve dynamic and static content on the web.

It's known for its efficiency, scalability, and ability to handle large numbers of concurrent connections, making it a popular choice for modern web applications.

Install Nginx

First, you need to install Nginx on your server. For most Linux distributions, you can use the following commands:

# For Debian/Ubuntu:
sudo apt update
sudo apt install nginx

# For CentOS/RHEL:
sudo yum install epel-release
sudo yum install nginx

# For Fedora:
sudo dnf install nginx

After installing Nginx, you can start and enable it to run on boot:

sudo systemctl start nginx
sudo systemctl enable nginx

Basic Nginx Configuration

Nginx configuration files are located in the /etc/nginx/ directory. The main configuration file is /etc/nginx/nginx.conf, but you’ll mainly work with files in the /etc/nginx/sites-available/ and /etc/nginx/sites-enabled/ directories.

For each site, you create a separate configuration file in the /etc/nginx/sites-available/ directory and create a symbolic link to it in the /etc/nginx/sites-enabled/ directory.

Default Nginx Server Block

Nginx uses "server blocks" to handle requests to different domains or IP addresses. Here's a basic example:

server {
    listen 80;
    server_name example.com www.example.com;

    root /var/www/example.com/html;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}

• listen 80;: Specifies that this block will listen on port 80.
• server_name example.com www.example.com;: The domain names that this block will handle.
• root /var/www/example.com/html;: The root directory of your website.
• index index.html index.htm;: The default files to serve.

Hosting a Node.js App

To host a Node.js app, you’ll run the app on a specific port and configure Nginx to act as a reverse proxy.

1- Configure Nginx

Create a server block for your Node.js app:

server {
    listen 80;
    server_name node.example.com;

    location / {
        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;
        proxy_cache_bypass $http_upgrade;
    }
}

This configuration forwards requests to your Node.js application running on port 3000.

2- Deploy Node.js App

Ensure your Node.js app is running:

cd /path/to/your/nodejs/app
npm install
node app.js

Alternatively, you might want to use a process manager like PM2 to keep your Node.js app running:

npm install pm2 -g
pm2 start app.js

Hosting a Static Site

Static sites are the easiest to host with Nginx.

1- Configure Nginx

Create a server block for your static site:

server {
    listen 80;
    server_name static.example.com;

    root /var/www/static.example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

2- Deploy Static Site

Place your static files in the /var/www/static.example.com directory.

Hosting a PHP App

To host a PHP application, you’ll need to have PHP and PHP-FPM installed.

1- Install PHP and PHP-FPM

# For Debian/Ubuntu:
sudo apt install php-fpm

# For CentOS/RHEL:
sudo yum install php php-fpm

2- Configure Nginx

Create a server block for your PHP site:

server {
    listen 80;
    server_name php.example.com;

    root /var/www/php.example.com;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

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

3- Deploy PHP App

Place your PHP files in the /var/www/php.example.com directory.

Hosting a Django App

Hosting a Django app requires setting up Gunicorn as the application server and configuring Nginx as the reverse proxy.

1- Install Gunicorn

pip install gunicorn

2- Run Gunicorn

gunicorn --workers 3 myproject.wsgi:application

3- Configure Nginx

Create a server block for your Django app:

server {
    listen 80;
    server_name django.example.com;

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

Enable and Test Your Sites

After creating the configuration files, enable them by creating symbolic links in the /etc/nginx/sites-enabled/ directory:

sudo ln -s /etc/nginx/sites-available/node.example.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/static.example.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/php.example.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/django.example.com /etc/nginx/sites-enabled/

Finally, test the Nginx configuration and restart the service:

sudo nginx -t
sudo systemctl restart nginx

You’ve now configured Nginx to host multiple sites on the same server, including a Node.js app, static site, PHP app, and Django app, each with its own domain or subdomain. This setup allows you to efficiently manage and scale multiple applications on a single server.