Entwickeln mit Docker

Die Entwicklung für den Gutenberg-Editor unterscheidet sich grundsätzlich von der herkömmlichen Entwicklung für WordPress, denn dieser setzt auf moderne Technologien wie JavaScript, Node.js, React und REST API. Also braucht es eine Entwicklungs-Umgebung, welche mit all diesen Javascript-Erweiterungen umgehen kann, und diese gegebenenfalls in die Sprachversion ES5 transformieren kann, denn die meisten Browser verstehen nur diese. Mit Docker kann man dies tun, hier beschreibe ich mein Setting.

Wie eine Entwicklungsumgebung für WordPress per wp-env unter Windows aufgesetzt werden kann, ist in unserem Blogbeitrag Lokale WordPress-Umgebung mit wp-env beschrieben.

1 Docker einrichten

1.1 Docker herunterladen

Docker-Desktop ist eine Open Source-Software, welche Linux-Container erstellen und ausführen kann. Die Software kann hier heruntergeladen werden.

1.2. Container erstellen

Um einen ersten – oder neuen – Container zu anzulegen, erstellst du zuerst ein Verzeichnis. Wo du dieses erstellst und wie dieses heisst, ist Docker egal. Nennen wir es mal my_wordpress.

mkdir my_wordpress 

Damit Docker weiss, was zu tun ist – z. B. eine WordPress-Instanz zu erstellen, benötigt es eine Datei mit dem Namen docker-compose.yml, die bequem gerade aus dem Terminal erstellt werden kann:

cd my_wordpress
touch docker-compose.yml

In dieser Datei wird die Konfiguration der WordPress-Instanz festgelegt, aber auch, welche Verzeichnisse als Volumes vorhanden sein sollen. Im Folgenden der Inhalt unserer docker-compose.yml Datei:

version: '3'

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:5.7-php7.3-apache
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    working_dir: /var/www/html
    volumes:
      - ./wp-content:/var/www/html/wp-content
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
volumes:
  db_data:

Unser aktuelles docker-compose.yml File findest du hier.

In Docker ist es möglich anzugeben, welche Dateien quasi versteckt im Container angelegt werden und welche offen im Dateisytem. Dies beschreibt man im docker-compose.yml File unter volumes

1.3 Container starten und beenden

Nun kann der Docker-Container gestartet werden. Dies geschieht mit dem folgendem Befehl:

// Docker starten
docker-compose up -d 
// Docker beenden
docker-compose down

Im Verzeichnis my_wordpress sind nun zwei Neulinge dazugekommen:

• uploads.ini
• wp-content

Was es mit der uploads.ini Datei auf sich hat, erkläre ich vielleicht ein andermal. Docker ist nun soweit eingerichtet, dass man mir der Entwicklung beginnen kann.

2. Homebrew, Node.js und nginx

Damit die WordPress-Instanz im Browser aufgerufen werden kann, muss ein Webserver installiert sein. Dafür kann nginx zum Einsatz kommen. nginx installiert man bequemerweise mit Homebrew:

// Homebrew installieren, falls noch nicht vorhanden
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

// Homebrew wenn nötig aktualisieren
$ brew update 

// Mit Homebrew nginx installieren
$ brew install nginx

Nun ist nginx verfügbar und die WordPress-Instanz ist unter http://localhost:8000 abrufbar.

Bevor Du loslegen kannst, solltest Du dich vergewissern, dass du Node.js und npx (den Node Package Manager) installiert hast. Hier gehts zum Download.

Wie die eigentliche Entwicklung eines Blocks gemacht werden kann, haben wir hier beschrieben.