WPML
Tutorials

Einrichten einer lokalen WordPress-Entwicklungsumgebung mit Docker, Xdebug und PhpStorm

Eran Helzer9 Minuten

Teilen:

Mit Docker Compose, Xdebug und PhpStorm können Sie eine reproduzierbare, isolierte und leicht zu verwaltende lokale Entwicklungsumgebung erstellen, die einen Produktionsserver widerspiegelt und die Qualität Ihrer WordPress-Projekte verbessert.

Hallo an alle WordPress-Entwickler und fortgeschrittenen Benutzer! Heute freue ich mich, ein umfassendes und dennoch unkompliziertes Tutorial zur Einrichtung einer lokalen WordPress-Entwicklungsumgebung mit Docker Compose mit Ihnen zu teilen. Da ich vor kurzem Teil des dynamischen Teams von OnTheGoSystems geworden bin, habe ich beschlossen, meine gewohnte Arbeitsumgebung mitzubringen, und genau darum geht es bei diesem Setup.

Das Ziel war einfach: ein Setup zu entwickeln, bei dem ich eine genaue Kontrolle über meine Entwicklungstools habe und Xdebug sowie WP-CLI in das offizielle WordPress-Docker-Image integriere. Bei diesem Setup geht es nicht darum, das Rad neu zu erfinden, sondern es so anzupassen, dass es den individuellen Vorlieben und Arbeitsweisen entspricht. Ich hoffe, dass dieser Leitfaden für Sie bei der Konfiguration einer ähnlichen Umgebung hilfreich sein wird und Ihre Reise in der WordPress-Entwicklung bereichert.

Voraussetzungen

Um das Beste aus diesem Tutorial herauszuholen, müssen Sie die folgenden Abhängigkeiten installiert haben:

  1. Docker: Wir werden Docker als unser primäres Tool zum Erstellen, Bereitstellen und Ausführen von Anwendungen mithilfe von Containern verwenden. Es ermöglicht uns, eine Anwendung mit allen benötigten Teilen in einem Container zu verpacken und als ein Paket auszuliefern. Was Docker noch leistungsfähiger macht, ist das Versprechen einer genauen Kontrolle, die es uns ermöglicht, jeden Aspekt unseres Anwendungs-Setups präzise zu definieren. Diese Kontrolle hilft dabei, eine Entwicklungsumgebung zu schaffen, die genau unseren Anforderungen entspricht.
  2. Xdebug-Chrome-Erweiterung: Diese Browser-Erweiterung hilft uns dabei, unseren Code schrittweise durchzugehen, Fehler zu finden und die Gesamtqualität unserer WordPress-Projekte zu verbessern.
  3. PhpStorm: Eine intelligente und voll ausgestattete IDE für PHP, entwickelt von JetBrains. Sie bietet einen Editor für PHP, HTML und JavaScript mit On-the-fly-Code-Analyse und automatisiertem Refactoring für diese Sprachen.

Warum Docker, Xdebug und PhpStorm?

Unser Ziel ist es, eine lokale WordPress-Entwicklungsumgebung einzurichten, die isoliert, reproduzierbar und leicht zu verwalten ist. Docker bildet das Rückgrat dieses Setups und stellt die Infrastruktur bereit, um unsere Anwendung einzuschließen und zu verwalten. Xdebug und PhpStorm sind die ergänzenden Teile dieses Puzzles und bieten erweiterte Funktionen für die PHP-Code-Entwicklung und das Debugging.

Unsere Reise beginnt mit der Erstellung eines Dockerfiles, das das offizielle WordPress-Docker-Image erweitert. Wir werden dieses Image verbessern, indem wir Xdebug und WP-CLI integrieren – Tools, die für unsere WordPress-Entwicklungs- und Debugging-Aufgaben von entscheidender Bedeutung sind.

Als Nächstes entwerfen wir eine Docker-Compose-Datei, um zwei wichtige Dienste zu orchestrieren: WordPress und MySQL. Und ob Sie es glauben oder nicht, das war es im Grunde schon!

Das Schöne an diesem Setup ist, dass es zu einer lokalen Entwicklungsumgebung führt, die nicht nur einen Produktionsserver widerspiegelt, sondern auch leicht replizierbar ist. Das bedeutet, dass wir das exakte Setup problemlos über mehrere Umgebungen oder Maschinen hinweg duplizieren können, was Konsistenz gewährleistet und Setup-bezogene Probleme reduziert.

Schritt-für-Schritt-Tutorial

Schritt 1: Das Dockerfile

Unsere Reise beginnt mit der Erstellung eines neuen Dockerfiles. Diese Datei weist Docker an, wie unser Image erstellt werden soll. Hier ist das grundlegende Setup, mit dem ich normalerweise beginne:

# Use the official WordPress image as a parent image
FROM wordpress:latest

# Install Xdebug
RUN pecl install xdebug 

# Install WP-CLI
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
    chmod +x wp-cli.phar && \
    mv wp-cli.phar /usr/local/bin/wp

# Copy xdebug.ini into the container
COPY xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

In diesem Dockerfile beginnen wir mit dem offiziellen WordPress-Image. Anschließend installieren wir Xdebug und WP-CLI aus Gründen der Übersichtlichkeit und Wartbarkeit separat. Die Xdebug-Konfigurationsdatei (xdebug.ini) wird in das entsprechende Verzeichnis im Container kopiert. Dies bildet die Grundlage meines bevorzugten Setups für eine lokale WordPress-Entwicklungsumgebung.

Schritt 2: Die Xdebug-Konfigurationsdatei (xdebug.ini)

Da wir Xdebug nun in unserem Docker-Image installiert haben, müssen wir es so konfigurieren, dass es in unserer lokalen Entwicklungsumgebung funktioniert. Dies beinhaltet das Erstellen einer xdebug.ini-Datei mit den folgenden Einstellungen:

ini
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_port=9003
xdebug.start_with_request=yes

Diese Einstellungen aktivieren die Xdebug-Erweiterung, legen fest, dass das Debugging bei jeder Anfrage gestartet wird, und definieren den Client-Port, zu dem eine Verbindung hergestellt werden soll (in diesem Fall 9003). Sie haben vielleicht bemerkt, dass wir noch keinen client_host angegeben haben, aber keine Sorge, dieser kommt sehr bald in unserem Einrichtungsprozess ins Spiel.

Schritt 3: Die Docker-Compose-Datei

Als Nächstes erstellen wir eine docker-compose.yml-Datei, die unsere WordPress- und MySQL-Dienste einrichtet:

yaml
version: '3'
services:
  # MySQL Service
  mysql:
    image: mysql:latest
    container_name: mysql_container
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
  
  # WordPress Service
  wordpress:
    depends_on: 
      - mysql
    image: wordpress:latest
    container_name: wp_container
    volumes:
      - ./wp_data:/var/www/html
    environment:
      WORDPRESS_DB_HOST: mysql
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DEBUG: 1
      XDEBUG_CONFIG: client_host=host.docker.internal
    ports:
      - "8000:8000"

volumes:
  db_data:

In dieser Datei haben wir zwei Dienste definiert – MySQL und WordPress. Beide Dienste haben eindeutige Container-Namen, um die Referenzierung und Verwaltung zu erleichtern.

Die Direktive restart: always stellt sicher, dass der Dienst immer neu gestartet wird, wenn er unerwartet stoppt. Wenn er manuell gestoppt wird, wird er nur neu gestartet, wenn der Container manuell neu gestartet wird.

Der MySQL-Dienst bindet ein Docker-Volume (db_data) ein und gewährleistet so eine dauerhafte Speicherung, selbst wenn der Container gelöscht wird. Für den WordPress-Dienst binden wir ein lokales Verzeichnis (./wp_data) in den Container ein. Das bedeutet, dass alle Änderungen an den WordPress-Dateien auf unserem lokalen System im Container widergespiegelt werden.

Wir haben zwei zusätzliche Umgebungsvariablen für den WordPress-Dienst hinzugefügt – WORDPRESS_DEBUG, um das WordPress-Debugging zu aktivieren, und XDEBUG_CONFIG, um den Client-Host für Xdebug anzugeben. Der client_host ist auf host.docker.internal eingestellt. Dies ist ein spezieller DNS-Name, der zur internen IP-Adresse des Hosts weiterleitet und es Xdebug ermöglicht, mit unserer IDE auf dem Host zu kommunizieren.

Bitte beachten Sie, dass die Einstellung client_host auf Windows und macOS zugeschnitten ist. Für Linux ist eine gängige Alternative, host.docker.internal durch die tatsächliche IP-Adresse Ihrer Maschine zu ersetzen, die über den Terminal-Befehl ip addr show abgerufen werden kann.

Schritt 4: Ausführen Ihrer lokalen WordPress-Entwicklungsumgebung

Sobald Ihr Dockerfile, Ihre Xdebug-Konfigurationsdatei und Ihre Docker-Compose-Datei bereit sind, ist es an der Zeit, Ihre lokale WordPress-Entwicklungsumgebung zum Leben zu erwecken.

Navigieren Sie dazu im Terminal einfach in das Verzeichnis, das Ihre Docker-Compose-Datei enthält, und führen Sie den folgenden Befehl aus:

bash
docker-compose up -d

Dieser Befehl weist Docker an, Ihre Dienste im Hintergrund zu starten.

Nach erfolgreicher Ausführung läuft eine WordPress-Website auf Ihrer lokalen Maschine, die über http://localhost:8000 erreichbar ist. Alle Änderungen, die Sie an Ihren WordPress-PHP-Dateien vornehmen, werden nun auf dieser Website widergespiegelt und bieten eine einfache und effektive Möglichkeit, Ihre WordPress-Anwendung zu entwickeln und zu debuggen.

Zusätzlich ist auch Ihr MySQL-Dienst aktiv und über Port 3306 erreichbar. Dies stellt eine voll funktionsfähige MySQL-Datenbank für Ihre WordPress-Anwendung bereit und repliziert eine realitätsnahe Umgebung für Ihre Entwicklungsanforderungen.

Schritt 4.5: Bonus-Schritt – Hinzufügen der Datei phpinfo.php

Für diejenigen, die etwas tiefer in ihre PHP-Konfiguration eintauchen möchten, können wir eine phpinfo.php-Datei in unser Docker-Image einführen. Wenn Sie auf diese Datei zugreifen, erhalten Sie einen umfassenden Überblick über Ihre PHP-Einstellungen.
Um die Datei phpinfo.php hinzuzufügen, müssen Sie diese zunächst im selben Verzeichnis wie Ihr Dockerfile erstellen. Die Datei sollte den folgenden PHP-Code enthalten:

<?php phpinfo(); ?>

Fügen Sie als Nächstes die folgende Zeile zu Ihrem Dockerfile hinzu:

# Bonus: Copy phpinfo.php into the container
COPY phpinfo.php /var/www/html/phpinfo.php

Dieser Befehl kopiert die Datei phpinfo.php in das WordPress-Stammverzeichnis innerhalb des Docker-Images.

Um sicherzustellen, dass diese Änderungen wirksam werden, müssen Sie Ihr Docker-Image neu erstellen und die Docker-Compose-Dienste neu starten. Führen Sie die folgenden Befehle in Ihrem Terminal aus:

bash
docker-compose down
docker-compose up -d --build

Der Befehl docker-compose down stoppt und entfernt Ihre aktuellen Docker-Container. Danach erstellt docker-compose up -d –build das Docker-Image mit der neu hinzugefügten Datei phpinfo.php neu und startet Ihre WordPress- und MySQL-Dienste im Hintergrund neu.
Sie können nun auf die Datei phpinfo.php zugreifen, indem Sie in Ihrem Webbrowser zu http://localhost:8000/phpinfo.php navigieren. Hier sehen Sie eine detaillierte Seite, die Ihre PHP-Konfiguration umreißt, was eine wertvolle Ressource für das Debugging und die Überprüfung sein kann.

Schritt 5: Debugging starten

Da Sie nun Ihre lokale WordPress-Entwicklungsumgebung mit Docker, Xdebug und PhpStorm eingerichtet haben, können Sie mit dem Debuggen Ihrer WordPress-Website beginnen. Hier ist eine kurze Übersicht, wie Sie loslegen können:

  1. Xdebug in PhpStorm einrichten: Öffnen Sie PhpStorm und gehen Sie zu File → Settings (Preferences auf dem Mac) → Languages & Frameworks → PHP → Debug. Stellen Sie im Abschnitt Xdebug sicher, dass der Debug port auf 9003 eingestellt ist und die Option Can accept external connections aktiviert ist.
  2. Einen PhpStorm-Server hinzufügen: Navigieren Sie zu PHP → Servers. Fügen Sie einen neuen Server mit dem Namen wordpress und dem Host localhost hinzu. Stellen Sie den Port auf 8000 ein. Stellen Sie sicher, dass die Pfadzuordnungen korrekt eingestellt sind – der absolute Pfad auf dem Server für den Ordner wp_data sollte /var/www/html sein.
  3. Die Xdebug-Helper-Erweiterung installieren: Installieren Sie die Xdebug-Helper-Erweiterung für Google Chrome. Klicken Sie nach der Installation auf das Käfer-Symbol und setzen Sie den IDE-Key auf PHPSTORM.
  4. Auf PHP-Debug-Verbindungen lauschen: Klicken Sie in PhpStorm auf das Käfer-Symbol in der oberen rechten Ecke, um auf PHP-Debug-Verbindungen zu lauschen.
  5. Debugging starten: Nachdem Sie die vorherigen Schritte abgeschlossen haben, sind Sie bereit, mit dem Debuggen Ihrer WordPress-Anwendung zu beginnen. Setzen Sie einfach Ihre Breakpoints in PhpStorm nach Bedarf und laden Sie dann Ihre Website neu. Frohes Debuggen!

Fazit

Zum Abschluss dieses Tutorials hoffe ich, dass es für Sie zu einer ebenso wertvollen Ressource wird, wie es für mich auf meiner Reise war. Die Möglichkeit, dieses Setup anzupassen – wie wir es durch Hinzufügen der Datei phpinfo.php getan haben – eröffnet unzählige Möglichkeiten und macht unseren Entwicklungsprozess robuster und effizienter. Der gesamte Code ist in diesem GitHub-Repository verfügbar. Zögern Sie nicht, ihn abzurufen, auszuprobieren und Verbesserungen vorzuschlagen!

Ich persönlich verwende ein Ubuntu-Betriebssystem, aber das Schöne an diesem Setup ist, dass es dank Docker keine Rolle spielt! Da Docker auf jedem Betriebssystem gleichermaßen ausgeführt werden kann, ist die Einrichtung und Nutzung dieselbe, egal ob Sie macOS, Windows oder Linux bevorzugen!

Vielen Dank, dass Sie mich bei diesem Walkthrough begleitet haben. Ich hoffe, von Ihnen über Ihre Erfahrungen oder Vorschläge zur weiteren Verbesserung dieses Setups zu hören. Denken Sie daran: Wachstum lebt von geteiltem Wissen und dem Geist der Zusammenarbeit.

Viel Spaß beim Programmieren, und lassen Sie uns weiterhin gemeinsam großartige WordPress-Erlebnisse schaffen!

Fanden Sie das nützlich? Teilen Sie diesen Artikel:

Das könnte Ihnen auch gefallen