Wir bauen derzeit an Tipino – eine Plattform für Fairtrade im Musik-Streaming.
Musikhörende können weiterhin ihre favorisierten Streaming-Abos verwenden wie Spotify, YouTube Music, Apple Music etc aber mit Tipino dafür sorgen, dass die Artists, die sie mögen, fair bezahlt werden.
Fun Fact: ca. CHF 1.50 von jedem Streaming-Abo geht wirklich zu den Artists. Recht wenig.
Entwicklungsumgebung für WordPress-Plugin
Anyway: dafür haben wir eine Website mit WordPress (und Elementor) und unser Tipino-System, das sich als Plugin einklinkt. Zwei Personen und später vielleicht mehr werden daran arbeiten.
Git / GitHub
Das heisst: wir brauchen ein System, das unsere Änderungen am Code organisiert.
In dem meisten Fällen dient dafür etwas wie Git / GitHub. Dort ist nun also unser «Remote Repository» drin. Alle Beteiligten können ihre Branches machen für ihre laufenden Änderungen oder einzelne Features, an denen sie arbeiten. Wenn sie fertig sind, können sie diese Änderungen mit dem «Haupt-Ast» kombinieren.
Soweit, so gut…
Lokale Entwicklungsumgebung in Docker
Jetzt ist es natürlich etwas mühsam, Änderungen immer per SFTP auf den Webserver hochladen zu müssen, um zu sehen, ob sie funktionieren. Das bremst den Prozess aus.
Wir brauchen also je ein lokal laufendes WordPress (= PHP-Dateien, lokaler Webserver und MySQL-Datenbank). Und wir brauchen Einblick in diese Datenbank – zum Beispiel mit dem Web-Tool pypMyAdmin.
Dabei hilft Docker, indem du deine gewünschten Module als Container definieren kannst.
Danilo von Threema und Coredump hat mir geholfen, die letzten Probleme auszumerzen – danke!
In Docker kannst du das ausführen und «ZACK!» hast du ein lokal laufendes WordPress und kannst an dem Plugin arbeiten, Änderungen in GitHub laden und ohne SFTP oder sonstige Transfers sofort deine Anpassungen testen kannst.
«Zack!» im Sinne von: Erstmal auf http://localhost die WordPress-Installation durchführen. Das sind aber wenige Klicks, Sprache und Passwort wählen und fertig.
Für mein zukünftiges Ich und vielleicht auch für dich, notiere ich hier, wie ich das gemacht hab.
Was du erstmal brauchst
Für die Schritte in diesem Artikel verwende ich folgende Tools:
- Visual Studio Code
- Docker Desktop
- Docker-Erweiterungen für Visual Studio Code (siehe Screenshot weiter unten)
- GitHub + GitHub Desktop (aber darauf gehe ich hier nicht ein)
Docker Compose File
In dieser Datei definierst du, welche Module zu in deinem Container brauchst. Die Datei heisst bei mit «docker-compose.yml» und sitzt in meinem Projekt-Verzeichnis auf meinem Rechner:
In diesem File definiere ich 3 Dienste:
- WordPress (inkl. gewünschter Version)
- MySQL (inkl. Version)
- pypMyAdmin
Das sieht bei mir so aus:
docker-compose.yml
services:
wordpress:
depends_on:
- database
image: wordpress
ports:
- 80:80
environment:
WORDPRESS_DB_HOST: 'database'
WORDPRESS_DB_NAME: 'myfreakydbname'
WORDPRESS_DB_USER: 'dockersam'
WORDPRESS_DB_PASSWORD: 'whatever'
volumes:
- ./wp-content:/var/www/html/wp-content
- ./php_data:/var/www/html
database:
image: mysql:latest
ports:
- 3306:3306
environment:
MYSQL_ROOT_PASSWORD: 'changerootpassword'
MYSQL_DATABASE: 'myfreakydbname'
MYSQL_USER: 'dockersam'
MYSQL_PASSWORD: 'whatever'
volumes:
- mysql-data:/var/lib/mysql
phpmyadmin:
image: phpmyadmin
restart: always
ports:
- 8081:80
depends_on:
- database
environment:
PMA_HOST: database
MYSQL_ROOT_PASSWORD: changerootpassword
UPLOAD_LIMIT: 600M
volumes:
mysql-data:
php_data:Notizen dazu:
- die «Volumes» im Abschnitt WordPress «mounten» 2 Verzeichnisse in meinem Projekt-Ordner.
- Im «wp-content» Ordner werde ich arbeiten (am Plugin)
- im «php_data» Ordner muss ich nur gewisse Änderungen machen an «wp-config.php» um die MAX_UPLOAD_FILE_SIZE zu erhöhen (bin nicht sicher, ob ich mehr als 2 MB pro File brauche).
- die «Volumes» zuunterst sorgen dafür, dass die Daten zwischen 2 Sessions bestehen bleiben
- im Modul «phpMyAdmin» muss ich UPLOAD_LIMIT erhöhen, weil ich eine bestehende Datenbank importieren will, um weiter daran zu arbeiten.
- bei Settings zu «Ports» sagt die erste Zahl, auf welchem Port der Dienst zu finden ist. WordPress wird also auf http://localhost zu finden sein (Port 80) und phpMyAdmin auf http://localhost:8081
Wahrscheinlich könnte ich hier noch etwas optimieren – gerne Tipps in die Kommentare schreiben 🙂
Docker-Container starten
Ich habe Docker Desktop installiert und in meinem Visual Studio Code auch Docker-Erweiterungen drin. Damit kann ich recht bequem, wenn ich im «docker-compose.yml» File drin bin in VSC mit Rechtsklick + «Compose Up» den Docker Container starten.
So geht das:
(links siehst du auch die Docker-Erweiterungen für Visual Studio Code)
Danach siehst du sowas in deinem Docker Desktop:
Der Container «tipino-docker» mit den 3 Services «database», «wordpress» und «phpmyadmin» laufen also.
WordPress transferieren
Da ich von einem bestehenden WordPress eine Kopie ziehe, muss ich nun beim bestehenden WordPress (im dortigen pypMyAdmin) ein Export machen. Dabei braucht es bestimmte Settings:
MySQL Export
Dazu auf die Datenbank gehen in phpMyAdmin und oben auf Export. Dort dann auf «Custom Export»:
…weil wir wohl einen anderen Datenbank-Namen haben bei und im docker-compose.yml File. Klicke also in den Custom Export Settings auf «Rename exported databases/tables/columns». Folgendes Popup öffnet – darin den neuen DB-Namen aus docker-compose.yml im rechten Feld eintragen bei «new database name»:
Du erhältst ein .sql File das du später in deinem lokalen phpMyAdmin importieren kannst.
Weitere Notizen zur Migration der WordPress-Datenbank
Natürlich sind nach einer solchen Migration der Datenbank noch etliche Werte in der Datenbank passend zum bisherigen System. Also falsch für dein lokales System.
Am Wichtigsten sind die zwei Haupt-URLs in wp_options.
Du musst also erstmal in phpMyAdmin rein und in die Tabelle «wp_options» und dort die Werte für «home» und «siteurl» ändern – in meinem obigen Beispiel auf «http://localhost«.
Sonst landest du bei jedem Klick wieder auf der ursprünglichen URL deiner Dev-Umgebung.
Achtung: dein Browser wird vielleicht noch umleiten zu deiner ursprünglichen Dev-Umgebung, obwohl du diese URLs geändert hast. Rufe dazu eine Seite auf, die du lokal noch nicht aufgerufen hast – wie zB http://localhost/wp-login.php – das bringt deinen Browser dazu, sich zu hinterfragen. Danach sollte das Problem behoben sein.
Dein lokales WordPress sollte nun funktionieren. Gelegentlich erscheinen in meinem Fall Fehlermeldungen, dass etwas nicht geklappt hat. Meist hat es dann dennoch geklappt.
