How to Setup Server Blocks (Virtual Hosts) with Nginx on Digital Ocean

How to Setup Server Blocks (Virtual Hosts) with Nginx on Digital Ocean

Save money by hosting multiple websites on one server. Note: This tutorial assumes that you have a nodejs droplet (server) and the DNS setup.

If you have to create multiple websites as a developer, you probably know that it starts to get expensive hosting each website on a hosting provider. However if you are using a service like Digital Ocean or AWS to host your website then there is a way how to host multiple websites on a single server using server blocks. In this article I am going to show you how to create server blocks within your Digital Ocean droplet (aka server) using Nginx.

Code

If you already have everything set up and all that is missing is the code, here is the code for two server blocks.

#Server block 1
server {
    root /var/www/domain1.com/public;
    server_name domain1.com;
    index index.html;
    client_max_body_size 256M;
    access_log logs/domain1.access.log main;    location / {
        try_files $uri $uri/ uri.html =404;
    }
}#Server block 2
server {
    root /var/www/domain2.com/public;
    server_name domain2.com;
    index index.html;
    client_max_body_size 256M;
    access_log logs/domain2.access.log main;location / {
        try_files $uri $uri/ uri.html =404;
    }
}

• Root  specifies the root directory that will be used to search for a file.
• Server_name is for DNS hostname where you will have your site.
• The Index  directive defines the index file’s name (the default value is index.html).
• Client_max_body_size sets the maximum allowed size of the client request body.
• access_log  writes information about client requests to a specific location.
• *Location*  is used to set the configuration depending on the requested URI.
• The try_files  tries different paths and will return whichever is found, in this case, if the files are not found it will display error 404 (page not found error).

You can learn more about each of the directives here .

What I Am Using

For this example, I will be using a Digital Ocean droplet with Nodejs and Debian system with systemd. This tutorial may also work with other operating systems.

To setup our server environment we are going to make sure that we have the following installed:

1. Nginx
2. Express

To check if Nginx is installed type nginx -v .

If Nginx version: nginx/*some_version_number* doesn’t show up, run the following commands to install it.

sudo apt-get update
sudo apt-get install nginx

(You may not have to use sudo if you are already in root.)

To check if Express is installed type ****express --version ******.

If it isn’t installed, enter npm install express --save to install it.

Sample Webpage

Now we are going to navigate to where we are going to place our website files. Enter the following:

1. cd /var/www/to navigate where you are going to create the website directory .

2. mkdir domain1 - to make a directory named domain1.

3. cd domain1 - to enter domain1.

4. nano app.js - to create a js file named app.

5. Here is where we are going to use express. If you don’t have a website prepared, enter the following to display a basic “Hello World”.

const express = require('express');
const app = express();
const port = 4002;app.get('/', (req, res) => {
   res.send('Hello World!');
});app.listen(port, ()=> {
   console.log(`Example app listening athttp://localhost:${port}`);
});

If you do have a website prepared that is using html, css, and javascript all in one directory called ‘public’, enter the following:

const express = require('express');
const app = express();
const path = require('path');
port = 4002;app.use(express.static('public'));app.listen(port, ()=> console.log('app listening on port ${port}'));

This will render all of the static files inside the ‘public’ folder.

Save and exit.

6. Once you are back in the command line, enter npm init to install the package.json file. Go through each step, if you don’t know what to enter, just hit ENTER.

7. After completing the package.json file, you will want to drag and drop you ‘public’ folder/directory within the domain1 directory.

Here is how your folder should look like:

domain1
   - app.js
   - package.json
   - public

Now you have your website ready to be rendered by the server block. If you want to test a second website, repeat the steps to create domain2. Remember to change the port number.

The Server Block

Now to set up the server block. Do the following:

1. cd /etc/nginx/sites-enabled
2. nano domain1
3. Here is where we will enter the code that was shown in the beginning of the article. The only difference is that we change the root to /var/www/*domain1/*public **to reference the directory that we created earlier.
4. After saving and exiting the directory, type nginx -t to check for any system errors.
5. systemctl reload nginx - to reloadorsystemctl restart nginxto restart the server
6. Check your web domain and see if your website successfully rendered.

If you can see your website, CONGRATULATIONS, you can now host multiple websites on one server! Try doing this with another one of your websites. If you were unsuccessful, you could try watching this live coding video and see how I did it.

How to Create Server Blocks to Create Multiple Websites

https://www.youtube.com/watch?v=ohgcb2-yfrA 

Leave a comment if this was helpful or if you know another way how to set up multiple websites on a server. You can also join our coding community on Discord  and Facebook .