Zum Hauptinhalt springen

Verbindung zu Website-Dateien über VSCode herstellen

Um sich per SSH und FTP/SFTP zu verbinden, verwendet Visual Studio Code eine Erweiterung, die einen bequemen Zugriff auf Remote-Dateien bietet.

SSH​

Die Erweiterung installieren​

Öffnen Sie Visual Studio Code. Klicken Sie in der Seitenleiste auf das Symbol "Extensions" (quadratisches Symbol), und suchen Sie in der Extensions-Ansicht nach SSH.
Klicken Sie bei der Erweiterung "Remote - SSH" von Microsoft auf "Install".

Erweiterung installieren

SSH-Schlüssel einrichten​

Um sich per SSH ohne Passwort zu verbinden, richten Sie bitte Ihren SSH-Schlüssel in FASTPANEL mit diesem Artikel ein.

Hinweis

Den Website-Benutzer finden Sie in der Website-Karte im Feld "Site user". Um das Passwort des Website-Benutzers zu ändern, gehen Sie in FASTPANEL® zum Abschnitt "Management" → "Users".

SSH in VSCode konfigurieren​

Drücken Sie unter Windows/Linux F1 oder auf dem Mac Cmd+Shift+P, um die Befehlspalette zu öffnen, geben Sie Remote-SSH: Add New SSH Host ein und wählen Sie es aus, und geben Sie dann die SSH-Verbindungszeichenfolge im Format ein:

ssh site_user@11.22.33.44

Neuen SSH-Host hinzufügen

Ersetzen Sie site_user und 11.22.33.44 durch die entsprechenden Werte. Anstelle von site_user müssen Sie den Website-Benutzer angeben und anstelle von 11.22.33.44 die IP-Adresse Ihres Servers. Wählen Sie nach der Eingabe des Befehls die Konfigurationsdatei aus, um die SSH-Konfiguration zu speichern (normalerweise ~/.ssh/config).

Mit dem Remote-Server verbinden​

Drücken Sie unter Windows/Linux F1 oder auf dem Mac Cmd+Shift+P, um die Befehlspalette zu öffnen, geben Sie Remote-SSH: Connect to Host ein und wählen Sie es aus, wählen Sie den zuvor hinzugefügten Host aus, akzeptieren Sie den Fingerabdruck des Servers und geben Sie die Passphrase für Ihren SSH-Schlüssel ein, falls dies die erste Verbindung ist, und geben Sie, wenn Sie dazu aufgefordert werden, Ihr Passwort ein.

Nachdem Sie verbunden sind, gehen Sie zu "Explorer" → "Open Folder" , um einen Ordner auf dem Host zu öffnen.
Zum Beispiel /var/www/site_user/data/www/example.com.

Mit dem Remote-Server verbinden

Dateien öffnen und mit dem Programmieren beginnen​

Sobald die Verbindung hergestellt ist, wird VSCode neu geladen, und Sie können Dateien auf dem Remote-Server direkt in VSCode durchsuchen. Sie können Dateien genau wie auf Ihrem lokalen Rechner öffnen, bearbeiten und speichern.

Weitere Informationen finden Sie in der Dokumentation der Erweiterung.

FTP/SFTP​

Die Erweiterung installieren​

Öffnen Sie Visual Studio Code. Klicken Sie in der Seitenleiste auf das Symbol "Extensions" (quadratisches Symbol). Geben Sie SFTP in die Suchleiste ein. Klicken Sie auf "Install", um die ausgewählte Erweiterung zu installieren.

Erweiterung installieren

Die Verbindung konfigurieren​

Öffnen Sie die Befehlspalette, indem Sie unter Windows/Linux F1 oder auf dem Mac Cmd+Shift+P drücken, geben Sie SFTP: Config ein und bearbeiten Sie dann die Konfigurationsparameter mit den Informationen Ihres Remote-Servers in der Datei sftp.json im Verzeichnis .vscode. Zum Beispiel:

{  
    "name": "My Server",  
    "host": "11.22.33.44",  
    "protocol": "ftp",  
    "password": "password",  
    "port": 21,  
    "username": "ftp_user",  
    "remotePath": "/",  
    "uploadOnSave": false,  
    "useTempFile": false,  
    "openSsh": false  
}
Hinweis

Wie Sie FTP-Konten in FASTPANEL® erstellen, erfahren Sie in diesem Artikel, und über SFTP-Konten in diesem hier.

  • "host": IP-Adresse Ihres Servers.
  • "protocol": Geben Sie ftp oder sftp an.
  • "port": 21 für FTP oder 2222 für SFTP.
  • "username" und "password": Login und Passwort für das FTP-/SFTP-Konto.
  • "remotePath": Geben Sie das Verzeichnis auf dem Server an, mit dem Sie arbeiten möchten.
  • "uploadOnSave": Option für den automatischen Upload beim Speichern der Datei.

Der Passwortparameter in sftp.json ist optional; wenn er weggelassen wird, werden Sie bei der Synchronisierung zur Eingabe eines Passworts aufgefordert. Speichern und schließen Sie die sftp.json -Datei.

Mit Dateien arbeiten​

Öffnen Sie die Befehlspalette, drücken Sie unter Windows/Linux F1 oder auf dem Mac Cmd+Shift+P. Geben Sie dann SFTP ein, um eine Reihe verfügbarer Befehle anzuzeigen, auf die Sie auch über die Kontextmenüs des Datei-Explorers des Projekts zugreifen können.
Um mit einem Remote-Ordner zu synchronisieren, verwenden Sie den Befehl SFTP: Download Project, der das im remotePath-Parameter in sftp.json angegebene Verzeichnis in Ihr lokal geöffnetes Verzeichnis herunterlädt.

Remote Explorer​

Mit Remote Explorer können Sie Remote-Dateien durchsuchen. Sie können den Remote Explorer öffnen, indem Sie den Befehl View: Show SFTP ausführen. Klicken Sie danach in der Aktivitätsleiste auf die SFTP-Ansicht.

Mit Remote Explorer können Sie nur den Inhalt einer Datei anzeigen. Verwenden Sie SFTP: Edit in Local, um sie lokal zu bearbeiten.

Erweiterung installieren