Trying to get Virtual hosts accessable via the LAN

Woke up this morning at 6am, but it was cloudy outside and I was sleepy so I went back to sleep. Got up at 7am, had a shower etc then had breakfast with Ben. After that I checked my email, deviantart, dpreview canon lens forum, Andy Rouse's blog and thewebsqueeze. Then I did a japanese lesson.

Did a bit of work on my website and got the Pogs info edit form working properly. Then I wanted to test it on IE6 so I tried to get my Apache virtual hosts working so the sites could be accessed over the local network.

My original httpd-vhosts.conf file looked like this:

NameVirtualHost 127.0.0.1

<virtualhost 127.0.0.1>
ServerName localhost:80
DocumentRoot "C:/xampp/htdocs"
</virtualhost>

<virtualhost 127.0.0.1>
ServerAdmin webmaster@site1.com
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/Site1"
ServerName site1.com
ServerAlias www.site1.com
PHPIniDir "C:/xampp/htdocs/VHosts/public_html/"
</virtualhost>

<virtualhost 127.0.0.1>
ServerAdmin webmaster@site2.com
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/Site2"
ServerName site2.com
</virtualhost>

<virtualhost 127.0.0.1>
ServerAdmin webmaster@milkcapmania.co.uk
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/PogSiteV3"
ServerName PogSiteV3.com
</virtualhost>

And my windows hosts file (on my local machine, the server) looked like this:

127.0.0.1 localhost
127.0.0.1 site1.com
127.0.0.1 site2.com
127.0.0.1 PogSiteV3.com
::1 localhost

First I tried changing NameVirtualHost and the VirtualHost block for PogSiteV3.com to *. But that didn't work. I tried other variations e.g. *:80, but they didn't work either. When I say 'didn't work' I mean that on the machine acting as the server pogsiteV3.com went to the same directory as localhost rather than the pogsiteV3 directory. I also tried removing the last entry from the windows hosts file, but still no difference. I also found that simply saving the .conf file and restarting Apache didn't work, for some reason the changes I made would only work if I restarted the whole PC, which is annoying and takes a few minutes each time.

So I did some googling and found this thread where some shows how they setup their Apache so they could access Virtual Hosts from another machine on a local network.

So I copied what they did and it worked. After changing stuff around bit by bit (and having to restart my PC each time to check) I ended up with the following in my httpd-vhosts.conf file:

NamevirtualHost localhost
NamevirtualHost site1.com
NamevirtualHost site2.com
NamevirtualHost pogsitev3.com

<virtualhost localhost>
Servername localhost
DocumentRoot "C:\xampp\htdocs"
</virtualhost>

<virtualhost site1.com>
ServerName site1.com
ServerAlias www.site1.com
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/Site1"
PHPIniDir "C:/xampp/htdocs/VHosts/public_html/"
</virtualhost>

<virtualhost site2.com>
ServerName site2.com
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/Site2"
</virtualhost>

<virtualhost pogsitev3.com>
ServerAdmin webmaster@milkcapmania.co.uk
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/PogSiteV3"
ServerName pogsitev3.com
ErrorLog C:/xampp/htdocs/VHosts/Logs/PogSiteV3-error.log
CustomLog C:/xampp/htdocs/VHosts/Logs/PogSiteV3-access.log common
</virtualhost>

And my hosts file (on both my local PC (the server) and the Virtual PC looked like this:

127.0.0.1 localhost
192.168.0.4 site1.com
192.168.0.4 site2.com
192.168.0.4 pogsitev3.com

With this setup I could access the sites both from my local machine (the server) and the Virtual PC. And of course so long as I setup the hosts file on any other PC in the Local Network, I would be able to access the sites from those machines as well.

But, Apache was giving me an error:

[Mon Nov 10 14:48:27 2008] [warn] NameVirtualHost site2.com:80 has no VirtualHosts
[Mon Nov 10 14:48:27 2008] [warn] NameVirtualHost pogsitev3.com:80 has no VirtualHosts
[Mon Nov 10 14:48:28 2008] [notice] Apache/2.2.4 (Win32) DAV/2 mod_ssl/2.2.4 OpenSSL/0.9.8e mod_autoindex_color PHP/5.2.3 configured -- resuming normal operations
[Mon Nov 10 14:48:28 2008] [notice] Server built: Mar 5 2007 11:23:00
[Mon Nov 10 14:48:28 2008] [notice] Parent: Created child process 2992
[Mon Nov 10 14:48:28 2008] [warn] NameVirtualHost site2.com:80 has no VirtualHosts
[Mon Nov 10 14:48:28 2008] [warn] NameVirtualHost pogsitev3.com:80 has no VirtualHosts
[Mon Nov 10 14:48:29 2008] [warn] NameVirtualHost site2.com:80 has no VirtualHosts
[Mon Nov 10 14:48:29 2008] [warn] NameVirtualHost pogsitev3.com:80 has no VirtualHosts
[Mon Nov 10 14:48:30 2008] [notice] Child 2992: Child process is running
[Mon Nov 10 14:48:30 2008] [notice] Child 2992: Acquired the start mutex.
[Mon Nov 10 14:48:30 2008] [notice] Child 2992: Starting 250 worker threads.
[Mon Nov 10 14:48:30 2008] [notice] Child 2992: Starting thread to listen on port 443.
[Mon Nov 10 14:48:31 2008] [notice] Child 2992: Starting thread to listen on port 80.

I did a bit more googling and reading and experimenting, and ended up with my conf file like this:

NameVirtualHost *:80

<VirtualHost *:80>
ServerName localhost:80
DocumentRoot "C:/xampp/htdocs"
</VirtualHost>

<VirtualHost *:80>
ServerAdmin webmaster@site1.com
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/Site1"
ServerName site1.com
ServerAlias www.site1.com
PHPIniDir "C:/xampp/htdocs/VHosts/public_html/"
</VirtualHost>

<VirtualHost *:80>
ServerAdmin webmaster@site2.com
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/Site2"
ServerName site2.com
</VirtualHost>

<VirtualHost *:80>
ServerAdmin webmaster@milkcapmania.co.uk
DocumentRoot "C:/xampp/htdocs/VHosts/public_html/PogSiteV3"
ServerName PogSiteV3.com
ErrorLog C:/xampp/htdocs/VHosts/Logs/PogSiteV3-error.log
CustomLog C:/xampp/htdocs/VHosts/Logs/PogSiteV3-access.log common
</VirtualHost>

I changed my hosts file on my local machine to:

127.0.0.1 localhost
127.0.0.1 site1.com
127.0.0.1 site2.com
127.0.0.1 PogSiteV3.com

And the hosts file on the Virtual PC to:

127.0.0.1 localhost
192.168.0.4 site1.com
192.168.0.4 site2.com
192.168.0.4 PogSiteV3.com

And it worked! Now I just need to see if I can do anything the make the Wii resolve those domain names to my machine's local IP address as well.

Blogger is quite annoying with posting the above code - it messes it up, even if you put the code in <pre> tags. So I found this handy website that encodes (and decodes) HTML characters.

Another error I noticed in the apache error log was that my site didn't have a favicon, so I googled about that and followed this guide to making favicons. The only thing missing from the tutorial is it doesn't tell you how to change the color depth of the image when saving. In photoshop you need to make sure your current Color mode is RGB, then go to Image > Mode > Indexed Color...

1. Then in the pop up box you need to choose Local (Selective) for the palette.
2. Colors - mess around with it choosing the fewest amount of colors you need to still get a good result. I only needed 32 colors (5 bits) for my icon.
3. Forced set to Black & white.
4. Transparency ticked as needed (I didn't have any transparency in my icon)
5. Matte was greyed out and set to none
6. Dither was set to Diffusion
7. Amount set to 75%
8. And Preserve exact colours not ticked.

Adobe has an article about changing the color bit depth in photoshop, but I needed to turn CSS off in my browser to be able to see it, otherwise the text was covered by a big grey box.

After getting that working properly I tested the site on IE6. The layout was messed up, but that was pretty easy to fix. Then I found that when you clicked on a menu item to expand it, an extra space would be added to the item title each time. It was easy to fix that as well, but strange that it should happen since normally multiple spaces in a row in HTML will render as a single space on the page.

Then I found a more serious problem - when you click on one of the pog images to load up the larger image in the lightbox, the login form at the top right hand corner of the page gets messed up. Both the input boxes in the form dissapear (well, they're still there but you can't see or access them). So I spent a long time trying to fix this. The problem seems to be with the IE filter for handling transparency in PNGs, which I am using in IE6. I found that if I change the id of the input, or insert a new input with a different id, then that input will display ok. But if I change the id of the input and then change it back to the original id, or insert a new input with the same id as the original input, then they won't display. I will have to look into this a bit more tomorrow.

About 9pm I finished watching Zulu with Maccy and Ben, then I went on hotukdeals and downloaded the latest VHD of IE6 for Microsoft Virtual PC 2007 since my current one kept saying it was past its expiration date.

The weather today was overcast all day and it rained most of the day.

Food
Breakfast: Coco pops; Banana; cup o' tea.
Lunch: Grated matured cheddar cheese with baby leaf salad sandwich; cherry tomato; apple; cup o' tea.
Dinner: Beef burger in bun with grated cheese, tomato ketchup and babyleaf salad; Chicken & vegetable soup in a mug; bun. Pudding was cheesecake with mandarin slices. Coffee.
Supper: Coffee; Mince pie.