A Web Development Server Environment on Leopard

UPDATE: I’ve now written a modified guide for Snow Leopard!

I apologize — this is a little nerdier than this blog typically gets, but I wanted to put this up online somewhere and didn’t have anywhere else to put it.

I’ve been frustrated with the web server that comes with Mac OS 10.5 (Leopard) and I’ve worked to set up my own server for web development projects.  I’d tried this a number of ways, but this time I was really happy with the process and the end result — so I typed up a little document on how to set up a nice web dev environment (partly so I can repeat it, but partly to share).  Enjoy!

* * * * *

I’ve found a relatively easy way to maintain a flexible, updatable development under MacOS 10.5 which goes so far as to install my own components, but not to have to compile them (which I’ve done several times and can attest, is a pain).

This setup gives you a great web development environment under Leopard (geared in my case towards Flash development compatible with the WordPress platform), which does a better job of playing by the rules than the default install of a lot of these elements.  And with MacPorts, the whole thing is modular and very easily maintained.

And everything on the list is free and/or open-source.

* Note that you’ll need to have administrator privileges on your user account to do this.

** Also note that this is geared towards creating a relatively unfettered development environment.  I don’t make any considerations about server security or server optimization for large-scale web applications.  This is really geared towards creating a simple, local dev environment.

Includes:

  • XCode Tools
  • MacPorts
  • Apache2
  • PHP 5
  • MySQL 5

* optional installs:

  • Subversion
  • SCPlugin
  • Sequel Pro (formerly CocoaMySQL)

derived from a bunch of sources, including:
php-5.2.5 on Leopard
Using Macport to Setup PHP5 and Apache2 on Leopard/
Installing MYSQL on Mac OS X Leopard Using Macports

Here goes:

1. Install XCode Tools:
http://developer.apple.com/technology/xcode.html

pretty self-explanatory. Install them.  You’ll need them at the very least for MacPorts.  But they come in handy if you ever need to compile anything.

2. Install MacPorts
http://www.macports.org/install.php

MacPorts is a modular install system with easy update / swap / uninstall capacity.  It’s like Fink (I say, never having used Fink) — just an easy way to install a bunch of standard programs.

There are several install options, but the easiest thing to do is just use the disk image here:

http://svn.macports.org/repository/macports/downloads/MacPorts-1.7.1/MacPorts-1.7.1-10.5-Leopard.dmg

Unless you’re an advanced user I recommend you do that.

3. Update MacPorts

sudo port -v selfupdate #makes sure ports is up to date
sudo port sync #syncs the local port index with the remote index

4. Install Apache 2

sudo port install apache2
sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist # set to autorun at boot

The standard web server. Standard, because it’s really stable, fast and flexible.

more info: http://blog.rajatpandit.com/2009/03/12/using-macport-to-setup-php5-apache2-on-leopard/

** notes **
You don’t necessarily need these, but I find it’s helpful to have some aliases to address apache — mostly for start, stop and restart functionality.  You can set these aliases to be whatever you want.  Or ignore them.  I just find them helpful.

alias apache_start=”sudo /opt/local/apache2/bin/apachectl start”
alias apache_restart=”sudo /opt/local/apache2/bin/apachectl restart”
alias apache_stop=”sudo /opt/local/apache2/bin/apachectl stop”

5. Install MySQL 5

sudo port install mysql5 +server
sudo /opt/local/lib/mysql5/bin/mysql_install_db –user=mysql #initialze mysql
sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5.plist #set mysql to autostart at boot
sudo /opt/local/bin/mysqld_safe5 #start

#create symbolic links to not have to type in mysql5 every time:

sudo ln -s /opt/local/bin/mysql5 /opt/local/bin/mysql
sudo ln -s /opt/local/bin/mysqladmin5 /opt/local/bin/mysqladmin

More info: http://matthewcarriere.com/2008/04/02/installing-mysql-on-mac-os-x-leopard-using-macports/

6. Install php5 (with apache2, mysql and pear support)

sudo port install php5 +apache2 +mysql5 +pear

7. Activate PHP

cd /opt/local/apache2/modules
sudo /opt/local/apache2/bin/apxs -a -e -n “php5” libphp5.so

8. Move Leopard’s standard Apache out of the regular path

sudo mv /usr/sbin/apachectl /usr/sbin/apachectl-leopard

9. Move your new Apache into the path
(you might not need the first 2 steps, but I’m working on a totally clean Leopard build, so I don’t have these directories yet)

sudo mkdir /usr/local
sudo mkdir /usr/local/bin
sudo ln -s /opt/local/apache2/bin/apachectl /usr/local/bin/apachectl

10. Move Leopard’s bundled PHP out of the way

sudo mv /usr/bin/php /usr/bin/php-leopard

11. Do some Apache configuration for PHP:
(all of these are modifications to the httpd.conf file located here: /opt/local/apache2/conf/httpd.conf)

a. Add index.php to the list of DirectoryIndex:

<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>

b. Add handlers for PHP files:

# Add handling for PHP files
<IfModule php5_module>
AddHandler application/x-httpd-php .php
AddHandler application/x-httpd-php-source .phps
</IfModule>

This block can go anywhere in the httpd.conf — but it’s probably best to keep the module handlers in alphabetical order.

c. Restart Apache
If you added the alias to your bash profile, you can now do apache_restart. Otherwise, enter:

sudo apachectl restart

11. Include user Sites directories (enable the following file by un-commenting it):

# User home directories
Include conf/extra/httpd-userdir.conf

12. Re-link mysql.sock:

sudo ln -s /opt/local/var/run/mysql5/mysqld.sock /tmp/mysql.sock

This step is essential so everyone can agree where MySQL is living on the system and how to connect to it.  Before I did this, Apache and PHP seemed to be able to access MySQL, and I could access MySQL from the command line, but programs like SequelPro couldn’t find the MySQL socket.  This step seems to correct that problem and let everyone play nicely.

** OPTIONAL **
These steps are optional — certainly not essential, but I find them to be very helpful tools for web development.

13. Install Subversion

sudo port install subversion

This installs the latest version of Subversion on the system — which is then used for SVN access from the command line, from Eclipse, from SCPlugin, etc.

14. Install SCPlugin

http://scplugin.tigris.org/

SCPlugin is a great little tool that integrates Subversion access with the MacOS Finder and lets you do all of your basic SVN commands from there (checkout, update, revert, etc).  It doesn’t give you deep, deep access into SVN commands like version checkout or repository browsing, but for lazy commands like checkout and update, it’s great.

15. Install CocoaMySQL / SequelPro

CocoaMySQL 0.7b6
CocoaMySQL-SBG 0.7.1

Of those two I prefer 0.7b6 — It seems perfectly stable to me.

CocoaMySQL is an awesome little MySQL editor / browser based on the CocoaMySQL codebase.  I’ve been using it for years and I’ve found it’s a lot faster than entering SQL commands in the Terminal or dealing with PHPMyAdmin (which is super-slow even running locally).

CocoaMySQL lets you manage DBs effortlessly. I find it’s great for DB creation (when you’re still sketching out a project and want to play around with table structure), and for common tasks like importing and exporting.

It’s a native MacOS application, so it’s really zippy and it lets you do local and remote DB access.  And it plays nice with all of the components we’ve installed so far.

I highly recommend it.

The only drawback is that the codebase for CocoaMySQL has been abandoned.  It’s been picked up by the SequelPro project, but honestly these guys have a ways to go before their product matches CocoaMySQL (like — they still need to add user administration).  By the time you read this maybe they’ve added some features.  If not, I’d say CocoaMYSQL still works beautifully — even though the code has been abandoned.

If you want SequelPro, though, you can get it here:

http://www.sequelpro.com/

16. ADVANCED – Virtual Hosts

I first experimented with Virtual Hosts when I started doing WordPress development — mostly because WordPress seems much happier with shorter real world style urls like:

http://radio.local

than those you’d typically see running on your local box:

http://localhost/~jeff/projects/wordpress/radio-station

But once I started playing with these, I decided it was MUCH easier to be able to deal with these super-short urls (think Bit.ly for your local box) than to have to type in the whole thing.  It’s made my life a lot simpler, so I figured I’d pass along the info.

Note that when you choose a host name, you’ll want to choose one that doesn’t exist on the web.  You’re basically overriding your machine’s host lookup functionality — hard coding urls to corresponding locations on your local disk — and thereby bypassing DNS lookup.  So if you pathed http://www.google.com to your local disk, your computer wouldn’t be able to find the real google until you undid the Virtual host.  So be careful.

I typically choose a hostname that includes the suffix .local.  That’s never given me any problems (eg. projects.local, flash.local, radio.local).

Let’s begin.

You’ll be dealing with 3 files on this:

  • httpd.conf
  • httpd-vhosts.conf
  • hosts

Which, if you followed the steps above, are located at:

  • /opt/local/apache2/conf/httpd.conf
  • /opt/local/apache2/conf/extra/httpd-vhosts.conf
  • /private/etc/hosts

a. Enable Apache’s Virtual Host configuration
in httpd.conf, uncomment the Virtual Hosts line:

Include conf/extra/httpd-vhosts.conf

This will allow you to add hosts to your vhosts configuration file.

b. Add host locations

open the vhosts file in your favorite text editor:

/opt/local/apache2/conf/extra/httpd-vhosts.conf

The first thing you’ll want to do here is comment out the default examples they give you (the ones that include ServerAdmin webmaster@dummy-host.example.com).  You might want them as a reference, but you don’t want them to be active.  Comment them out.

Next you’ll add your host.  Substitute in values below to correspond to your build and the hostname you choose:

<VirtualHost *:80>
DocumentRoot “/Users/USERNAME/PATH”
ServerName hostname.suffix
</VirtualHost>

Typically life is easier if you choose a disk path inside of your Sites directory.  If you don’t you might need to do some more file permission configuration.

In my case, the host I added is:

<VirtualHost *:80>
DocumentRoot “/Users/jeff/Sites/projects”
ServerName projects.local
</VirtualHost>

So now Apache knows that when it’s told to serve any files referenced by the url projects.local, it’ll serve them from the path I’ve given it in my Sites directory.  There are other arguments you can add to the VirtualHost node, but this is all you need.

c. Add host names to your hosts file

Next you need to tell the machine that when you ask for that particular server name, you want it to ask the local Apache server to serve it.  Editing this file is globally applicable to all browser applications — so once you edit this file, programs like Firefox, Safari, Opera, etc will all serve up your local page instead of looking the url up with the friendly neighborhood DNS.

Your machine already does this to a certain extent — for example, the ‘localhost’ prefix is already set up via the hosts file so that the machine knows to look to the local Apache server, rather than out on the web.  What we’re doing is adding one or many shortcuts that mimic this behavior — but which point to more specific locations on disk.

Open your hosts file:

/private/etc/hosts

and add the line:

127.0.0.1     hostname.suffix

(so in my case I added):

127.0.0.1     projects.local

then save the file.

d. Restart Apache
Go back to the terminal and restart apache:

sudo apachectl restart

Now you should be all set.  Open up your browser and point it towards the virtual host you just made. In our case that’s:

http://projects.local

And your browser should serve up that url like magic. ;)

Tags: , , , , ,