How to Setup Virtual Host in Ubuntu

8 mins0
How to Setup Virtual Host in Ubuntu - Codewolfy

Managing several websites from one server becomes easier when you learn how to setup virtual host in Ubuntu. With Apache virtual hosts, you can run multiple domains or applications on the same system without them interfering with each other. Imagine developing project1.local for one client and project2.local for another, all on a single machine. This setup keeps your work organized, efficient, and ready for deployment.

What is a Virtual Host?

An Apache virtual host serves to host several websites on a single machine. It allocates unique configurations, directories, and domain names for each site. When you access a specific domain, Apache recognizes the corresponding configuration file and serves the content of that project.

In practice use, if you are building two client sites, you can create both projects in different directories. This method keeps files in their place and prevents the overlap of projects. It’s quite useful into new web development frameworks like Laravel, Django, Node, react where local development starts it’s own server.

Install Apache Web Server (Optional)

To create Virtual host into Ubuntu operating system, you need to install Apache on your Ubuntu system. You can skip this step if you have already installed and configured apache into your local machine.

Run the following commands:

sudo apt update
sudo apt install apache2 -y

// To start sever once installed
sudo systemctl enable apache2
sudo systemctl start apache2

You can confirm it’s running by visiting http://localhost in your browser. If you see the Apache welcome page, it means your setup is successful.

Create Directory for Your Website

You can use any existing directory or project for this setup, but are creating simple webpage to check our virtual host is running properly. You can setup actual application with similar process but need to make few changes like configuration file names, directory path and all.

For better understanding let’s create new directory called codewolfy and set proper permissions to access your files:

sudo mkdir -p /var/www/html/codewolfy/

sudo chown -R $USER:$USER /var/www/html/codewolfy

Inside this directory, create new file called index.html. Modify it as below to show proper message to users:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codewolfy</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 50px;
        }
        h1 {
            color: #0078d7;
            margin-bottom: 10px;
        }
        p {
            font-size: 18px;
        }
        .container {
            background: #fff;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to Codewolfy</h1>
        <p>Your Apache Virtual Host in Ubuntu is working perfectly!</p>
    </div>
</body>
</html>

Creating Virtual Host Configuration File in Ubuntu

Next, you need to create configuration file for your domain or project inside apache’s direcoty:

sudo nano /etc/apache2/sites-available/codewolfy.local.conf

Add the following configuration inside the virtual host configuration file:

<VirtualHost *:80>
    ServerAdmin admin@codewolfy.local
    ServerName codewolfy.local
    ServerAlias www.codewolfy.local
    DocumentRoot /var/www/codewolfy
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

This setup tells Apache where your website files are and how to serve them. It defines your domain name, admin email, website folder, and logs file path.

Enable the New Virtual Host

To make your site available to your localhost, you need to enable our create configuration using command.

sudo a2ensite codewolfy.local.conf

sudo systemctl reload apache2

Here, it enables site to access to for users. Make sure you run reload command after enabling or disabling any apache configuration otherwise you will not see any changes.

Update the Hosts File

To make your custom domain work locally, you have to add it to your hosts file located inside etc directory:

sudo nano /etc/hosts

Above command will open editor for this file. Next you need to add your domain at end of file. In our case, it’s “codewolfy”, so let’s append our domain to that file like below:

127.0.0.1 codewolfy.local

With saving this changes our virtual hosting configuration is completed. Now you can check configuration by vising https://codewolfy.local. You should see your test page that created into previous steps with message “Welcome to Codewolfy”.

Conclusion

Configuring a virtual host in Ubuntu assists in handling multiple sites effectively from a single server. If you are dealing with development environments or staging multiple projects, the setup is clean and organized. With this knowledge of how to configure a virtual host in Ubuntu, you can develop, test, and run your web projects like a professional. Want to take your coding experience a notch higher? Read our tutorial on Install and Setup Git Bash in Ubuntu to streamline your development experience.