How To Set Up Virtual Hosts on Ubuntu with Nginx

If we are looking in to the Nginx web server, server blocks (similar to virtual hosts in Apache) can be used to cover configuration details and host more than one domain on a single server.

Here we are going to discuss how to set up multiple server blocks in Nginx on an Ubuntu server.

prerequisites
  • We need to use a non-root user with sudo privileges
  • we should be installed Nginx on our server

So now we can start our work,

There are six main steps which we have to follow and They are :

  1. Creation of new Nginx document root directories
  2. Making of demo pages for sites
  3. Setting up server blocks for each domain
  4. Stimulation of the Nginx server blocks
  5. Editing of host file for testing
  6. Trial of outcome
Step 1-creation of New nginx Document Root Directories

In the starting we have to develop separate directories to our sites

There will be one Nginx server block enabled by default on ubuntu 16.04 and it is arranged to serve documents out of directory at /var/www/html.

We will create these directories for each of our sites by running the following comments :

sudo mkdir -p /var/www/example.com/html
sudo mkdir -p /var/www/test.com/html

Remember that the ownership of the web directories have to change to our normal user account. So we can write to them without sudo

So, to assign the ownership we will use the environmental variable $USER

sudo chown -R $USER:$USER /var/www/example.com/html
sudo chown -R $USER:$USER /var/www/test.com/html

To check about the permissions of our web roots weather correct or not ,we can run the following command :

sudo chmod -R 755 /var/www
Step 2- making of demo Pages for Sites

We need to create a default page for each of our sites

Let’s create an index.html file in our first domain:

nano /var/www/example.com/html/index.html

We have to create a basic file inside the file and it will probably indicate that what site we are accessing:

<html>
    <head>
        <title>Welcome to Example.com!</title>
    </head>
    <body>
        <h1>Success! The example.com server block is working!</h1>
    </body>
</html>

Let us copy it to our second document root too :

cp /var/www/example.com/html/index.html /var/www/test.com/html/

Then open a new file in editor by typing :

nano /var/www/test.com/html/index.html

Let us make some changes in it so that it refers to our second domain :

<html>
    <head>
        <title>Welcome to Test.com!</title>
    </head>
    <body>
        <h1>Success!  The test.com server block is working!</h1>
    </body>
</html>

So now we finished the pages for each sites ,so save and close this file. The second step of our work is completed .

3-setting up server blocks for each domain

As we know we completed the pages for our sites , so now we are going to create server block files for each domain . So we can start developing our first server block.

server block file-1 :

The Nginx contains one server block by default called default which we can use as a figuration for our first server block’s configuration. That is we will copy over this default file for our creation of first server block configuration file :

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/example.com

Using text editor ,open the file :

sudo nano /etc/nginx/sites-available/example.com

Now the file after neglecting the commented lines looks as :

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        server_name _;

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

The thing that we have to think is there is a default_server option enabled in one of our server. If the server_name requested does not match any of our other server blocks, then the default server block is going to serve the request.

There are two choices for us ,such as taking default_server option in the listen directive of the site that we wanted to make as “default”, otherwise we can also enable the default server block and it will serve the request of the /var/www/html directory in such cases like the requested host not being available.

Here we are going to replace the default_server option from our other server block and we will use the default server block as enabled for serving unmatched requests.

server {
        listen 80;
        listen [::]:80;

        . . .
}

We have to adjust the document root which is indicated by the root directive and point it to the site’s document root that we created using the following commands :

server {
        listen 80;
        listen [::]:80;

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

}

Now we will modify the server_name to match the request for our first domain , If we need to add any additional aliases ,then we can add them. For demonstration purpose we will add a www.example.com alias .

So the file will look likely the following :

server {
        listen 80;
        listen [::]:80;

        root /var/www/example.com/html;
        index index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

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

When we completed these steps we would be completed our first server block configuration ,now we can save and close the file to exit.

server block file-2 :

For the creation of second server block we will use the first server block as a basis .So we are going to copy it over our second block ,there for we can make a new server block file which is similar as previously created one

sudo cp /etc/nginx/sites-available/example.com /etc/nginx/sites-available/test.com

We have to open this newly created file using the text editor just as we did in the creation of first server block file ,that is :

sudo nano /etc/nginx/sites-available/example.com

So now when we look up to the file that we just newly created , it will be similar to something like that :

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        server_name _;

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

We just completed the creation of our server block files , after completing the process save and close the file :

4-stimulation of the nginx server blocks

After completing the making of server blocks we are going to enable them, for that we will develop symbolic links from our server block file to the sites-enabled directory.

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/test.com /etc/nginx/sites-enabled/

Using the given command above we will link the file into the directory, when the linking is completed the server block file will be enabled and each block will reply for their corresponding requests.

That is :

  • example.com: Is made to serve for example.com and www.example.com
  • test.com: Is made to serve for test.com and www.test.com
  • default: Is made to serve the requests that do not match the other two blocks.

In order to confirm that the absence of syntax error in any of our files we can type:

sudo nginx -t

Let us restart the nginx after we confirmed that there is no syntax error:

sudo systemctl restart nginx
5-editing of host file for testing

In case if we need to temporarily test our Nginx server block configuration and we are using placeholder values in place of domain names , then we should edit our local computer’s configuration.

We can arrange the DNS settings and also remember that this is optional.

Using the command given below, we are going to open the host file:

sudo nano /etc/hosts

Taking 203.0.114.2 as the IP address of our server:

127.0.0.1   localhost

203.0.114.2 test1.com www.test1.com
203.0.114.2 test2.com www.test2.com

Because of this editing the outside visitors are not going to be allowed to view our site .But we can enter to our sites separately and we can test our arrangement.

After finishing this process we can save and close the file

6-trial of outcome

The last thing that we have to do is to visit our domains in web browser and confirm that the functioning of virtual hosts are faithful.

That is:

http://example.com
http://test.com

When we go to each addresses our correspond site will be visible there.

So we successively completed the configuration of two separate server block with Nginx .

Leave a Reply