How to Configure Nginx to serve Multiple Websites on a Single VPS
Last updated: November 10th 2022
Introduction
This article details how to configure Virtual Hosting for Nginx. If you are looking for a guide for Apache, click here.
There are several reasons you may want to host multiple websites on a single server. If you are using a dedicated server / VPS and want to host multiple applications on a separate domain and a single server then you will need to host multiple websites on a single server. You can achieve this with Apache / Nginx virtual hosting. Virtual hosting allows you to use a single VPS to host all your domains. So hosting multiple websites on a single VPS server using Virtual hosting is the best solution for you to reduce the hosting cost.
There is, in theory, no limit to the number of sites that you can host on your VPS with Apache or Nginx. But, make sure that your server has enough disk space, CPU and RAM.
In this tutorial, we will learn how to set up multiple websites on an Ubuntu VPS with Nginx.
Please note: Doing these actions may bring down your server. Do not do this on a live site without knowing the potential consequences.
Prerequisites
- A fresh Webdock cloud Ubuntu instance with LEMP installed.
- Two valid domain names are pointed with your VPS IP address. In this tutorial, we will use web1.webdock.io and web2.webdock.io.
- You have shell (SSH) access to your VPS.
Note : You can refer the Webdock DNS Guide to manage the DNS records.
Configure Nginx to Host Multiple Websites
In this section, we will show you how to host two websites named web1.webdock.io and web2.webdock.io on a single Ubuntu VPS with Nginx webserver.
Create Directory Structure
Before starting, make sure LEMP stack is installed on your VPS. You can check the Nginx server status with the following command:
systemctl status nginx
Best method to host multiple websites is to create a separate document root directory and configuration file for each website. So, you will need to create a directory structure for both websites inside Nginx web root:
To do so, run the following command for each website:
mkdir /var/www/html/web1.webdock.io mkdir /var/www/html/web2.webdock.io
Next, you will need to create sample website content for each website:
First, create a index.html file for web1.webdock.io website:
nano /var/www/html/web1.webdock.io/index.html
Add the following html markup which will be served when you connect to the site:
<html> <title>web1.webdock.io</title> <h1>Welcome to the web1.webdock.io with Nginx webserver.</h1> </html>
Save and close the file.
Next, create a index.html file for web2.webdock.io website:
nano /var/www/html/web2.webdock.io/index.html
Add the following html markup which will be served when you connect to the site:
<html> <title>web2.webdock.io</title> <h1>Welcome to the web2.webdock.io with Nginx webserver.</h1> </html>
Save and close the file. Then, change the ownership of both website directories to www-data:
chown -R www-data:www-data /var/www/html/web1.webdock.io chown -R www-data:www-data /var/www/html/web2.webdock.io
Create Virtual Configuration
Next, you will need to create a virtual host configuration file for each website that indicate how the Nginx web server will respond to various domain requests.
First, create a virtual host configuration file for the web1.webdock.io website:
nano /etc/nginx/sites-available/web1.webdock.io.conf
Add the following lines:
server {
listen 80;
listen [::]:80;
root /var/www/html/web1.webdock.io;
index index.html index.htm;
server_name web1.webdock.io;
location / {
try_files $uri $uri/ =404;
}
}
Save and close the file. Then, create a virtual host configuration file for the web2.webdock.io website:
nano /etc/nginx/sites-available/web2.webdock.io.conf
Add the following lines:
server {
listen 80;
listen [::]:80;
root /var/www/html/web2.webdock.io;
index index.html index.htm;
server_name web2.webdock.io;
location / {
try_files $uri $uri/ =404;
}
}
Save and close the file. Then, enable each virtual host with the following command:
ln -s /etc/nginx/sites-available/web1.webdock.io.conf /etc/nginx/sites-enabled/ ln -s /etc/nginx/sites-available/web2.webdock.io.conf /etc/nginx/sites-enabled/
Next, check Nginx for any syntax error with the following command:
nginx -t
If everything goes fine, you should get the following output:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Finally, restart the Nginx service to apply the configuration changes:
systemctl restart nginx
Test Your Websites
Now, open your web browser and type the URL http://web1.webdock.io and http://web2.webdock.io. You should see both websites with the content we have created earlier:
web1.webdock.io
web2.webdock.io
Adding PHP-FPM Support to Nginx
PHP-FPM also known as a "PHP-FastCGI Process Manager" is a FastCGI handler for PHP scripts and applications. It allows a website to handle high loads. PHP-FPM is faster than traditional CGI-based methods for multi-user PHP environments. PHP-FPM allows you to host multiple applications that uses different PHP versions.
You probably want to enable PHP support as otherwise things like Wordpress will not work. As your starting point was a Webdock LEMP stack, then everything is installed and configured correctly for the PHP version in your stack already. In this example, we are using php 7.3 - replace the version number with whatever is appropriate for the stack you started out with.
To enable PHP-FPM support on web1.webdock.io website, open the existing default webdock config for your server at /etc/nginx/sites-enabled/webdock:
nano /etc/nginx/sites-enabled/webdock
Copy the following lines - while taking care that the php-fpm version number below is correct for your server::
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_intercept_errors off;
fastcgi_buffer_size 16k;
fastcgi_buffers 4 16k;
fastcgi_connect_timeout 600;
fastcgi_send_timeout 600;
fastcgi_read_timeout 600;
}
Next, open Nginx virtual host configuration file for website web1.webdock.io with the following command:
nano /etc/nginx/sites-available/web1.webdock.io.conf
Paste all the lines which you have copied from webdock config file as shown below - while taking care that the php-fpm version number below is correct for your server:
server {
listen 80;
root /var/www/html/web1.webdock.io;
index index.html index.htm index.php;
server_name web1.webdock.io;
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_intercept_errors off;
fastcgi_buffer_size 16k;
fastcgi_buffers 4 16k;
fastcgi_connect_timeout 600;
fastcgi_send_timeout 600;
fastcgi_read_timeout 600;
}
location / {
try_files $uri $uri/ =404;
}
}
Save and close the file. Then, restart Nginx and the correct PHP-FPM service to apply the configuration changes:
systemctl restart nginx
systemctl restart php7.3-fpm
Repeat the same process for website web2.webdock.io
Conclusion & Next Steps
Congratulations! you have now successfully set up your website to host two websites on a single Ubuntu VPS. We hope you have now enough knowledge to host unlimited number of websites on your own server. For more information about virtual hosting on Nginx, you can visit Nginx Virtual Hosting.
You may also want to secure your new websites with Let's Encrypt SSL certificates. The standard Webdock control panel can only handle a single website / webroot so if you want to secure all your sites on the same server, you need to do so manually as well. Click here to learn how to issue SSL certificates for all your websites.