Apache Virtual Hosts - CSTutoring.ca

Contents

Configuring Apache Standalone and XAMPP

When running a server such as Apache standalone or as part of XAMPP, this server is configured as the single listener to at least one network port. For example, by default, Apache will listen to ports 80 and 443, the HTTP and HTTPS default ports. No other server can be listeners to the same ports on the same computer. This means that if you need to host two different Web applications on the same server computer, then you will nut be able to use two different servers.

Apache has a mechanism to cater to this type of situation: virtual hosts. By this mechanism, we can configure multiple Web applications in different folders and on different domain names (or subdomains).

To set up virtual hosts on Apache you will only need to follow 3 steps:

Store the Web application to host in a location accessible to your Apache instance.
Edit the hosts file to add the wanted domains/subdomains.
Add the virtual host configurations to Apache configuration files.

1. Store the Web Application

Place the Web application in the file system by creating a folder and placing your code there. I recommend placing your Web application under the xampp folder, in a subfolder created by your git client – because your Web application code is managed in a git repository, right?

For our example, we will add 2 Web applications in the following folders under the xampp folder: SocialApp and Marketplace.

Make a note of where you have stored your Web applications.

2. Edit the hosts File

Depending on your operating system, you may find the hosts file in one of a few places (check for your exact OS):

In the Windows OS, it is typically located under C:\Windows\System32\drivers\etc\hosts
In Linux distributions, you may find it at /etc/hosts
In MacOS, you may find it at /private/etc/hosts

To edit this file, use an account with administrative privileges in your OS. Under Windows, you may open a text editor such as notepad as administrator by right clicking the application icon and selecting “Open as administrator”. Under Linux and MacOS, you should invoke your editor with sudo, for example.

In our example we will route from 2 subdomains: socialapp.localhost and marketplace.localhost. To perform this change, we will add the 2 following lines to the hosts file:

```
127.0.0.1    socialapp.localhost
```
```
127.0.0.1    marketplace.localhost
```

Thanks to those 2 lines, requests to these addresses will be forwarded to 127.0.0.1, the loopback IP address. General information on the hosts file may be found on Wikipedia.

3. Add the Virtual Host Configurations

Apache Configuration in XAMPP

If you are using XAMPP installed for example in the c:\xampp folder, then open c:\xampp\apache\conf\extra\httpd-vhosts.conf file and add the following at the end of the file:

```
<virtualhost *:80="">
```
```
    ServerAdmin webmaster@email.com
```
```
    DocumentRoot "C:/xampp/socialapp"
```
```
    ServerName socialapp.localhost
```
```
    ErrorLog "socialapp.log"
```

    CustomLog "socialapp-access.log" common

```
    <directory "C:/xampp/socialapp">
```
```
        AllowOverride All
```
```
        Require all granted
```
```
    </directory>
```
```
</virtualhost>
```
```
 
```
```
<virtualhost *:80="">
```
```
    ServerAdmin webmaster@email.com
```
```
    DocumentRoot "C:/xampp/marketplace"
```
```
    ServerName marketplace.localhost
```
```
    ErrorLog "marketplace.log"
```

    CustomLog "marketplace-access.log" common

```
    <directory "C:/xampp/marketplace">
```
```
        AllowOverride All
```
```
        Require all granted
```
```
    </directory>
```
```
</virtualhost>
```
```
 
```
```
<virtualhost *:80="">
```
```
    ServerAdmin webmaster@email.com
```
```
    DocumentRoot "C:/xampp/htdocs"
```
```
    ServerName localhost
```
```
    ErrorLog "localhost.log"
```

    CustomLog "localhost-access.log" common

```
    <directory "C:/xampp/htdocs">
```
```
        AllowOverride All
```
```
        Require all granted
```
```
    </directory>
```
```
</virtualhost>
```

Notice the entry for localhost that is at the end. Without this entry, access to the htdocs document root for localhost may be broken, even if it is defined elsewhere. Not all instructions are required for this example to be functional. The instructions have the following use:

ServerAdmin: (Optional) set the value of $_SERVER[‘SERVER_ADMIN’]
DocumentRoot: specify the root folder for this Web application
ServerName: specify the domain name for this Web application
ErrorLog: (Optional) set the file where errors are logged for this Web application
CustomLog: (Optional) set the file where all non-error events are logged for this Web application. The common format will be used to write messages.
<Directory tag>: To set the correct root folder access parameters, repeat the document root here.
AllowOverride All: Allow all directived in .htaccess
Require all granted: All IP addresses may access the Web application

Once these changes are made, Apache must be restarted for changes to take effect. First test the configuration by running

```
\xampp\apache\bin\httpd -t
```

Once the output for this reads “Syntax OK”, you are ready to restart Apache. For more information on which options to select and for which reasons, you may consult Apache documentation.

Standalone Apache Configuration

If instead of using XAMPP, you are using Apache standalone, you should create one configuration file per virtual host and place these in the /etc/apache2/sites-available folder. For our example, we will build 2 files.

The first file is /etc/apache2/sites-available/socialapp.conf:

```
<virtualhost *:80="">
```
```
    ServerAdmin webmaster@email.com
```
```
    DocumentRoot "C:/xampp/socialapp"
```
```
    ServerName socialapp.localhost
```
```
    ErrorLog "socialapp.log"
```

    CustomLog "socialapp-access.log" common

```
    <directory "C:/xampp/socialapp">
```
```
        AllowOverride All
```
```
        Require all granted
```
```
    </directory>
```
```
</virtualhost>
```

The second file is /etc/apache2/sites-available/marketplace.conf:

```
<virtualhost *:80="">
```
```
    ServerAdmin webmaster@email.com
```
```
    DocumentRoot "C:/xampp/marketplace"
```
```
    ServerName marketplace.localhost
```
```
    ErrorLog "marketplace.log"
```

    CustomLog "marketplace-access.log" common

```
    <directory "C:/xampp/marketplace">
```
```
        AllowOverride All
```
```
        Require all granted
```
```
    </directory>
```
```
</virtualhost>
```

To enable configuration changes, run the following commands at yout command line:

```
sudo a2ensite socialapp
```
```
sudo a2ensite marketplace
```

The above creates the symbolic links between the /etc/apache2/sites-enabled/ folder and the /etc/apache2/sites-available/ configuration files. To ensure the Apache has read all its configuration files, we reload it as follows:

```
sudo /etc/init.d/apache2 reload
```

Conclusion

The above instructions apply to many cases but not all installations were considered. If you have a common installation that is not covered in this post, let me know in the comments below.