
IDE- und Linux-Konfiguration mit PHP und Drupal
Projekte, die von Droptica umgesetzt werden, erfordern oft eine große Menge an PHP-Programmierung. Die Nutzung verschiedener Werkzeuge und Konfigurationen ermöglicht es uns, den Prozess zu optimieren und ihn wesentlich komfortabler und angenehmer zu gestalten. In diesem Beitrag möchten wir unsere Erfahrungen teilen und eine ideale Softwarekonfiguration für das Programmieren in PHP beschreiben (hauptsächlich in Drupal, da wir eine Drupal-Agentur sind). Die Basisoftware, die wir verwenden, umfasst Linux (die meisten nutzen Ubuntu) und PHPStorm als IDE. Wir verwenden auch Docker, um Dienste wie Apache, MySQL, Solr usw. einzurichten und auszuführen.
Docker statt lokal installiertem Apache und PHP
Viele Webentwickler ziehen es vor, einen vollständigen LAMP-Stack auf ihrem lokalen Server zu installieren, mit Apache/MySQL und PHP auf Linux. Dies ist keine schlechte Lösung, aber eine solche lokale Installation wird immer von der Serverumgebung des Kunden abweichen. Und je mehr Unterschiede in diesem Fall bestehen, desto mehr Arbeit und potenzielle Konflikte werden Sie vorfinden, zusammen mit den „Funktioniert bei mir“-Antworten. :-)
Docker bietet eine gute Lösung für dieses Problem, da es Ihnen ermöglicht, identische Serverkonfigurationen sowohl in Entwicklungs- als auch in Produktionsumgebungen zu betreiben. Der entscheidende Vorteil von Docker ist jedoch die Tatsache, dass der Entwickler nicht mehr alle .conf- und .ini-Dateien manuell konfigurieren muss. Dank Docker können Sie sich auf das Programmieren konzentrieren und alle Serverangelegenheiten den Experten überlassen.
Bei Droptica verwenden wir eine maßgeschneiderte Software namens docker-console, die es unseren Entwicklern ermöglicht, schnell ein neues oder bestehendes Projekt in Drupal zu starten. Werkzeuge wie Composer, Drush, Sass/Compass befinden sich in ihren Containern und funktionieren, ohne dass sie lokal auf der Entwicklungsmaschine installiert werden müssen. Normalerweise stehen ihnen auch eine Reihe von Werkzeugen zur Verfügung, die das Debuggen erleichtern. Eines dieser Werkzeuge ist Mailcatcher, das alle von Drupal gesendeten E-Mails abfängt.
Nginx-Proxy für Docker
Das nginx-Proxy-Image für Docker ermöglicht die Verwendung von Hosts (lokalen Domains), um Websites, die auf Docker laufen, in einem Webbrowser anzuzeigen. Kurz gesagt, dank des nginx-Proxys können wir anstelle einer IP-Adresse (zum Beispiel: "172.17.0.4") http://www.droptica.local eingeben. Der nginx-Proxy ist sehr nützlich, wenn wir eine Drupal-Multisite betreiben und mehrere Domains unter der IP-Adresse eines einzigen Containers vorhanden sind (z.B. sites/droptica.com, sites/droptica.pl).
Installation des nginx-Proxys:
1. Vor der Installation stellen Sie sicher, dass alle vorhandenen Versionen des nginx-Proxys entfernt werden. Abhängig vom Namen sieht das mehr oder weniger so aus:
docker stop ngnix-proxy && docker rm ngnix-proxy
2. Klonen Sie das Repository: https://github.com/droptica/nginx-proxy
3. Wechseln Sie in das Repository-Verzeichnis und führen Sie es mit dem Befehl aus:
docker-compose up -d
4. Überprüfen Sie die IP des nginx, falls sich die Adresse geändert hat, ändern Sie sie in der /etc/hosts-Datei:
docker inspect --format "{{ .NetworkSettings.IPAddress }}" nginx-proxy
5. Wenn Sie https für eine xxx.local-Domain hinzufügen möchten, kopieren Sie die Dateien default.crt und default.key in xxx.local.crt und xxx.local.key. Möglicherweise müssen Sie chmod 777 darauf ausführen und dann den nginx-Container neu starten:
sudo chmod 777 -Rf certs && docker-compose restart
6. Fügen Sie den für https verantwortlichen Code in die Konfigurationsdatei ein (Beispiel für die xxx.local-Domain):
if (strpos($_SERVER['SERVER_NAME'], 'xxx') !== FALSE) {
$base_url = 'https://'.$_SERVER['SERVER_NAME'];
$conf['https'] = TRUE;
}
7. Wenn die Maschine etwas auf Port 80 (apache/nginx) ausführt, kommentieren Sie die folgenden Zeilen in der docker-compose.yml-Datei aus:
ports:
- 80:80
- 443:443
8. Docker Compose Version 2 und höher mit nginx-proxy. In neueren Versionen als 1 setzt docker-compose ein privates Netzwerk für die Container, weshalb nginx-proxy standardmäßig keine Verbindung dazu herstellen kann. Um es zum Laufen zu bringen, müssen Sie das Netzwerk herausfinden und manuell hinzufügen.
# Netzwerke auflisten
docker network ls
# Verbinden Sie nginx_proxy mit Ihrem Netzwerk
docker connect you_network_name nginx_proxy
PHP CodeSniffer
PHP CodeSniffer ist ein sehr nützliches Tool, das Ihnen hilft, einen klaren Codebestand zu pflegen, der den Standards entspricht. Wie Sie in der Readme-Datei lesen können, besteht CodeSniffer aus zwei Skripten. Eines wird verwendet, um Verstöße gegen einen definierten Kodierungsstandard zu erkennen (phpcs), und das andere, um Kodierungsstandardverstöße automatisch zu korrigieren (phpcbf).
PHPStorm erlaubt Ihnen jedoch nur die Verwendung des ersten (phpcs). Nach der Konfiguration werden alle Zeilen, die gegen den Standard verstoßen, in der aktuellen Datei hervorgehoben.
Um PHP CS verwenden zu können, müssen Sie es zuerst installieren, zum Beispiel mit Composer oder auf eine andere Weise, die in der README-Datei des Projekts beschrieben ist.
Zum Beispiel:
composer global require "squizlabs/php_codesniffer=*"
Wenn Sie den Pfad $HOME/.composer/vendor/bin nicht zu Ihrer $PATH-Variable hinzugefügt haben, sollten Sie dies nun tun. Um dies zu tun, fügen Sie im Falle von Linux die folgende Zeile am Ende der ~/.bashrc-Datei hinzu:
export PATH="$PATH:$HOME/.composer/vendor/bin"
Der Composer-Pfad kann je nach Ihrer Linux-Distribution leicht unterschiedlich sein (~/.config/composer für Ubuntu 18.04). Um die Änderungen zu übernehmen, melden Sie sich ab und wieder an oder führen Sie den folgenden Befehl aus:
source ~/.bashrc
Ein weiterer Schritt ist das Hinzufügen der Drupal-Kodierungsstandards zu PHP CS. Installieren Sie einfach das Coder-Modul.
Der einfachste Weg dies zu tun, ist mit Composer:
composer global require drupal/coder
Die detaillierten Installationsanweisungen finden Sie hier: https://www.drupal.org/node/1419988
Bevor Sie zum nächsten Schritt übergehen, stellen Sie sicher, dass im System keine zweite Instanz von PHP CS installiert ist, indem Sie den folgenden Befehl ausführen:
whereis phpcs
Es sollte eine Ausgabe zurückgeben, die der unten stehenden ähnlich ist:
phpcs: /home/<username>/.composer/vendor/bin/phpcs
Wenn der Befehl mehr Standorte zurückgibt, sollten Sie die nicht benötigten Versionen entfernen, so dass nur eine auf Ihrer Maschine verbleibt.
Dann registrieren Sie die Drupal-Standards aus dem Coder-Modul:
phpcs --config-set installed_paths ~/.composer/vendor/drupal/coder/coder_sniffer
Nach der Installation von PHP CS und Coder im System können Sie mit der Konfiguration von PHPStorm fortfahren:
Einstellungen → Sprachen & Frameworks → PHP → Qualitätswerkzeuge → Code Sniffer
Im Abschnitt „Entwicklungsumgebung“ klicken Sie auf die drei Punkte neben der Option „Konfiguration“.
Im Code-Sniffer-Fenster geben Sie den Pfad zum phpcs-Skript (den, den der Befehl whereis phpcs zurückgegeben hat) im Feld „PHP Code Sniffer (phpcs) path“ für die „Local“-Konfiguration an.
Nachdem Sie den Pfad eingegeben haben, klicken Sie auf Validieren, um sicherzustellen, dass PHP CS ordnungsgemäß funktioniert. Wenn alles funktioniert, sollten Sie die folgende Nachricht auf einem grünen Hintergrund sehen:
Schalten Sie dann die Code-Inspektion durch Code Sniffer an. Sie können dies tun, indem Sie zu den Einstellungen gehen:
Einstellungen → Editor → Inspektionen
Wählen Sie PHP → Qualitätswerkzeuge aus der Liste der Sprachen und schalten Sie dann die PHP Code Sniffer-Validierung ein. Nachdem Sie das Kästchen aktiviert haben, aktualisieren Sie die Liste der verfügbaren Kodierungsstandards und wählen Sie dann Kodierungsstandard → Drupal.
Nach der Anwendung der Einstellungen können Sie eine PHP-Datei öffnen und überprüfen, wie Code Sniffer funktioniert.
Xdebug (funktioniert bei jedem Projekt)
XDebug ermöglicht das Debuggen von in PHP entwickelten Webanwendungen im „klassischen“ Stil, unter Verwendung von Breakpoints und dem zeilenweisen Durchführen von Code. XDebug ist vollständig kompatibel mit PHPStorm und das Verbinden der IDE mit dem Debugger ist sehr simpel.
Unabhängig davon, ob Sie docker verwenden oder die gesamte Umgebung selbst einrichten, sollte XDebug Informationen über die Skripte auf Port 9000 senden. Damit PHPStorm diesen Port abhört, klicken Sie auf „Run → Start listening for PHP Debug Connections”. Nach dem Aktualisieren der zu debuggenden Seite im Editor öffnet sich ein Fenster, das bestätigt, dass die Verbindung mit XDebug erfolgreich hergestellt wurde. Manchmal kann es notwendig sein, das Verzeichnis-Mapping zwischen dem Webroot des Servers und dem Projektverzeichnis in PhpStorm anzupassen.
Falls die Verbindung nicht ordnungsgemäß hergestellt wurde, stellen Sie zuerst sicher, dass XDebug überhaupt funktioniert (indem Sie php --version oder phpinfo() ausführen). Überprüfen Sie dann, ob Sie Lesezeichen (speziell vorbereitete Links, die zu Lesezeichen hinzugefügt werden) benötigen, um das Debuggen zu aktivieren. Sie finden sie unter https://www.jetbrains.com/phpstorm/marklets/
Ein sehr gutes und ausführliches Handbuch zur Verbindung von XDebug und PHPStorm finden Sie hier:
XDebug-Plugin für Chrome/Firefox
Es gibt viele Plugins, einfach installieren, für eine gegebene Seite aktivieren und die Möglichkeiten genießen, die XDebug bietet.
Einige Beispiele:
- Firefox: https://addons.mozilla.org/en-US/firefox/addon/xdebug-helper-for-firefox/
- Chrome: https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc
MySQL Workbench
Ein Software-Tool zur Verwaltung von MySQL-Datenbanken. Es ermöglicht Ihnen den Import und Export von Datenbanken, das Anzeigen von Tabellen sowie die Abfrage von Datenbanken, unabhängig davon, ob sie lokal, in Docker oder remote über SSH sind. Es gibt keine Beschränkungen hinsichtlich der Größe einer importierten Datenbank (im Vergleich zur Standardkonfiguration von PHPMyAdmin).
Die Pakete können unter https://dev.mysql.com/downloads/workbench/ heruntergeladen werden, nach dem Download einfach installieren.
Chrome-Plugin zur JS-Debugging
Das Add-on ist nur für Chrome verfügbar:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji
Codeformatierung in PHPStorm:
Drupal hat sehr spezifische Codeformatierungsstandards. Zu den wichtigsten Dingen, die Sie beachten sollten, gehören der Einzug von zwei Leerzeichen sowie die Tatsache, dass else/elseif/catch/while immer in einer neuen Zeile stehen sollten. PHPStorm ist von Haus aus mit Drupal kompatibel.
Gehen Sie einfach zu Einstellungen → Editor → Code Style → PHP und wählen Sie Set From → Predefined Style → Drupal. Vergessen Sie nicht die Formatierungseinstellungen für CSS, JS, SASS/LESS.
Zusätzliche PHPStorm-Konfiguration
Nachfolgend finden Sie einige zusätzliche PHPStorm-Konfigurationsoptionen, die Ihre Arbeit ebenfalls erleichtern, indem sie Ihren Code automatisch nach den akzeptierten Standards formatieren:
Automatisches Hinzufügen einer leeren Zeile am Ende der Datei beim Speichern:
Einstellungen → Editor → Allgemein, wählen Sie Zeilenumbruch am Dateiende beim Speichern sicherstellen
Automatisches Entfernen von Leerzeichen am Ende der Zeilen beim Speichern der Datei.
Einstellungen → Editor → Allgemein, ändern Sie Führende Leerzeichen beim Speichern entfernen, wählen Sie 'Alle'.
Sie können auch 'Geänderte Zeilen' wählen, wenn Sie nicht möchten, dass Leerzeichen an anderen Stellen im Code entfernt werden, die nicht geändert wurden. Automatisches Formatieren des Codes nach Eingabe der schließenden geschweiften Klammer.
Einstellungen → Editor → Allgemein → Smart Keys, wählen Sie Block beim Tippen von '}' neu formatieren
Zusammenfassung
Der obige Artikel enthält unsere aktuellen Empfehlungen. Sie unterscheiden sich jetzt von dem, was wir vor einem oder zwei Jahren empfohlen haben, und sie werden wahrscheinlich in Zukunft anders sein – die Konfiguration wird noch besser. :)
Gibt es etwas, das Ihrer Meinung nach verbessert werden sollte? Vielleicht haben Sie Ihre eigene Art, Ihre Entwicklungsumgebung zu konfigurieren? Teilen Sie Ihre Einsichten und Ideen in den Kommentaren!