macOS Apache vhost set up

TDRBY
F.A.T.E.
Published in
4 min readSep 29, 2016

Every year I perform a clean install on my Mac for the new OS that typically gets released from Apple. This means I always need to re-configure my local Apache server for my various dev projects.

The steps below are more of a reminder to myself but I’m sure others will find useful as well.

Apache user configuration file

If your Mac does not already have a configuration file in this directory

/etc/apache2/users/

create one so that you have the following:

/etc/apache2/users/<**YOUR USERNAME**>.conf

replacing <**YOUR USERNAME**> with the same username you use for your Mac.
In the file: /etc/apache2/users/<**YOUR USERNAME**>.conf
point Apache to a directory to use as a root vhost directory.

eg add the following (assuming you’re running Apache 2.4 +)

<Directory "/Users/<**YOUR USERNAME**>/Developer/*">
Options Indexes MultiViews FollowSymLinks
AllowOverride All
Require all granted
</Directory>

(*note /Developer/ is where my projects are. You can point to any directory on your machine where your projets are located.)
Make sure the file has the correct permissions for Apache to access it
e.g.:

sudo chmod 644 /etc/apache2/users/<**YOUR USERNAME**>.conf

httpd-userdir.conf

uncomment the following line in:
/etc/apache2/extra/httpd-userdir.conf

#Include /private/etc/apache2/users/*.conf
to
Include /private/etc/apache2/users/*.conf

httpd.conf

Edit the httpd.conf file to make sure the required modules are activated on the local Apache server.

Uncomment the following lines in:
/etc/apache2/httpd.conf

#LoadModule php5_module libexec/apache2/libphp5.so
to
LoadModule php5_module libexec/apache2/libphp5.so
#LoadModule userdir_module libexec/apache2/mod_userdir.so
to
LoadModule userdir_module libexec/apache2/mod_userdir.so
#Include /private/etc/apache2/extra/httpd-userdir.conf
to
Include /private/etc/apache2/extra/httpd-userdir.conf

Typically most instructions get you to set up Virtual Hosts by configuring Apache to read the default httpd-vhost.conf file that can be edited to point to your local directories with projects to host as a server.

Alternatively it is slightly better to abstract your vhost configuration for better management.

Here I set up for both but implement the later abstract set up.
Go to:
/etc/apache2/extra
and create a folder called:
/vhosts

Add the following lines in:
/etc/apache2/httpd.conf

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

Note it is important to pay attention to the order of the lines. Make sure that:

Include /private/etc/apache2/extra/vhosts/*.conf

is written BEFORE / ABOVE

Include /private/etc/apache2/extra/httpd-vhosts.conf

What were are doing here is telling the Apache server to look inside the /vhosts directory we just created for any .conf files.
Now we can add as many .conf files as we like to manage various vhost configurations rather than letting them pile up inside the httpd-vhost.conf file.

Once this is all done you can now create a new .conf files inside the /vhosts directory you created.
Fist I create a file called _default.conf

/etc/apache2/extra/vhosts/_default.conf

then inside _default.conf I write the following:

<VirtualHost *:80>
DocumentRoot “/Library/WebServer/Documents”
</VirtualHost>

Since I have not changed my DocumentRoot in my httpd.conf file after activating vhosts, this points to the same place to make sure I get the standard “It works!” message when I type in localhost in my web browser.

Create vhost configuraitons

Now I can create .conf files to manage vhost configurtations for various projects. For example if I have local projects for various domains e.g.:

foo.com
payments.foo.com
blog.foo.com

bar.com
gallery.bar.com

I can now create a new vhost .conf files specifically for my “foo . com” and “bar.com” projects. Lets call it them;

dev.foo.com.conf
and
dev.bar.com.conf

/etc/apache2/extra/vhosts/dev.foo.com.conf/etc/apache2/extra/vhosts/dev.bar.com.conf

Now in my dev.foo.com.conf file I can configure it to point to all the local directories with projects realted for “foo . com” e.g.:

#
# foo.com
#
<VirtualHost *:80>
ServerAdmin admin@foo.com
DocumentRoot “/Users/<<username>>/Developer/foo.com/main”
ServerName dev.site.local
<Directory “/Users/<<username>>/Developer/foo.com/main” >
AllowOverride All
</Directory>
</VirtualHost>

#
# payments.foo.com
#
<VirtualHost *:80>
ServerAdmin admin@foo.com
DocumentRoot “/Users/<<username>>/Developer/foo.com/payments”
ServerName dev.payments.foo.local
<Directory “/Users/<<username>>/Developer/foo.com/payments” >
AllowOverride All
</Directory>
</VirtualHost>

#
# blog.foo.com
#
<VirtualHost *:80>
ServerAdmin admin@foo.com
DocumentRoot “/Users/<<username>>/Developer/foo.com/blog”
ServerName dev.foo.site.local
<Directory “/Users/<<username>>/Developer/foo.com/blog” >
AllowOverride All
</Directory>
</VirtualHost>

etc etc

and do the same for dev.bar.conf file:

#
# bar.com
#
<VirtualHost *:80>
ServerAdmin admin@bar.com
DocumentRoot “/Users/<<username>>/Developer/bar.com/main”
ServerName dev.bar.local
<Directory “/Users/<<username>>/Developer/bar.com/main” >
AllowOverride All
</Directory>
</VirtualHost>

#
# gallery.bar.com
#
<VirtualHost *:80>
ServerAdmin admin@bar.com
DocumentRoot “/Users/<<username>>/Developer/bar.com/gallery”
ServerName dev.gallery.bar.local
<Directory “/Users/<<username>>/Developer/bar.com/gallery” >
AllowOverride All
</Directory>
</VirtualHost>

Update hosts file

Finally edit the host file with any new vhost configurations you have created
/etc/hosts

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
#Local Dev127.0.0.1 dev.foo.local
127.0.0.1 dev.payments.foo.local
127.0.0.1 dev.blog.foo.local
127.0.0.1 dev.bar.local

Open terminal and restart apache

sudo apachectl restart 

and should be good to go!

--

--