Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu 18.04 Google Cloud Compute Engine

Introduction

In our previous articles, we learn lots of things to use the NGINX web server on Ubuntu 18.04 hosted on Google Cloud Compute Engine. In our previous articles, we learned the following key points.

How to create a new Ubuntu VM on Google Cloud Compute Engine?
How to install and configure NGINX, PHP, and MySQL on Ubuntu 18.04?
How to use Custom Error Pages on NGINX Web Server?
How to install, configure, and secure phpMyAdmin with NGINX and Ubuntu 18.04?

We are almost done everything to host our Web Sites on NGINX Web Server. In this article, we learn How to map our domain with the NGINX Web Server and create a server block.

Create a DNS Zone

To host our own domain, we need to first create a zone for our domain. To create a new Zone click on Cloud DNS. You can find it under the Network Services menu. On the Cloud DNS page, create a new Zone. We want to host "mayanksanghvi.ooo" domain. Following is the information we used to create the new zone.

Zone name: mayanksanghviooo
DNS name: mayanksanghvi.ooo
DNSSEC: DNS Security off.
Description: It is an optional field. But in the case of a production environment, please provide a valid short description.

Next, note down all the name servers. We need to edit the name servers on our domain provider's control panel.

We update the nameservers information on our domain provider's control panel.

Next step, we need to create an "A" records. The "A" record is used to point a logical domain to the physical IP address. For us, it is mayanksanghvi.ooo. Get your VM IP from VM Instance Page.

On DNZ Zone page create a new record set of type "A" with the following information.
Resource Record Type: A
TTL (Time to Live) : 5
TTL Unit: minute
IPv4 Address: Your VM machine IP Address. For us, it is 35.192.141.253.

Our domain "A" record is ready. Now we can use our domain. Next, to handle www alias request for our domain we need to create a new CNAME record.

Domain mapping is done. Let's check it by visiting http://mayanksanghvi.ooo

NGINX Create a Server Block or Virtual Host

We successfully pointed our domain with our Google Cloud Compute engine VM Instance. Currently, our domain is mapped to the default web document directory. We need to create a server block so we can use a separate directory for our domain. To create a server block first, we need to create a configuration file for our new domain.

Execute the following command to create a new configuration file for mayanksanghvi.ooo

sudo nano /etc/nginx/sites-available/mayanksanghvi.ooo

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

        root /var/www/mayanksanghvi.ooo/html;
        index index.html index.htm index.php;

        server_name mayanksanghvi.ooo www.mayanksanghvi.ooo;

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

Add the above configuration content in the nano editor. Save and close the nano editor. Use Ctrl+O to write the changes and Ctrl+X to close the changes.

To enable the configuration, we need to create a symbolic link from sites-available into sites-enabled.
Use the following command to create the symbolic link.

sudo ln -s /etc/nginx/sites-available/mayanksanghvi.ooo /etc/nginx/sites-enabled/

Finally, to test the NGINX configuration. If everything fine restart the NGINX service.

sudo nginx -t
sudo service nginx restart

We are ready to use our domain. But before visiting our first website we need to first create the document directory. As per the configuration file we need to create "/var/www/mayanksanghvi.ooo/html" directory. Use the following command to create the directory structure.

Note we are using the "-p" flag to create any necessary parent directories.

sudo mkdir -p /var/www/mayanksanghvi.ooo/html

Next, we need to assign the ownership of the directory using the $USER environment variable.

sudo chown -R $USER /var/www/mayanksanghvi.ooo/html

Finally, change the permission of the web root directory by executing the following command.

sudo chmod -R 755 /var/www/mayanksanghvi.ooo

In the end, to test the configuration for our new domain create an index.html file in the web root directory.
Create Index.html

sudo nano /var/www/mayanksanghvi.ooo/html/index.html

<html>
<head><title>Hello, vLemonn</title></head>
<body>
<p>Hello vLemonn</p>
<p>Test Domain MayankSanghvi.ooo</p>
</body>
</html>

To save the changes in the nano editor use Ctrl+O. To close the nano editor use Ctrl+X.

Our server block for domain mayanksanghvi.ooo is now enabled and configured to respond to requests based on their listing and server_name directives.
The mayanksanghvi.ooo config file will respond to the request for mayanksanghvi.ooo and www.mayanksanghvi.ooo.

To avoid any possible hash bucket memory issue that can arise from adding additional server names, it is necessary to adjust a single value in the /etc/nginx/nginx.conf file.
Open the NGINX config file:

sudo nano /etc/nginx/nginx.conf

uncomment server_names_hash_bucket_size 64;

We are done with the Server Block or virtual host configuration with NGINX. In this article, we create a server block only for a single domain. You can use the same method for creating multiple server blocks for another domain and sub domain.
In the above configuration for the domain mayanksanghvi.ooo, we didn't handle PHP requests. To handle the PHP request add the following line in the configuration file for the respective domain or sub domain.

location ~ \.php$ {

include snippers/fastcgi-php.conf;

fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;

}