In this article we will learn what Virtual Hosts are, what the advantages of using them are, and how we can create them in a Windows environment.
What is a Virtual Host?
A Virtual Host is, in a few words, a virtual server. When we use a Virtual Host, we can create a representation of a site on our Apache server, but we will continue testing local codes. To better understand, think about this: when we start our Apache server, we always access the localhost or 127.0.0.1 (our sweet home) in the browser. With this local server, we can test and work on various projects. But, imagine that we need to test two projects at the same time: a restaurant website and a news website. To test, we would need to access localhost/restaurante and localhost/noticias, for example. Wouldn't it be better if we could simulate how these projects would look on the remote server? For example: accessing projeto-restaurante.com.br and projeto-noticias.com.br and independently testing these two projects? It is in this situation that a Virtual Host can help us, as it creates different domains for the same server.
Advantages of using a Virtual Host
As we have seen, one of the advantages of using Virtual Hosts is that they give us the possibility to test more than one project at the same time on our local server. But, that's not all. Now think about the Remote Server. We generally imagine that a server can contain only one site. However, if we apply the concept of Virtual Hosts to our hosting, we can have more than one project hosted on the same server. This is amazing, as we can even save costs on servers.
We will also be able to test our projects in a more organized manner, in an environment closer to daily reality.
How to create a Virtual Host
In this article, we will talk about creating Virtual Hosts on Windows, with the help of XAMPP. The first thing we need to do is identify the location of the httpd-vhosts.conf file in our Apache. In XAMPP, this file can be found in the folder
C:/xampp/apache/conf/extra/httpd-vhosts.conf.
When accessing this file, we can create our first virtual host. The basic structure of a Virtual Host is as follows:
<VirtualHost *:80>
ServerName www.meuprojeto.com.br
ServerAlias meuprojeto.com.br
DocumentRoot "path_to_project"
</VirtualHost>
Explaining: to create a Virtual Host we use a structure similar to that of an HTML tag. We indicate which port will be used to access this host. We define port 80 because it is the standard for accessing websites on the Web, representing the HTTP protocol. Within the Virtual Host "tag" we define three configurations.
1 - ServerName. Represents the server name, that is, the domain we will use to access the project.
2 - ServerAlias. Creates an alias for the server, that is, an alternative name that will redirect the request to the main domain, ensuring that the user does not encounter a path not found error if they provide a different host.
3 - DocumentRoot. Defines the path within our computer to find the actual project.
This structure works most of the time. However, there may be a situation where it cannot be executed. To ensure its operation, it's interesting to add the following code snippet to the Virtual Host "tag":
<Directory "path_to_project">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
After any changes to this file, we need to restart the Apache server to see the changes reflected.
Finally, we need to make a small change to a configuration file in our Operating System, the hosts file. This is necessary because when we access the domain we created, our computer will look for its address on the Internet and will not find it or will redirect us to a site we do not want. Therefore, we will make it clear to Windows that we want it to look for the domain on our own server. The hosts file has this purpose. Interesting, don’t you think?
The hosts file is stored at C:/Windows/System32/drivers/etc/hosts. This file contains the following pattern: the name of the server to be redirected and the domain we wish to redirect. Therefore, just add this line:
127.0.0.1 www.meuprojeto.com.br
When editing this file and trying to save it, Windows may not allow it due to lack of permission. In this case, we recommend that you use Visual Studio Code to perform the edit. If it's not possible to use it, you can follow these steps: copy the hosts file and paste it to your Desktop; edit it normally and save it. Finally, copy it back and paste it in the source folder to replace it. Windows will ask for Administrator permission. Just grant it and then the file will be saved with the changes.
With this, our virtual host will be functioning. What do you think about putting these concepts into practice with a practical example? Let's go for it!
Practical Example
We will create a simple project for a restaurant in one folder and a news website project in another. Both will have an index.php file. The restaurant project file will look like this:
<?php
echo "<h2>Hello World! Welcome to my Restaurant Project</h2>";
And the news project file will look like this:
<?php
echo "<h2>Hello World! Welcome to my News Project</h2>";
Now let's create a Virtual Host for each of these projects. Our httpd-vhosts.conf file will look like this:
<VirtualHost *:80>
ServerName www.projeto.restaurante.com.br
ServerAlias projeto.restaurante.com.br
DocumentRoot "C:\Users\Anthony Rafael\Desktop\restaurante"
<Directory "C:\Users\Anthony Rafael\Desktop\restaurante">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerName www.projeto.noticias.com.br
ServerAlias projeto.noticias.com.br
DocumentRoot "C:\Users\Anthony Rafael\Desktop\noticias"
<Directory "C:\Users\Anthony Rafael\Desktop\noticias">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
Notice that what really varies between one and the other are the paths to the projects and the name of the domain we are creating. We just need to add these new domains to the hosts file, which will look like this:
127.0.0.1 www.projeto.restaurante.com.br
127.0.0.1 www.projeto.noticias.com.br
One important detail: notice that we added to this file the domain that is in the ServerName, as it is the main identifier of our host. After making these changes, just restart Apache.
Now, if we type the address www.projeto.restaurante.com.br in our browser, we will get the following:
And accessing www.projeto.noticias.com.br we will see the following on the screen:
Excellent! Both Virtual Hosts are being identified. The best part is that both servers are running at the same time. Thus, we can make changes to one project and they will be reflected immediately, without affecting the structure or functionality of the other. Awesome, don’t you agree?
Using Virtual Hosts greatly helps our development. Test it on your Apache server and use this resource whenever you need.
In this article we showed how to configure Virtual Hosts on Windows. But what if we wanted to configure them on Linux? We will talk about that in our next article, see you then!