Haben Sie schon einmal einen Tag damit vergeudet, einen lokalen WordPress-Stack aufzusetzen, der sich dann doch anders verhält als Ihr Produktionsserver? XAMPP, Docker, virtuelle Maschinen: Jede Option versagt im ungünstigsten Moment. Die PHP-Version ist falsch, eine Erweiterung fehlt oder der Kunde öffnet eine Seite und sieht einen weißen Bildschirm, der Ihnen lokal nie begegnet ist.

Visual Studio Code kann sich per SSH mit einem entfernten Server verbinden, so einfach, wie Sie einen Ordner auf Ihrem Laptop öffnen. Keine Zauberei: Ihr Code gelangt direkt auf eine Amazon-EC2-Instanz, auf der bereits ein vollständiger Webserver mit WordPress läuft.

Nachfolgend eine Schritt-für-Schritt-Anleitung für die Einrichtung von VS Code + AWS EC2 für die WordPress-Plugin- und Theme-Entwicklung. Vom Anlegen eines Linux-Benutzers bis zum Speichern Ihres Workspace, lückenlos und mit Erläuterung jedes Schritts.

💡 Kurzüberblick:

• Einen sudo-Benutzer auf einem Ubuntu-Server anlegen und SSH-Schlüssel konfigurieren
• Ihren Windows-Client vorbereiten: OpenSSH, Konfigurationsdatei und privater Schlüssel
• VS Code per Remote-SSH mit dem Server verbinden und Ihren WordPress-Ordner öffnen
• Den Workspace für schnellen Zugriff auf Ihr Projekt speichern

Voraussetzungen

Bevor Sie die Remote-Entwicklung einrichten, stellen Sie sicher, dass die Serverseite bereit ist. Ich gehe davon aus, dass Sie Windows 10 oder neuer nutzen und gerade erst beginnen, sich mit Cloud-Infrastruktur vertraut zu machen. Überspringen Sie die Schritte, die Sie bereits erledigt haben.

Amazon-EC2-Instanz mit Ubuntu und OpenLiteSpeed

Wir verwenden ein Amazon Machine Image auf Ubuntu-Basis mit dem OpenLiteSpeed-Webserver und einem vollständigen, für WordPress optimierten LAMP-Stack. Falls Sie den Server noch nicht eingerichtet haben: Die Mindestanforderungen sind Ubuntu 20.04 oder 22.04 LTS und mindestens 2 GB RAM. Mit weniger als 2 GB stürzen Composer und wp-cli bei mittelgroßen Projekten mit Speicherfehlern ab.

Linux-Benutzer mit sudo

Root-Zugriff ist für die tägliche Arbeit unnötig und gefährlich. Legen Sie einen regulären Benutzer mit sudo-Berechtigungen an. DigitalOcean erklärt den Vorgang in deren Anleitung. Kurz gesagt, zwei Befehle von root aus oder mit dem Präfix sudo:

1
adduser example

Geben Sie das Passwort zweimal ein; bei den übrigen Abfragen können Sie einfach die Eingabetaste drücken. Fügen Sie den Benutzer anschließend zur sudo-Gruppe hinzu:

1
usermod -aG sudo example

SSH-Schlüsselpaar

Der SSH-Zugang basiert auf einem Schlüsselpaar. Der private Schlüssel (eine Datei ohne Erweiterung oder mit .pem) wird auf Ihrem Windows-Rechner gespeichert. Der öffentliche Schlüssel (eine .pub-Datei) wird auf dem Server in der Liste der autorisierten Schlüssel hinterlegt. Erzeugen wir ein Paar direkt auf dem Server:

1
su - example
2
mkdir .ssh
3
chmod 700 .ssh
4
touch .ssh/authorized_keys
5
chmod 600 .ssh/authorized_keys
6
ssh-keygen

Wenn ssh-keygen Sie zur Eingabe auffordert, drücken Sie dreimal die Eingabetaste (lassen Sie die Passphrase leer; in unserem Szenario wird sie nicht benötigt). Fügen Sie nun den öffentlichen Schlüssel zur autorisierten Liste hinzu und zeigen Sie den privaten Schlüssel auf dem Bildschirm an:

1
cat .ssh/id_rsa.pub >> .ssh/authorized_keys
2
cat .ssh/id_rsa

Sie sehen einen Block wie diesen:

1
-----BEGIN RSA PRIVATE KEY-----
2
...
3
-----END RSA PRIVATE KEY-----

Kopieren Sie den gesamten Inhalt (einschließlich der Begrenzungszeilen) und speichern Sie ihn als Textdatei auf Ihrem Computer. Der Pfad könnte so aussehen:

1
C:\Users\Example\.ssh\aws-example-user.pem

Der Dateiname ist beliebig. Erstellen Sie den Ordner .ssh innerhalb Ihres Windows-Profils, am selben Ort wie die Konfigurationsdatei aus dem nächsten Schritt.

SSH-Konfigurationsdatei für Visual Studio Code

VS Code liest Verbindungseinstellungen aus der standardmäßigen SSH-Konfiguration. Erstellen Sie eine Textdatei namens config ohne Erweiterung im Ordner C:\Users\Example\.ssh\ mit folgendem Inhalt (Details zum Format siehe man ssh_config):

1
Host aws-ec2
2
    HostName your-server-ip-or-domain.com
3
    User example
4
    IdentityFile C:\Users\Example\.ssh\aws-example-user.pem

Erläuterung der Direktiven:

• Host: ein frei wählbarer Name, der in VS Code angezeigt wird (Fenstertitel und Verbindungsindikator unten links);
• HostName: die IP-Adresse oder Domain Ihrer EC2-Instanz;
• User: der oben angelegte Ubuntu-Benutzername;
• IdentityFile: der absolute Pfad zum privaten Schlüssel auf Ihrem Windows-Rechner.

OpenSSH-Client unter Windows

Windows 10 und 11 enthalten einen integrierten SSH-Client, der jedoch standardmäßig deaktiviert sein kann. Öffnen Sie Einstellungen → Apps → Optionale Features → Feature hinzufügen. Suchen Sie OpenSSH-Client in der Liste und klicken Sie auf Installieren.

Visual Studio Code und die Remote Development-Erweiterung

VS Code herunterladen: entweder die stabile Version (blaues Symbol) oder die Insiders-Edition (grünes Symbol, häufigere Updates). Für die Remote-Entwicklung besteht kein Unterschied.

Fügen Sie direkt nach der Installation das Remote Development-Erweiterungspaket von Microsoft hinzu. Das Paket enthält drei Erweiterungen. Zwei davon (Remote, Containers und WSL) können deaktiviert werden; sie werden für unsere Aufgabe nicht benötigt. Behalten Sie nur Remote, SSH.

Remote-Entwicklung einrichten

Verbindung zum Server herstellen

• Drücken Sie F1 oder klicken Sie auf die dunkelorange Schaltfläche in der unteren linken Ecke des Fensters.
• Beginnen Sie mit der Eingabe von Remote-SSH; der Autovervollständigungsvorschlag Remote-SSH: Connect to Host… erscheint. Wählen Sie ihn aus und drücken Sie Enter.
• Wählen Sie aus der Dropdown-Liste den Namen, den Sie in der Host-Direktive Ihrer Konfigurationsdatei angegeben haben, zum Beispiel SSH: aws-ec2. VS Code bezieht die Liste der Hosts direkt aus Ihrer config.
• Fertig, Sie sind verbunden. Ein neues Fenster öffnet sich; das alte können Sie schließen.

Die Verbindung ist schnell und der Editor fühlt sich reaktionsschnell an, da nur Datei-Diffs über das Netzwerk gesendet werden, nicht die gesamte Benutzeroberfläche.

Arbeitsbereich anlegen

• Öffnen Sie Datei → Ordner öffnen… (oder drücken Sie Ctrl+K, dann Ctrl+O; bitte nacheinander, nicht gleichzeitig).
• Navigieren Sie im erscheinenden Dateibrowser zum WordPress-Root, beispielsweise /var/www/example.com/. Sie können den Pfad auch manuell einfügen und mit OK bestätigen.

Sämtliche WordPress-Dateien erscheinen nun im Explorer-Bereich auf der linken Seite. Möchten Sie dem Arbeitsbereich weitere Server-Ordner hinzufügen (etwa das Verzeichnis eines anderen Plugins oder Themes), nutzen Sie Datei → Ordner zum Arbeitsbereich hinzufügen….

Speichern Sie diese Ansicht nun als Arbeitsbereich, damit Sie mit einem Klick zum Projekt zurückkehren können:

• Drücken Sie F1, beginnen Sie mit der Eingabe save work und wählen Sie Arbeitsbereiche: Arbeitsbereich speichern unter….
• Speichern Sie die Datei unter dem Namen wp.code-workspace an einem geeigneten Ort auf dem Server (die Endung .code-workspace wird automatisch ergänzt).
• Schließen und öffnen Sie VS Code erneut; der Arbeitsbereich erscheint unter Datei → Zuletzt verwendet oder wird automatisch geladen, sofern er der zuletzt geöffnete war.

Zwischen mehreren Arbeitsbereichen wechseln Sie über F1 → open work → Auswahl aus der Liste.

Symbolischer Link (optional)

Wenn Sie ein bestimmtes Plugin entwickeln, ist es praktisch, dessen Quelldateien im Home-Verzeichnis des Benutzers abzulegen und per Symlink in WordPress einzubinden:

1
ln -s /home/example/wp /var/www/dev.example.com/wp-content/plugins/my-plugin

Der linke Pfad bezeichnet das eigentliche Projektverzeichnis, der rechte Pfad den symbolischen Link innerhalb von wp-content/plugins. Auf diese Weise wird der Plugin-Code vom WordPress-Core getrennt und die Versionsverwaltung vereinfacht.

⁉️🤔 Häufig gestellte Fragen

Muss ich Amazon EC2 verwenden, oder funktioniert auch ein anderer VPS?

Jeder Server mit Ubuntu und SSH-Zugang funktioniert. DigitalOcean, Linode, Vultr, Hetzner: Der Einrichtungsprozess ist identisch. Die einzige Voraussetzung sind mindestens 2 GB RAM für komfortable WordPress-Entwicklung mit Debugging. Dieser Ansatz funktioniert nicht auf Shared Hosting; Sie benötigen Root-Zugriff oder sudo. VS Code Remote SSH ist nicht an einen bestimmten Cloud-Anbieter gebunden: Sie können sich mit jeder Maschine verbinden, auf der sshd läuft, sogar mit einem Raspberry Pi in Ihrem lokalen Netzwerk. Der einzige Unterschied ist die Latenz; je näher das Rechenzentrum, desto reaktionsschneller der Editor.

Muss ich für Traffic bezahlen, wenn ich über VS Code Remote SSH arbeite?

Der Traffic ist minimal. VS Code überträgt über SSH nur Dateiänderungen und Terminalbefehle; keine UI-Pixel oder Erweiterungs-Binärdateien werden hin- und hergeschickt. Ein typischer Entwicklungstag bleibt im Bereich von einigen zehn Megabyte. Erweiterungen (einschließlich Remote-SSH selbst) werden beim ersten Verbindungsaufbau einmalig auf dem Server installiert, was als Einmalkosten einige hundert Megabyte ausmacht. Wenn Sie ein striktes Traffic-Limit haben, deaktivieren Sie automatische Updates für Erweiterungen auf dem Remote-Host über F1 → Preferences: Configure Runtime Arguments und fügen Sie "remote.extensionDownloader.enabled": false hinzu. Für die allermeisten Anwender ist das jedoch unnötig.

Kann ich von einem Remote-Server aus auf einem Tablet oder Telefon arbeiten?

Technisch ja, über VS Code for the Web im Browser, aber mit Einschränkungen. Die Browserversion unterstützt Remote SSH nicht direkt. Eine Übergangslösung: Richten Sie den VS Code Server auf der Instanz ein (ein separates Produkt, nicht mit Remote SSH verwechseln) und verbinden Sie sich von Ihrem Browser aus damit. Für ein Tablet mit Tastatur ist das ein praktikables Szenario; für ein Telefon ist es eher eine Spielerei. Eine praktischere Option ist, ein leichtes Notebook oder Chromebook mit Linux-Subsystem mitzuführen: Die gesamte Rechenlast bleibt auf dem Server, und der Client beansprucht minimale Ressourcen.

Was soll ich tun, wenn die Verbindung bei langen Inaktivitätsphasen abbricht?

Konfigurieren Sie Keepalive in Ihrer SSH-Konfiguration. Fügen Sie zwei Zeilen zu Ihrem Host-Abschnitt in der Datei C:\Users\Example\.ssh\config hinzu: ServerAliveInterval 60 und ServerAliveCountMax 5. Der Client sendet alle 60 Sekunden ein Keepalive-Paket und hält die Verbindung bei bis zu fünf aufeinanderfolgenden verlorenen Paketen aufrecht, sodass die Verbindung bis zu 5 Minuten vollständiger Netzwerkstille überstehen kann. Eine Alternative: Führen Sie tmux oder screen auf dem Server für langlaufende Prozesse aus, um die Terminalsitzung bei einem Verbindungsabbruch nicht zu verlieren.

Ist es sicher, einen privaten Schlüssel im Klartext auf einem Windows-Rechner zu speichern?

Eine .pem-Datei ohne Passphrase ist, ja, eine Klartext-Zeichenkette, die jeder lesen kann, der Zugriff auf Ihr Windows-Konto hat. Schutzmaßnahmen in aufsteigender Sicherheitsreihenfolge: (1) Vergeben Sie beim Erstellen des Schlüssels eine Passphrase (ssh-keygen fragt danach; drücken Sie nicht Enter, sondern geben Sie eine Passphrase ein); (2) speichern Sie den Schlüssel auf einer verschlüsselten Partition (BitLocker ist in Windows 11 Pro standardmäßig aktiviert); (3) verwenden Sie für Produktivumgebungen einen SSH-Agenten mit einem Hardware-Schlüssel (YubiKey). Für eine Entwicklungsumgebung ist ein Schlüssel mit Passphrase ein Kompromiss: VS Code merkt sich diese für die Sitzungsdauer, Sie müssen sie nur einmal täglich eingeben, aber der Schlüssel wird ohne die Passphrase unbrauchbar, selbst wenn die Datei kompromittiert wird.

Was für die tägliche Arbeit wählen: Remote SSH oder einen lokalen Stack

Remote SSH über VS Code ist kein Allheilmittel. Wenn Sie ein Plugin schreiben, das nur wp-cli und Unit-Tests benötigt, baut ein lokales Docker-Setup mit wordpress-develop in einer Minute und erfordert keinen Internetzugang. Wenn Sie jedoch die Integration mit einer externen API debuggen, browserübergreifende Kompatibilität testen oder einem Kunden den Fortschritt zeigen, gewinnt ein Remote-Server mit einer produktionsnahen Umgebung.

Für einen kombinierten Ansatz halten Sie eine Dev-EC2-Instanz dauerhaft in Betrieb (eine reservierte t3.small ist preislich attraktiv) und verbinden sich jederzeit von überall aus damit. Der Code lebt auf dem Server, automatische Backups sind aktiviert, und Sie sind nicht an ein bestimmtes Gerät gebunden. Probieren Sie es aus: Nach einer Woche Remote-Entwicklung werden Sie nicht mehr zu XAMPP zurückwollen.