How to setup Mac OSX 10.9 Mavericks for Apache Multiple VirtualHosts

At the beginning of the month and after 8 years in the financial services sector, I started at a new company. Day one was a surprise and a refreshing change, everything was ready for me and worked! No red-tape, no policy documents to fill in, just a MacBook Pro sat ready and waiting for me to do whatever I liked with it. The new Mac was pre-installed with 10.9 so I thought I’d write down the process for either new Mac users/owners or anyone interested in setting up their local machine for development purposes.

Ideally for this you’ll already have your preferred stack installed. I personally do all this using Homebrew, I previously posted a guide to do this, “How to setup an AMP environment running Laravel And MariaDB“.

The process is easier done in Terminal, so familiarity with that is helpful but not essential here, I’ll try to add helpful tips as we go along. To edit files, my preferred choice is nano, but you may want to use vi or another GUI visual editor. So, pop open Terminal and let’s begin..

Editing the Apache configuration file

Firstly we need to allow the usage of the httpd-vhosts.conf file from the main Apache configuration file httpd.conf.

sudo nano /etc/apache2/httpd.conf

In nano, using the “Where Is” function ctrl+W, search for “httpd-vhosts.conf”, you should find this directly under “# Virtual hosts”. Simply remove the hash at the beginning of the line to uncomment the include and your entry should then look something like this:

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf

Save this (ctrl+X, then Y), now we need to edit that virtual hosts file and define our own domains:

sudo nano /etc/apache2/extra/httpd-vhosts.conf

The default file comes with some basic information and a couple of dummy configs, but for the purpose of learning, we’ll remove all of this and create our own from scratch. Use ctrl+K (Cut Text) to remove the existing lines. Enter the following in order:

# Force Apache to use port 80
Listen 80

Firstly we make sure that Apache is using the correct port, the usual being port 80 but you can use anything else that is unreserved if you prefer.

# Use a wildcard to listen for requests on all IP addresses
NameVirtualHost *:80

We then set the virtual host requests to listen for anything using port 80, if a domain “www.mydomain.com” for instance, does not match one of the ServerName directives below, it will default to using the VirtualHost.

<VirtualHost *:80>
    ServerName lee-mcintosh.com
    ServerAlias www.lee-mcintosh.com
    DocumentRoot "/Users/username/Sites/lee-mcintosh.com"
    ErrorLog "/private/var/log/apache2/error_logs/lee-mcintosh.com"
    CustomLog "/private/var/log/apache2/access_logs/lee-mcintosh.com" common
    ServerAdmin admin@lee-mcintosh.com
    <Directory "/Users/username/Sites/lee-mcintosh.com">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

The main parameter in the above block is the “DocumentRoot”. This defines where your files can be found. As a new PhpStorm fan (previously a SublimeText lover!), I use the default /Sites folder to store my files, you can of course choose whatever you prefer, just make sure you update the “<Directory>” value too.

I also added in an alias for “www” to allow this full sub-domain to also reach the same files, and also some directory permissions, I won’t cover those here, but maybe in a future post.

Next we need to trick your machine into believing that the internet address used “lee-mcintosh.com” is actually on your local machine, to do this we simply update our hosts file:

sudo nano /etc/hosts

Add the domain or domains you’ve created above:

127.0.0.1 www.lee-mcintosh.com

Note that I’ve used the alias version instead of the base domain.

All that is left to do now is restart Apache:

sudo apachectl restart

In your browser, simply navigate to your chosen domain, in this example: http://www.lee-mcintosh.com

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s