How to Create an Nginx Virtual Host (AKA Server Blocks)

What is a virtual host?

A virtual host is an Apache term, however, is commonly used by Nginx users as well. The proper term for Nginx is server block. Both of these words have the same meaning which is basically the feature of being able to host multiple websites on a single server. This is extremely useful given that you own multiple sites and don't want to go through the lengthy (and expensive) process of setting up a new web server for each site.

In this guide, we're going to through the three steps of setting up an Nginx virtual host on a Ubuntu 16.04 machine.

Step 1 - Creating a new site

The first step in this process is to actually create and populate a directory for your new site. In Nginx, all virtual host site files are stored within the /var/www/ directory. Therefore, you can create a folder within that directory, called testsite.com and add a sample file called index.php. To create the testsite.com directory use the following command:

mkdir /var/www/testsite.com

Next, you can create the index.html file and add some text to it using the following command:

echo "Hello World" > /var/www/testsite.com/index.php

Lastly, ensure that you've setup the proper file permissions so that Nginx can access it. To do this, use the following snippet:

chmod -R 755 /var/www/testsite.com

Step 2 - Configuring your Nginx virtual hosts

Now that you've created a site folder and added a sample file under /testsite.com, you'll need to configure your Nginx virtual host or server blocks for testsite.com. Virtual host config files are typically located in the /etc/nginx/sites-available directory. You may also notice that your server has a /etc/nginx/sites-enabled folder, which is where file shortcuts (symbolic links) are placed. You can use the sites-enabled folder to easily enable or disable a virtual host by creating or removing symbolic links.

Now that you've located the sites-available folder, you'll want to cd into that folder and create a virtual host config file for testsite.com. A config file can either be created from scratch or you can copy the default configuration file and make any required changes. In this case, were going to copy the default file that's currently within the sites-available directory. To do so, use the following snippet:

cp /etc/nginx/sites-available/default /etc/nginx/sites-available/testsite.com.conf

You will then need to modify the contents to testsite.com.conf to match the paths and directories of your newly created site. An example of a barebones Nginx server block that's configured to rewrite requests to HTTPS and serve a Let's Encrypt SSL certificate will look similar to the following:

server {
    listen 80;

    server_name testsite.com;

    rewrite ^ https://testsite.com$request_uri? permanent;
}

server {
    listen 443 ssl http2;

    ssl_certificate /etc/letsencrypt/live/testsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/testsite.com/privkey.pem;
    ssl_stapling on;

    server_name testsite.com;

    root /var/www/testsite.com;

    location / {
        try_files $uri /index.php?$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
    }
}

Once you're done editing your virtual host file, be sure to save the file. Next, you'll need to create a symbolic link in sites-enabled to the newly created nginx virtual host files within the sites-available folder:

ln -s /etc/nginx/sites-available/testsite.com.conf /etc/nginx/sites-enabled/testsite.com.conf

Lastly, restart Nginx with the following command:

service nginx restart

Step 3 - Testing your setup

Your virtual host file should now be properly configured for your new setup. Of course, there are many modifications that can be made such as adding leverage browser caching support or CORS support, although the example above should be enough to get you started. Once you've properly defined your DNS settings at the web host level (or whichever DNS service provider you're using), you should now be able to access your site directly by entering the domain into a web browser.

Alternatively, if you haven't yet configured your DNS settings or simply do not want the site to go live yet, you can modify your computer's hosts file. To do this, use the following command in your computer's CLI

vi /etc/hosts

Then, add the IP address of your actual server followed by the domain name you are configuring, for example:

# Virtual Hosts Local Test
1.2.3.4 testsite.com

Now you should be able to save the file and access it from within a web browser.

Summary

Nginx virtual hosts or server blocks are a great way to add additional websites to the same origin server. The number of configuration possibilities for a given site are nearly endless when you start modifying the virtual host configuration file to suit your the specific needs of your site.