NGINX - Host multiple domains on one server

Multiple domains can be hosted on Nginx using server blocks. If you choose a VPS as your hosting platform, all your websites can reside on a single server, giving you the flexibility to take control of things yourself. This guide explains hosting multiple websites on a single server using Nginx.

Nginx is a web server. It can also be used as a reverse proxy, load balancer, mail proxy, and HTTP cache. In this article, I will explain how to use Nginx as a webserver to serve multiple websites hosted on the same server.

For the rest of this article, I assume my Nginx installation folder is /etc/nginx. I refer to this as the Nginx root folder.

1. Change the nginx.conf file

All my hosting configuration is done via .conf files. For clarity, I will create two separate .conf files for the two sites I host. Then I must tell NGINX how to find those files.

Go to the Nginx root folder and locate nginx.conf file. Ensure the conf file has the below entry.
include /etc/nginx/conf.d/*.conf;

This entry says Nginx to look for configuration files in the specified location on startup. That is where I create two configuration files to host two websites.

2. Create server blocks to define multiple domains

The domains I want to host are example1.com and example2.com. For best practices, I would give the files the website's domain names, which must have a .conf file extension. To be specific, these are called server blocks.

Create example1.com.conf in the NGINX root folder /etc/nginx/conf.d/. That will hold the configuration for example1.com.

server {
  	listen 80 default_server;
  	listen [::]:80 default_server;  
	root /var/www/example1.com;  
	index index.html;  
	server_name example1.com www.example1.com;  	
	location / { try_files $uri $uri/ =404;}
}

Create example2.com.conf in the NGINX root folder /etc/nginx/conf.d/. That will hold the configuration for example2.com.

server {
  	listen 80;
  	listen [::]:80;  
	root /var/www/example2.com;  
	index index.html;  
	server_name example2.com www.example2.com;  	
	location / { try_files $uri $uri/ =404;}
}

3. Create folders to host website files

Note that I have a root attribute in both server blocks. That root specifies the document root for each server block we create. In other words, the root attribute defines where the NGINX looks for hosted files. I need to create two directories, example1.com and example2.com, in /var/www/.

4. Upload the website files to host

Now I have to place my static file contents so the server can find them. The next step is to navigate to /var/www/example1.com and /var/www/example2.com and place each site's HTML and static files in these folders.

5. Restart NGINX to affect the new configuration

After all these changes, run the below command to restart the server to take the changes into effect.
sudo systemctl restart nginx

Server block attributes explained

Now let's take a look at how each attribute in the server-block works.

listen 80 - The server listens to port 80
[::]:80 - IPv6 address
root - The location of static files
index - The default file name to display when a request comes to root. Therefore, index.html should be present in the document root
server_name - The domain name of the server. Note that we have www.example1.com and example2.com, meaning both URL formats are served by the server
location - Directs the requests to matching location
try_files - Tries the literal path specified here relative to the root directive. In our case, the server will look for the index.html file in the /var/www/example1.com folder. If we use try_files /secret/location/ $uri, the index.html file lookup will change to /var/www/example1.com/secret/location/, so as the other resources