As a web developer / designer, I do a lot of things that make my workflow easier, one of them is using a local staging server for sites I am working on in the initial build phases.
The first step is modifying the httpd-vhosts.config to point to a local folder for a specific domain. This is better than using subfolders in a single public folder, because you can use absolute relative paths (ie: /css/, and in CSS files /images/logo.jpg)
Example insert into the vhosts configuration file:
<VirtualHost *:80>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "Q:\_WORK\projectname\www"
ServerName projectname.stage
</VirtualHost>
<Directory "Q:/_WORK/projectname/www">
AllowOverride All
Order allow,deny
Allow from all
</Directory>
The *:80 string tells Apache to listen on any IP address for the connection (ie: your internet IP address), you can change this to 127.0.0.1 if you don’t want the website to be available outside of your computer (you would need a real internet based DNS entry for that, and access to the DNS Zone for the domain).
The DocumentRoot directive should match the Directory path exactly, aside from the use of back/forwardslashes as used above.
So now to make the projectname.stage address actually work, we need to add a DNS entry pointing it to our IP address (127.0.0.1)… there’s a few ways to do this.
1) You can edit your hosts file (c:\windows\system32\drivers\etc\hosts in windows, /etc/hosts in most *nix based systems) to include a line:
127.0.0.1 projectname.stage
or 2) Use a local DNS proxy server (with wildcards!!)… I use Acrylic, which allows wildcards, so I don’t need to configure a new stage server name in my hosts every time.
You can edit the Acrylic hosts file (mine is at C:\Program Files (x86)\Acrylic DNS Proxy\AcrylicHosts.txt), adding the following line and restart the proxy:
127.0.0.1 *.stage
This will make it so any usage of the .stage TLD will point to your local machine. So all you need to do is have the virtual host configured and Bob’s your uncle!
Now whenever you hit projectname.stage in your browser it will point towards your loopback IP address. Hitting http://projectname.stage would connect to Apache, sending it the hostname in the requests, and Apache will render the files in the location specified in your vhost config!
*UPDATE*
As soon as I wrote this, I thought to myself, how AWESOME would it be to not even have to configure each virtual host??? With Apache 2 it’s totally possible (can I get a hell yes?)
As stated here you can use Regular Expressions to dynamically point to directories.
You need to uncomment / add the following to httpd.conf:
LoadModule vhost_alias_module modules/mod_vhost_alias.so
And then add the following to your vhosts config:
<VirtualHost *:80>
UseCanonicalName Off
ServerAdmin webmaster@dummy-host.example.com
VirtualDocumentRoot "Q:\_WORK\%1.0\www"
ServerAlias *.stage
ServerName *.stage
LogLevel Debug
</VirtualHost>
<Directory "Q:/_WORK/">
Options -Indexes FollowSymLinks
AllowOverride AuthConfig FileInfo
Order allow,deny
Allow from all
</Directory>
This, along with your wilcard DNS setup, will point *.stage to the appropriate folder;
blah.stage => q:\_WORK\blah\www
abc1234.stage => q:\_WORK\abc1234\www
Without ever needing to touch your config files again…. YEAAAAAAAAAAAAA!
Sorry. got super excited.
