Setup Domains/Subdomains on VPS in Ubuntu

Farhaz Alam

5 min readSep 15, 2020

So in this article, I will be discussing how to set up Nginx Server with multiple Domains or Subdomains.

Prerequisites

Setup a VPS of your requirements. In this tutorial, I will be using Azure to set up a VPS with 1GB RAM, 1vcpu, and Ubuntu 18.04.
Connect to your newly created server using an ssh client like Putty.
Must have a Domain and have access to it. I will be using Namecheap for the Domain.

Okay, so now all the things are setup. We will start with the Actual Process.

Step 1- Connect your VPS with Domain

Connect your domain with the server so that you don't have to access your server by typing IP Addresses.

First of all, find your public IP Address from the VPS dashboard that your provider has given you. Then head over to the Domain Dashboard settings( In my case, it is Namecheap). In your domain settings, head over to the DNS section and point an ‘A’ record to your public IP Address. It would look something like this below.

I have added 3 DNS, the host @ and www denotes the default domain, and the host ‘API’ denotes the subdomain that I will be using in this tutorial.

So the two domains that I will be using here as a demonstration is

jugaadapp.me
API.jugaadapp.me

After this step, your domain and subdomain are pointed to your server’s IP Address.

Step 2- Set up Nginx Server

So, after all the setup is over, I will be connecting to my server using the Public IP or my domain name along with my username and password in any ssh client.

Now Comes the Interesting part

Installing Nginx

$ sudo apt-get update
$ sudo apt-get install nginx

Now your Nginx server is basically installed, You can check it at by typing your default domain in your web browser address bar. I will show you that Nginx Server is successfully installed. Now we just need to adjust some firewall settings.

Adjusting More Settings

$ sudo ufw app listOutput
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

The above command shows us different firewall options available. After that just follow the commands below

$ sudo ufw allow 'Nginx Full'
$ sudo ufw allow ssh
$ sudo ufw enable

If everything goes well, You could type ‘sudo ufw status’ and see the status of your settings.

More Web Server Settings

Now that the server is installed, you can now check the status of your server by typing the code below.

$ systemctl status nginx

To stop, start or restart your server, you can use the below commands respectively

$ sudo systemctl stop nginx
$ sudo systemctl start nginx
$ sudo systemctl restart nginx

Step 3- Create Domain Directory

Now that our server is installed, we can now create our directory for our domain routes.

$ sudo mkdir -p /var/www/jugaadapp.me/html
$ sudo mkdir -p /var/www/api.jugaadapp.me/html

Now assign Ownership to the directory we just made to the current logged in user.

$ sudo chown -R $USER:$USER /var/www/jugaadapp.me/html
$ sudo chown -R $USER:$USER /var/www/api.jugaadapp.me/html

Now we will give permission to the web roots by:

$ sudo chmod -R 755 /var/www

Step 4- Creating a Sample Webpage

We have successfully created the directory for our domain routes. Now let us just make a sample page for each website so that we will have something to display.

$ nano /var/www/jugaadapp.me/html/index.html

After the above command, an editor will open up. We will write a simple HTML code.

<html>
 <body>
  This is Domain 1
 </body>
</html>

To save this file, press (CTRL + O) and it will prompt a confirmation, Just press enter
To exit, press (CTRL + X).

Now your HTML code is written in Domain 1(jugaadapp.me) Directory. We will perform the same steps to change our Domain 2(api.jugaadapp.me).

$ nano /var/www/api.jugaadapp.me/html/index.html

Then write the same HTML code we used earlier and save it.

<html>
 <body>
  This is Domain 2
 </body>
</html>

Step 5- Configure Server Block

Till now, we have created the directory and the HTML files for both the directory to show. But now we will have to create and configure the server block files for each Domain.

The default server block is called ‘default’. We will use that server block file to copy and rename and make some changes to make the block for our domain

Server Block for Domain 1(jugaadapp.me)

$ sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/jugaadapp.me$ sudo nano /etc/nginx/sites-available/jugaadapp.me

Now our server block file for Domain 1(jugaadapp.me) is opened. If we ignore the comments, the file will look similar to this:

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;
        }
}

First of all, we will remove the default_server word from the first two lines as there can be only one default_server and that is present is the default server block.
Secondly, we will change the root location /var/www/html to our custom made domain directory /var/www/jugaadapp.me/html.
Third, we will put a server name that is similar to our domain that we are going to use, it will look something like this server_name jugaadapp.me www.jugaadapp.me;

The final file will look something like this:

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

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

        server_name jugaadapp.me www.jugaadapp.me;

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

Server Block for Domain 2(api.jugaadapp.me)

Now our domain 1 configuration is done, we will copy that and make some changes to match the second Domain.

$ sudo cp /etc/nginx/sites-available/jugaadapp.me /etc/nginx/sites-available/api.jugaadapp.me$ sudo nano /etc/nginx/sites-available/api.jugaadapp.me

Again repeat the previous steps and change the root and the server_name relevant to this Domain. The final file will look something like this.

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

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

        server_name api.jugaadapp.me www.api.jugaadapp.me;

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

Step 6- Finishing Steps

Now, all that left is to enable the server blocks that we just created and restart our server.

Enable the server blocks by typing the command below:

$ sudo ln -s /etc/nginx/sites-available/jugaadapp.me /etc/nginx/sites-enabled/
$ sudo ln -s /etc/nginx/sites-available/api.jugaadapp.me /etc/nginx/sites-enabled/

We have now in a total of 3 server blocks, the two that we created will respond to the respective domains and the remaining default block will execute when the request doesn't match from the above two.

The only step is left to add additional server names to avoid a possible hash bucket memory problem. We can do this by:

$ sudo nano /etc/nginx/nginx.conf

And uncomment the Line server_names_hash_bucket_size 64;

Save the file and exit from it.

Now test if there are any no errors on your Nginx server by typing the commands below:

$ sudo nginx -t

If you reached up to this line then you are ready to go. Now all that is left to restart your Nginx server by typing the command below:

$ sudo systemctl restart nginx

Your server is now ready and you can check your websites in any web browser.

ENJOY!!