Webentwicklung mit PHPStorm + Vagrant + XDebug

Wer Websites entwickelt, wird früher oder später die Umgebung des Kunden oder Hosters replizieren wollen (statt bspw. XAMPP oder ähnliches zu verwenden). Vorzugsweise so, dass man das Ganze auch in seiner Quellcodeverwaltung hinterlegen kann, um Kollegen die Mitarbeit zu ermöglichen, ohne dass groß auf dem Entwicklungsrechner konfiguriert werden muss.

Ein gängiger Weg dafür ist die Erstellung einer virtuellen Maschine, die dann ähnlich wie die Zielumgebung aufgesetzt wird. Nachteil dabei ist, dass man Gigabytes dafür reservieren muss und somit ein einchecken eher schwierig wird. Ein Update einzelner Komponenten oder die Nutzung in mehreren Projekten ist auch nicht gerade handlich.

Zum Glück gibt es mit Vagrant ein geniales Tool, das die Möglichkeit bietet, durch ein kleines Konfigurationsfile eine komplette virtuelle Maschine zu definieren und jederzeit zu erzeugen. Das einchecken wird ebenfalls einfacher, da nur noch ein paar KB in die Quellcodeverwaltung fließen müssen. Vagrant unterstützt neben VirtualBox auch VMWare.

Hier stelle ich ein Setup vor, um PHPStorm mit Vagrant einzusetzen. PHPStorm bietet eine Integration der wichtigsten Befehle von Vagrant in die Entwicklungsumgebung an, so dass die spätere Nutzung extrem einfach wird.

Zielumgebung: PHPStorm + Vagrant + Ubuntu 12 + PHP 5.3 + MySQL 5 + XDebug

Voraussetzung: Vagrant und VirtualBox sollten auf dem Host installiert sein. PHPStorm ist nur meine persönliche Wahl, das Prinzip klappt auch mit anderen IDEs.

Ich gehe nicht im Detail auf jeden Befehl in der Konfiguration ein, reiße nur das wichtige an. Gute Starter-Guides für Vagrant finden sich beispielsweise hier.

Mein Vagrantfile

# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"
 
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
	# Every Vagrant virtual environment requires a box to build off of.
	config.vm.box = "ubuntu/precise64"
 
	# Hostname
	config.vm.hostname = "dev.wits.net"
 
	# Create a private network, which allows host-only access to the machine
	# using a specific IP.
	config.vm.network "private_network", ip: "192.168.33.10"
 
	# AHCTUNG: Anpassung der hosts-Datei auf dem host nicht vergessen !!!
 
  	# Projektordner synchronisieren
	config.vm.synced_folder "./", "/var/www",
		id: "vagrant-root",
		owner: "vagrant",
        group: "www-data",
        mount_options: ["dmode=775,fmode=664"]
 
	# Provisioning
	config.vm.provision "shell", path: "bootstrap.sh"
end

Im Prinzip alles kein Hexenwerk. Ich nutze als Basisbox ein Ubuntu 12, der Hostname wird festgelegt und eine feste IP gesetzt. Der Einfachheit halber sollte auf dem host-Rechner die hosts-Datei angepasst werden. Unter Windows findet sich diese hier: C:\Windows\System32\drivers\etc\hosts, zum Bearbeiten werden Admin-Rechte benötigt.

Für den Projektordner wird festgelegt, dass er als webroot verwendet wird, dies spart das lästige hochladen editierter Dateien.

Zuletzt wird noch ein Shell-Skript auf dem Gast gestartet, das sich um die Installation der notwendigen Software kümmert.

bootstrap.sh

#!/bin/bash
 
# Update und Apache installieren
sudo apt-get -y update
sudo apt-get -y install apache2
 
# MySQL installieren
sudo debconf-set-selections <<< 'mysql-server mysql-server/root_password password root'
sudo debconf-set-selections <<< 'mysql-server mysql-server/root_password_again password root'
sudo apt-get -y install mysql-server
 
# MySQL Konfiguration anpassen und externe Connections zulassen
sudo sed -i "s/bind-address.*/bind-address = 0.0.0.0/" /etc/mysql/my.cnf
sudo mysql -u root -proot --execute "GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'root' with GRANT OPTION; FLUSH PRIVILEGES;" mysql
 
# MySQL neu starten
sudo service mysql restart
 
# PHP 5.3 installieren
sudo apt-get install -y php5 libapache2-mod-php5 php5-mcrypt php5-mysql php5-xdebug
 
# php.ini anpassen
# Loglevel hochsetzen
sudo sed -i.bak 's/error_reporting = E_ALL & ~E_DEPRECATED/error_reporting = E_ALL/g' /etc/php5/apache2/php.ini
# XDebug konfigurieren
echo "xdebug.default_enable = 1" | sudo tee -a /etc/php5/apache2/conf.d/xdebug.ini
echo "xdebug.idekey = \"PHPStorm\"" | sudo tee -a /etc/php5/apache2/conf.d/xdebug.ini
echo "xdebug.remote_enable = 1" | sudo tee -a /etc/php5/apache2/conf.d/xdebug.ini
echo "xdebug.remote_autostart = 0" | sudo tee -a /etc/php5/apache2/conf.d/xdebug.ini
echo "xdebug.remote_port = 9000" | sudo tee -a /etc/php5/apache2/conf.d/xdebug.ini
echo "xdebug.remote_handler = dbgp" | sudo tee -a /etc/php5/apache2/conf.d/xdebug.ini
echo "xdebug.remote_host = `netstat -rn | grep "^0.0.0.0 " | cut -d " " -f10`" | sudo tee -a /etc/php5/apache2/conf.d/xdebug.ini
 
# Apache neu starten
sudo service apache2 restart
 
# IP-Adresse nochmal ausgeben
echo "+------------------------------------------------------------------"
echo "|"
/sbin/ifconfig eth1 | grep 'inet addr:' | cut -d: -f2 | awk '{ print "| Website erreichbar unter http://dev.wits.net (IP: "$1")"}'
echo "|"
echo "+------------------------------------------------------------------"

Im Shell-Skript werden Apache und MySQL installiert. MySQL bekommt einen User root mit Passwort root, der von überall erreichbar ist (daher NICHT für den produktiven Einsatz geeignet!). PHP wird mit den notwendigen Modulen installiert und zuletzt wird noch die Konfiguration für XDebug eingerichtet. Um XDebug mit PHP zu nutzen muss nachher im Browser ein Cookie gesetzt werden, dafür gibt es praktische Bookmarklets bei jetbrain.

Beide Dateien sollten im Projektverzeichnis abgelegt werden.

Im Prinzip war es das. Nun noch PHPStorm starten, im Menü Tools->Vagrant->up aufrufen, beim ersten mal ein bisschen warten und unter der URL http://dev.wits.net erreicht man die Maschine.

Noch Fragen? Einfach einen Kommentar hinterlassen und ich antworte gerne.

Waidner IT Solutions