IDE per SSH-Tunnel anbinden: VS Code und PhpStorm für Shopware (Teil 2)

Der Server läuft, Shopware ist installiert, das erste Plugin-Gerüst steht. Aber wie arbeitest du jetzt damit? Per nano im Terminal? Das funktioniert für eine Config-Änderung, aber nicht für ernsthafte Plugin-Entwicklung. Du brauchst deine lokale IDE — mit allem, was dazugehört: Code-Completion, Refactoring, Debugging. Genau dafür gibt es den SSH-Tunnel.

Warum nicht einfach auf dem Server arbeiten?

Theoretisch könntest du dich per SSH auf den Server verbinden und direkt dort programmieren. In der Praxis scheitert das schnell.

Direkt im Terminal: Du hast vim oder nano. Kein Syntax-Highlighting über Basisfarben hinaus, keine Code-Completion, kein Refactoring. Für eine Konfigurationsdatei reicht das — für die Entwicklung eines Shopware-Plugins mit Dependency Injection, Events und Twig-Templates nicht.

Web-IDEs: Tools wie Code Server oder Gitpod laufen im Browser. Das klingt praktisch, ist aber abhängig von der Verbindungsqualität. Jeder Tastendruck geht über das Netz. Bei 50 ms Latenz spürst du das, bei 100 ms nervt es, bei einem kurzen Verbindungsabbruch ist der aktuelle Stand weg. Und du verlierst alle lokalen Tastenkürzel und IDE-Einstellungen.

Der SSH-Tunnel kombiniert beides: Deine IDE läuft lokal — mit deiner gewohnten Konfiguration, deinen Shortcuts, deinen Extensions. Der Code liegt auf dem Server, wo auch PHP, die Datenbank und Shopware laufen. Die IDE kommuniziert über SSH mit dem Server, synchronisiert Dateien und leitet Ports weiter. Du merkst keinen Unterschied zum lokalen Arbeiten, aber die Ausführung passiert auf dem Server.

Und noch ein Vorteil: Der VPS braucht keine grafische Oberfläche. Kein Desktop, kein Fenstermanager, keine GPU-Treiber. Das spart Ressourcen, die stattdessen Shopware und der Datenbank zugutekommen.

SSH-Verbindung einrichten

Bevor die IDE mit dem Server sprechen kann, brauchst du eine funktionierende SSH-Verbindung. Falls du bisher mit Passwort arbeitest: Jetzt ist der richtige Zeitpunkt, auf Schlüssel umzusteigen.

SSH-Key generieren

Öffne ein Terminal auf deinem lokalen Rechner (nicht auf dem Server) und erstelle einen Ed25519-Schlüssel:

ssh-keygen -t ed25519 -C "mein-dev-rechner"

Du wirst nach einem Speicherort und einer Passphrase gefragt. Den Standard-Speicherort (~/.ssh/id_ed25519) kannst du übernehmen. Eine Passphrase ist empfehlenswert — mit dem SSH-Agent musst du sie nur einmal pro Sitzung eingeben.

Public Key auf den Server kopieren

ssh-copy-id -i ~/.ssh/id_ed25519.pub [benutzername]@[SERVER-IP]

Ab jetzt kannst du dich ohne Passwort verbinden.

SSH-Config anlegen

Damit du nicht jedes Mal die IP-Adresse und den Benutzernamen eintippen musst, legst du eine SSH-Config an. Öffne oder erstelle die Datei ~/.ssh/config:

Host devbox
    HostName [SERVER-IP]
    User [benutzername]
    IdentityFile ~/.ssh/id_ed25519
    LocalForward 8080 localhost:80

Die Zeile LocalForward 8080 localhost:80 ist der eigentliche Tunnel. Sie leitet Port 8080 auf deinem lokalen Rechner an Port 80 auf dem Server weiter. Sobald die SSH-Verbindung steht, ist der Shopware-Shop im lokalen Browser unter http://dev-shopware.ddev.site:8080 erreichbar — als würde er lokal laufen.

Verbindung testen:

ssh devbox

Wenn du auf dem Server landest, funktioniert alles. Öffne einen Browser und rufe http://dev-shopware.ddev.site:8080 auf. Du solltest den Shopware-Frontend sehen.

VS Code einrichten (Remote – SSH)

VS Code hat mit der Extension Remote – SSH die beste Out-of-the-Box-Lösung für Remote-Entwicklung. Du arbeitest in der IDE, als wäre das Projekt lokal — aber alles läuft auf dem Server.

Extension installieren

Öffne VS Code und installiere die Extension Remote – SSH von Microsoft. Du findest sie über die Extensions-Suche oder direkt über die ID ms-vscode-remote.remote-ssh.

Verbindung herstellen

1. Drücke Ctrl+Shift+P und wähle Remote-SSH: Connect to Host
2. Wähle devbox aus der Liste (VS Code liest deine SSH-Config)
3. VS Code installiert beim ersten Mal einen kleinen Server-Prozess auf dem VPS — das dauert ein paar Sekunden
4. Danach öffnest du den Projektordner: /workspace/shopware/dev-shopware oder direkt dein Plugin unter /workspace/plugins/MeinPlugin

Extensions im Remote installieren

VS Code unterscheidet zwischen lokalen und Remote-Extensions. Für PHP-Entwicklung brauchst du folgende Extensions auf dem Server:

• PHP Intelephense — Code-Completion, Go-to-Definition, Refactoring
• PHP Debug — Xdebug-Integration
• Twig Language — Syntax-Highlighting für Shopware-Templates
• YAML — für Service-Definitionen und Konfigurationen

Installiere sie über die Extensions-Sidebar. VS Code fragt automatisch, ob sie lokal oder remote installiert werden sollen — wähle Install in SSH: devbox.

Was du davon hast

Nach der Einrichtung arbeitest du in VS Code wie gewohnt:

• Code-Completion — Intelephense kennt alle Shopware-Klassen, weil es den gesamten Vendor-Ordner auf dem Server analysiert
• Integriertes Terminal — öffnet direkt eine Shell auf dem Server, kein separates SSH-Fenster nötig
• Git-Integration — Commits, Branches, Diffs direkt in der IDE
• Datei-Explorer — durchsucht die Server-Dateien, als wären sie lokal

PhpStorm einrichten (Remote Deployment)

PhpStorm geht einen anderen Weg als VS Code. Statt direkt auf dem Server zu arbeiten, synchronisiert es Dateien über SFTP. Du bearbeitest eine lokale Kopie, und PhpStorm lädt Änderungen automatisch auf den Server hoch.

Deployment-Konfiguration anlegen

1. Öffne Settings → Build, Execution, Deployment → Deployment
2. Klicke auf + und wähle SFTP
3. Benenne die Konfiguration devbox
4. Verbindungsdaten:
   • Host: Deine Server-IP (oder devbox, falls du die SSH-Config nutzt)
   • User: Dein Benutzername
   • Authentication: Key Pair (OpenSSH)
   • Private Key: ~/.ssh/id_ed25519
5. Root Path: /workspace/plugins/MeinPlugin

Mapping konfigurieren

Im Tab Mappings legst du fest, welcher lokale Ordner welchem Server-Ordner entspricht:

Local Path	Deployment Path
C:\Projekte\MeinPlugin	/

Automatischer Upload

Unter Settings → Build, Execution, Deployment → Deployment → Options:

• Upload changed files automatically: Always
• Upload external changes: aktivieren

Ab jetzt wird jede gespeicherte Datei sofort auf den Server hochgeladen.

Remote PHP Interpreter

Damit PhpStorm den richtigen PHP-Interpreter für Analysen und Tests nutzt, konfigurierst du einen Remote-Interpreter:

1. Öffne Settings → PHP
2. Klicke auf … neben CLI Interpreter
3. Wähle From Docker, Vagrant, VM, WSL, Remote…
4. Konfiguration: SSH, Host: devbox
5. PHP Executable: /usr/bin/php (oder den Pfad im Container: ddev exec which php)

Jetzt kann PhpStorm PHPStan, PHP CS Fixer und PHPUnit direkt auf dem Server ausführen — mit der gleichen PHP-Version und den gleichen Extensions wie im Produktivsystem.

Xdebug über den Tunnel

Xdebug ist unverzichtbar für die Plugin-Entwicklung. Statt var_dump in den Code zu streuen, setzt du einen Breakpoint und inspizierst Variablen, Call-Stacks und den gesamten Programmfluss in der IDE.

Die gute Nachricht: DDEV kümmert sich um die Konfiguration. Du musst nur ein- und ausschalten.

Xdebug aktivieren

# Auf dem Server (im Projektverzeichnis)
ddev xdebug on

DDEV konfiguriert Xdebug automatisch so, dass die Debug-Verbindung über den SSH-Tunnel zurück zu deiner lokalen IDE geleitet wird. Port 9003 ist der Standard.

IDE konfigurieren

VS Code: Installiere die Extension PHP Debug und erstelle eine .vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}

PhpStorm: Xdebug-Listener starten über Run → Start Listening for PHP Debug Connections oder das Telefon-Symbol in der Toolbar. PhpStorm erkennt die Xdebug-Verbindung automatisch und fragt beim ersten Aufruf nach dem Path-Mapping.

Workflow

1. Xdebug auf dem Server aktivieren: ddev xdebug on
2. In der IDE den Debug-Listener starten
3. Breakpoint setzen
4. Seite im Browser aufrufen
5. Die IDE stoppt am Breakpoint — du siehst alle Variablen, den Call-Stack und kannst Schritt für Schritt durch den Code gehen

Nicht vergessen: Xdebug ausschalten

ddev xdebug off

Xdebug verlangsamt jede PHP-Ausführung erheblich — auch wenn kein Breakpoint gesetzt ist. Im Alltag schaltest du es nur ein, wenn du es brauchst, und danach sofort wieder aus.

Täglicher Workflow

Sobald alles eingerichtet ist, sieht ein typischer Arbeitstag so aus:

1. Verbindung herstellen: ssh devbox im Terminal (oder VS Code verbindet sich automatisch)
2. DDEV starten: ddev start (falls die Umgebung nicht schon läuft)
3. IDE öffnen: VS Code öffnet das Remote-Projekt, PhpStorm synced automatisch
4. Code schreiben: Änderungen am Plugin vornehmen
5. Cache leeren: ddev exec bin/console cache:clear
6. Browser: Shop unter http://dev-shopware.ddev.site:8080 aufrufen und testen
7. Debuggen: Bei Bedarf Xdebug einschalten, Breakpoint setzen, analysieren

Das klingt nach vielen Schritten, geht aber in der Praxis in unter einer Minute. Der Tunnel steht sofort, die IDE verbindet sich automatisch, der Shop ist im Browser erreichbar.

Die wichtigsten Befehle im Überblick

Aufgabe	Befehl
Verbindung zum Server	ssh devbox
DDEV-Umgebung starten	ddev start
Cache leeren	ddev exec bin/console cache:clear
Theme kompilieren	ddev exec bin/console theme:compile
Plugin aktualisieren	ddev exec bin/console plugin:refresh
Xdebug einschalten	ddev xdebug on
Xdebug ausschalten	ddev xdebug off
Logs verfolgen	ddev exec tail -f var/log/dev.log
In den Container wechseln	ddev ssh
Datei manuell hochladen (PhpStorm)	Ctrl+Shift+Alt+X

Wie geht es weiter?

Deine Entwicklungsumgebung ist jetzt komplett. Der Server läuft, die IDE ist angebunden, Debugging funktioniert. Ab hier kannst du dich voll auf die Plugin-Entwicklung konzentrieren.