Loading Symbol

How to Serve Multiple Sites from Subdirectories with Windows, Apache, and Virtual Hosts

Web Server

This tutorial will show you how to configure Windows with Apache Server virtual hosts to serve multiple sites from subdirectories on the same server. If your using WAMP, this is perfect for you, but this will work for any application that uses Apache and Windows. In this tutorial, I’m using Windows 10 with WampServer Version 3.0.6 64bit. It includes Apache version 2.4.23.

This a great way to set up a local development environment for WordPress or any other situation that requires developers to work on multiples site while only running a single server instance.

Why Is This a Good Setup?

There are many ways to set up a local development environment, but if you have many client sites to work on, I believe this way is the best. Here are some benefits:

  1. Serving multiple sites from the same server.
  2. Simulating the static resource URL’s your staging and production environments will use (more on this later).
  3. You can set an arbitrary subdomain and domain names and they will resolve to whatever folder you specify in the apache virtual hosts file.

First, you need to open your Windows hosts file. It’s located at C:\Windows\System32\drivers\etc\. In order to edit it, you’ll need to run your text editor as administrator. If you’re opening the file with Notepad, make sure to select “All Files (*.*)” in the file type dropdown at the bottom right. Otherwise, you won’t be able to see it.

File Type Dropdown

Then you need to add the following line:

127.0.0.1       localhost localhost.example1.com localhost.example2.com

This is telling Windows that if these URL’s are requested from this computer, map the request back to the computer’s loopback IP address – 127.0.0.1. That is, localhost, localhost.example1.com, localhost.example2.com will each be mapped back to 127.0.0.1 if they are searched in the URL bar of a web browser.

Loading GIF

Define Apache Virtual Hosts

Next, we need to define which subdirectory these domains will resolve to in Apache. To do that, we will define Apache virtual hosts. My WAMP server is in a directory on the C drive called “wamp64”, so my virtual hosts are defined in the C:\wamp64\bin\apache\apache2.4.23\conf\extra\httpd-vhosts.conf file. If your server is located somewhere else, you would look for it at {server_location}\bin\apache\apache2.4.23\conf\extra\httpd-vhosts.conf.

My websites are located at C:\wamp64\www\example1-dir\, C:\wamp64\www\example2-dir\, etc. These locations are known as “Document Roots”. For example, if example1 was a WordPress site, and I navigated to the document root at C:\wamp64\www\example1-dir\. This is what I would see:

WordPress Document Root Contents

That’s where we need to route these requests. Open httpd-vhosts.conf and add the following to the end of the file:

# localhost.example1.com
<VirtualHost *:80>
  ServerName localhost.example1.com
  DocumentRoot c:/wamp64/www/example1-dir
	<Directory "c:/wamp64/www/example1-dir/">
    Options FollowSymLinks Includes
    AllowOverride all

    Order Allow,Deny
    Allow from all
  </Directory>
</VirtualHost>


# localhost.example2.com
<VirtualHost *:80>
  ServerName localhost.example2.com
  DocumentRoot c:/wamp64/www/example2-dir
	<Directory "c:/wamp64/www/example2-dir/">
    Options FollowSymLinks Includes
    AllowOverride all

    Order Allow,Deny
    Allow from all
   </Directory>
</VirtualHost>

There are many other options you can add here, but this is all you need to get the domains resolving correctly.

Now, you need to restart your server to make the new virtual hosts take effect. If you’re using WordPress and you’re modifying an existing WordPress install, you need to update all instances of the old domain in the database with the new domain name. Then visit WordPress -> Settings ->Permalinks¬†and click “Save” without changing anything. This will flush the rewrite cache.

You should now be able to see your site at “localhost.example1.com” or whatever name you chose as this is now serving as the web root of your site.

Conclusion

Using virtual hosts is a very simple and effective way to rectify the URL paths of static resources and pages between Local, Development, Staging, and Production environments.


Loading Symbol


Leave a Reply

Your email address will not be published. Required fields are marked *