How to Configure Apache Virtual Hosts on Linux Ubuntu

Ronaldo B.August 1, 20225 min read

In the last article, we learned how to create Virtual Hosts on Windows. You can check this content by clicking here.

In this article, we will learn how to create a Virtual Host on Linux, more specifically on Ubuntu. We will see that some configurations will be a bit different, but the process itself will be similar to what we saw in the previous article. We will create the same projects from the last article.

Process of creating a Virtual Host

We will basically work with the Terminal and command line. If you do not have Apache installed on your machine, you can install it with the command below:

sudo apt-get install apache2

The Terminal will ask a few questions during the installation. You can answer “Yes” to all of them.

We also need to install PHP. We will do this with the following command:

sudo apt-get install php7.0

Let's create the folders and files for our projects. For that, we will enter the var/www folder and create a folder for each one. We will execute the commands below:

cd /var/www

sudo mkdir restaurante
sudo mkdir restaurante/public_html

sudo mkdir noticias
sudo mkdir noticias/public_html

Explaining: We created a directory for each project and inside each of them, we created another directory called public_html, which will contain the files that will be identified by our server.

The next step is to create the index.php files in each directory. Let's start with the restaurant project. We will execute the following commands:

cd restaurante/public_html/

sudo nano index.php

The Nano editor will open for us. Just paste the same code developed in the last article:

<?php
echo "<h2>Hello World! Welcome to my Restaurant Project</h2>";

It is important to save this file before closing it. Now let's repeat this same process for the news project. Here are the commands:

cd ../../noticias/public_html/

sudo nano index.php

And finally, we will add the content of the PHP file:

<?php
echo "<h2>Hello World! Welcome to my News Project</h2>";

Great. The structure of our codes is finalized. We will now start the actual configuration of the Virtual Hosts. First, we will give the necessary permission for the user of our server to perform the necessary configurations in the folders of both projects. We will execute the below:

cd ../../
sudo chown -R $USER:$USER restaurante/public_html/
sudo chown -R $USER:$USER noticias/public_html/

The next permission we need to grant is the write permission in these directories. For that, we will use the commands below:

sudo chmod -R 755 restaurante/public_html/
sudo chmod -R 755 noticias/public_html/

After granting these permissions, we will create the file necessary for the Virtual Hosts. The directory that contains the configuration files is inside the etc directory. We will access it with the command below:

cd /etc/apache2/sites-available/

This directory has a file called 000-default.conf. It contains the default structure of a Virtual Host. Thus, we will copy this file and paste it in the same directory, changing the name to our project. We will do this process first thinking about the Restaurant. We will execute the following in the Terminal:

sudo cp 000-default.conf restaurante.conf
sudo nano restaurante.conf

Explaining: we created the configuration file restaurante.conf. Remember that we can choose the standard we think is best for the name of this file. After creating the file, we access it with Nano. We will see a predefined structure. We will adapt it for our project. In the end, the content of the file will look like this:

<VirtualHost *:80>
	ServerName www.projeto.restaurante.com.br
	ServerAlias projeto.restaurante.com.br
	DocumentRoot /var/www/restaurante/public_html
	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Explaining: ServerName and ServerAlias represent the main domain of the project and an alternative name for it. DocumentRoot defines the path to our project. ErrorLog and CustomLog define the files where errors and exceptions will be stored.

Let's repeat the same process with the News project, with the following commands:

sudo cp restaurante.conf noticias.conf
sudo nano noticias.conf

An interesting detail is that we created the news configuration file based on the restaurant file, no longer on the default file. The content of the configuration file will look like this:

<VirtualHost *:80>
	ServerName www.projeto.noticias.com.br
	ServerAlias projeto.noticias.com.br
	DocumentRoot /var/www/noticias/public_html
	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

We are almost at the end. We just need to enable these configuration files so that Apache can find them. For that, let's execute the commands below:

sudo a2ensite restaurante.conf
sudo a2ensite noticias.conf

It is also necessary to disable the default file. That is why we will execute the command below:

sudo a2dissite 000-default.conf

We need to restart Apache for the changes to take effect. To do this, we will execute the command below:

sudo service apache2 restart

This is the necessary configuration for the Virtual Host to work on Apache. However, as we mentioned in the previous article, it is necessary to configure the hosts file of our Operating System so that the projects can be found in our Local Environment. In Ubuntu, the hosts file is inside the etc directory. Let's access this file with the commands below:

cd /etc
sudo nano hosts

Just add to this file the same content that we defined in the Windows environment:

127.0.0.1 www.projeto.restaurante.com.br
127.0.0.1 www.projeto.noticias.com.br

Configuration completed. With this, you will be able to test your Virtual Hosts in the Linux Environment as well.

Did you like this article? Is there any other topic you would like to read here on our Blog? You can send your suggestions by clicking here. Thank you very much for reading this article and see you in the next one! :)

Keep learning with Hcode

Sign up for the course platform and follow the next blog guides.