Shopware in Vagrant aufsetzen

Diese Woche geht es um das aufsetzen von Shopware mit Vagrant. Vagrant ist eine Ruby-Anwendung welche das erstellen und verwalten von virtuellen Maschinen ermöglicht. Das ist besonders hilfreich, wenn Ihr kein XAMP, MAMP oder eigene Apache/MySQL Services laufen habt.

Shopware selbst stellt eine Anleitung auf englisch zur Verfügung, welche auch etwas detaillierter auf das Thema eingeht. Ich fasse mich etwas kürzer und auf „good old german“.

Bevor wir loslegen benötigen wir allerdings noch VirtualBox und Vagrant auf unserem System (Mein OS ist Ubuntu 16.10 – VirtualBox kommt dort schon mit und Vagrant installiere ich mit sudo apt install vagrant )

Schritt 1 – VM starten

Als erstes gehen wir in unseren gewünschten Ordner (ich nutze dafür /srv/) und clonen uns das Repository von Shopware.

$ git clone https://github.com/shopwareLabs/shopware-vagrant 
$ cd shopware-vagrant
$ vagrant up

Nach vagrant up  wird die VM für Ubuntu von vagrant geladen, das kann je nach Anbindung eine Weile dauern. Daraufhin solltet Ihr verschiedene Tasks beobachten können:

TASK [sw-cli-tools : download sw cli tools] ************************************
changed: [default]

TASK [grunt : Install grunt-cli] ***********************************************
changed: [default]

RUNNING HANDLER [apache : apache-restart] **************************************
changed: [default]

RUNNING HANDLER [apache : apache-reload] ***************************************
changed: [default]

RUNNING HANDLER [mysql : mysql-restart] ****************************************


PLAY RECAP *********************************************************************
default : ok=54 changed=47 unreachable=0 failed=0

0 unreachable und 0 failed – wir sind „good to go“.

Jetzt können wir unsere VM unter http://192.168.33.10/ erreichen.

Schritt 2 – Shopware auf VM hochladen

Dieser Abschnitt kann auf verschiedene Arten durchgeführt werden. Ich wähle den auch schon von Shopware gezeigten wegen via PHPStorm. Mit der Zeit habe ich einige IDE’s oder Editor für PHP ausprobiert (Netbeans, Eclipse, Notepad++ etc.) – ich muss allerdings gestehen, dass keine/r so gut funktioniert hat wie PHPStorm. Natürlich kommt das nicht von ungefähr. Man zahlt ja schließlich auch für die IDE von Jetbrains, wo man zum Vergleich die anderen kostenlos erhält. Als Student bekommt man die komplette Produktpalette übrigens kostenlos und als Startup (jünger als 3 Jahre) bekommt man 50% Erlass, aber zurück zum Thema.

Wir clonen das aktuelle Git Repository von Shopware in einen gewünschten Ordner. Ich packe es bei mir in /var/www/shopware das mag auf den ersten Blick keinen Sinn ergeben, da ich dafür am Ende ja Vagrant nutzen möchte, aber der Gewohnheit zur Liebe, packe ich es dort rein.

$ cd /var/www
$ git clone https://github.com/shopware/shopware.git

Nun öffnen wir unser PHPStorm und gehen wie folgt vor:

1. Wir erstellen ein neues Projekt unter File->New Project from Existing Files…

         

2. Wählen unseren Projektpfad aus und markieren ihn mit Project Root nachdem wir auf Finish klicken öffnet sich das Projekt in PHPStorm und wird indexiert (Dauer: 1-2 Minuten, je nach PC Setup)

3. Danach fügen wir unter Tools->Development->Configuration unseren laufenden Vagrant Ubuntu Server hinzu (Klick auf das grüne Plus oben links) in unserem Fall wählen wir SFTP.

Konfigurationsdaten

SFTP host: 127.0.0.1
Port: 2222
Root Path: /home/vagrant/www
User name: vagrant
Password: vagrant
Save Password: yes
Web server root URL: http://192.168.33.10/

4. Nun tragen wir unter dem Tab Mappings noch unsere Pfad auf dem Vagrant Server ein – dieser ist in unserem Fall /showpare

5. Anschließend klicken wir auf OK. Nun sind wir erneut in der Projektübersicht. Dort klicken wir mit der rechten Maustaste auf das Rootverzeichnis und wählen Upload to um unsere Shopware Dateien auf unsere VM hochzuladen.

        

Tipp: Unter Tools->Development->Automatic Upload könnt Ihr den automatischen Upload aktivieren. Andernfalls müsst Ihr Eure Dateien stets via Strg+Alt+U hochladen.

Außerdem interessant – Ihr habe mit dem Download gleich versch. Branches von Shopware auf eurer lokalen Maschine. Den Überblick darüber bekommt Ihr unten Rechts in PHPStorm (siehe Bild).

Schritt 3 – Shopware Build ausführen

Nun haben wir alle nötigen Dateien auf unserer VM und können den Build ausführen. Da wir shopware-vagrant nutzen haben wir dafür schon alle nötigen Tools mit an Board.

$ vagrant ssh
$ cd /home/vagrant/www/shopware/build

Damit wechseln wir in den build Ordner und führen folgendes aus:

$ ant configure

Im Prompt tragen wir folgende Daten ein:

db-host: localhost
db name: shopware
db username: root
db password: shopware
app host: 192.168.33.10
app path: /shopware

Wenn wir die Benachrichtigung BUILD SUCCESSFUL erhalten führen wir folgenden Befehl im Terminal aus:

$ ant build-unit

Dieser lädt alle Möglichen Dependencies herunter und installiert diese. Mein Build hat ca. 2 Minuten gedauert.

BUILD SUCCESSFUL
Total time: 2 minutes 12 seconds

Nun können wir bei Bedarf noch Beispielbilder herunterladen – ich empfehle es, da sonst eine Menge 404 Fehlermeldungen erscheinen (geringere Ladezeit) und die Optik einfach nicht sonderlich schön ist.

$ cd .. 
$ wget -O test_images.zip http://releases.s3.shopware.com/test_images.zip
$ unzip test_images.zip

Danach könnt Ihr die Zipfile einfach wieder löschen.

$ rm test_images.zip

Et voilà – schon haben wir ein voll funktionsfähiges Shopware Setup. Mit allen möglichen Produktvarianten, Einkaufswelten uvm. Und das alles ohne sich Gedanken über Dateirechte, Apache Mods o.Ä. zu machen.

Beim ersten mal mag dieses Verfahren noch etwas aufwendig aussehen, doch im Nachhinein spart man sich eine Menge Arbeit.

Da wir zum aktuellen Zeitpunkt die Version 5.2.17 heruntergeladen und installiert haben, können wir uns in diesem Zuge auch gerade die neue CLI Bildkomprimierungsoption von Shopware anschauen. Denn auch der heruntergeladene Beispielordner von Bildern hat Optimierungspotential. Gerade in der Zeit von „mobile First“ ist eine optimierte Webseite Gold wert.