Remote SSH mit Visual Studio Code

25. Juli 2019 von Sana Ajani, @sana_ajani

Remote - SSH: Einfach, reibungslos und (wie) lokal

Falls Sie es verpasst haben, hat Visual Studio Code kürzlich die Remote Development Extensions veröffentlicht. Die Remote Extensions ermöglichen es Ihnen, gegen einen Container, eine Remote-Maschine oder eine virtuelle Maschine (VM) oder das Windows-Subsystem für Linux (WSL) zu entwickeln, während Sie VS Code mit seinem vollen Funktionsumfang als Ihre Entwicklungsumgebung nutzen.

Grenzenlos: Sie sind nicht an Ihre lokale Maschine gebunden

Immer mehr Entwickler arbeiten an großen und komplexen Projekten, die erfordern, dass sie gegen spezialisierte Entwickler-VMs oder Server arbeiten, die mehr Speicherplatz oder Rechenleistung bieten als ein normaler Laptop.

Diese Art der Entwicklung birgt jedoch ihre eigenen Herausforderungen

• Wenn Sie eine Remote-Zugangssoftware (wie VNC) verwenden, werden Sie wahrscheinlich Verzögerungen beim Bearbeiten feststellen, da Ihre Benutzeroberfläche nicht mehr lokal ist.
• Wenn Sie das Remote Desktop Protocol (RDP) verwenden, kann es schwierig sein, mehrere Verbindungen zu verwalten.
• Das Mounten des Remote-Dateisystems und die Ausführung von Massenoperationen können langsam sein.
• Es ist ärgerlich, Ihre Remote- und lokalen Umgebungen synchron zu halten, und Sie stoßen oft auf Probleme, bei denen Dinge an einem Ort funktionieren, aber an einem anderen nicht.
• Das Remote-Bearbeiten von Dateien mit SSH und Vim bedeutet, dass Sie nicht mehr in der Komfortzone Ihres bevorzugten Code-Editors arbeiten.

Wäre es nicht großartig, die physischen Einschränkungen Ihrer lokalen Maschine zu überwinden, ohne Ihre Werkzeuge aufzugeben? Hier kommt die Magie der Remote - SSH Extension ins Spiel.

Remote-Entwicklung mit Linux

Solange Ihre Linux-VM SSH unterstützt, kann sie überall gehostet werden; auf Ihrem lokalen Host, On-Premise, in Azure oder in jeder anderen Cloud. Sie können auch auf jedem Client arbeiten – Windows, macOS oder Linux.

Hinweis: SSH-Hosts unter macOS und Windows werden noch nicht unterstützt.

In diesem Blogbeitrag verwenden wir einen Windows-Client und zielen auf eine Linux-VM unter Azure ab.

Erste Schritte

Um zu beginnen, müssen Sie Folgendes getan haben:

1. Installieren Sie einen OpenSSH-kompatiblen SSH-Client (PuTTY wird nicht unterstützt).
2. Installieren Sie Visual Studio Code.
3. Verfügen Sie über ein Azure-Abonnement (Wenn Sie kein Azure-Abonnement haben, erstellen Sie ein kostenloses Konto, bevor Sie beginnen).

VM erstellen

Wenn Sie keine vorhandene Linux-virtuelle Maschine haben, können Sie über das Azure-Portal eine neue VM erstellen. Suchen Sie im Azure-Portal nach "Virtuelle Maschinen" und wählen Sie Hinzufügen. Von dort aus können Sie Ihr Azure-Abonnement auswählen und eine neue Ressourcengruppe erstellen, falls Sie noch keine haben.

Nun können Sie die Details Ihrer VM angeben, wie z. B. den Namen, die Größe und das Basisimage. Wir wählen für dieses Beispiel Ubuntu Server 18.04 LTS, aber Sie können neuere Versionen anderer Linux-Distributionen auswählen und unsere unterstützten SSH-Server einsehen.

SSH einrichten

Es gibt verschiedene Authentifizierungsmethoden für eine VM, darunter ein SSH-Schlüsselpaar (öffentlich/privat) oder ein Benutzername und ein Passwort. Wir empfehlen dringend die Schlüssel-basierte Authentifizierung, damit Sie Ihr Passwort nicht jedes Mal eingeben müssen, wenn Sie sich verbinden. Wenn Sie unter Windows bereits Schlüssel mit PuttyGen erstellt haben, können Sie diese wiederverwenden.

Wenn Sie kein SSH-Schlüsselpaar haben, öffnen Sie eine Bash-Shell oder die Kommandozeile und geben Sie ein:

ssh-keygen -t ed25519

Dies generiert den SSH-Schlüssel. Drücken Sie Enter bei der folgenden Aufforderung, um den Schlüssel am Standardspeicherort zu speichern.

Sie werden dann aufgefordert, eine sichere Passphrase einzugeben, aber Sie können diese leer lassen.

SSH-Schlüssel zu Ihrer VM hinzufügen

Im vorherigen Schritt haben wir ein SSH-Schlüsselpaar generiert. Wir nehmen den öffentlichen Schlüssel und fügen ihn in unsere VM-Einrichtung ein, indem wir den Inhalt von id_ed25519.pub kopieren. Sie möchten auch zulassen, dass Ihre VM eingehenden SSH-Datenverkehr akzeptiert.

Eine coole Funktion von Azure VMs ist die Möglichkeit, die automatische Abschaltung zu aktivieren (denn seien wir ehrlich, wir vergessen alle, unsere VMs auszuschalten…). Wenn Sie zum Tab Verwaltung gehen, können Sie die Zeit festlegen, zu der die VM täglich heruntergefahren werden soll.

Wählen Sie Überprüfen und Erstellen, und Azure wird Ihre VM für Sie bereitstellen!

Verbindung mit Remote - SSH herstellen

Nachdem wir nun die Erstellung eines SSH-Hosts abgedeckt haben, verbinden wir uns damit!

Die Remote - SSH Extension von VS Code ermöglicht es Ihnen, sich über SSH mit einer Remote-Maschine oder VM zu verbinden, alles von innerhalb von VS Code aus. Wenn Sie die Remote - SSH Extension noch nicht installiert haben, können Sie in der Erweiterungsansicht (Strg + Umschalt + X) nach "remote ssh" suchen.

Sie werden einen Indikator in der unteren linken Ecke der Statusleiste bemerkt haben. Dieser Indikator zeigt an, in welchem Kontext VS Code ausgeführt wird (lokal oder remote). Klicken Sie auf den Indikator, um eine Liste der Remote-Erweiterungsbefehle anzuzeigen.

Wählen Sie den Befehl Remote-SSH: Verbindung zu Host herstellen und verbinden Sie sich mit dem Host, indem Sie die Verbindungsinformationen für Ihre VM im folgenden Format eingeben: user@hostname.

Der user ist der Benutzername, den Sie beim Hinzufügen des SSH-öffentlichen Schlüssels zu Ihrer VM festgelegt haben. Für den hostname gehen Sie zurück zum Azure-Portal und kopieren Sie im Bereich Übersicht der VM, die wir erstellt haben, die Öffentliche IP-Adresse.

Legen Sie den Benutzer und den Hostnamen im Textfeld für die Verbindungsinformationen fest.

VS Code öffnet nun ein neues Fenster (Instanz). Sie sehen dann eine Benachrichtigung, dass der "VS Code Server" auf dem SSH-Host initialisiert wird. Sobald der VS Code Server auf dem Remote-Host installiert ist, kann er Erweiterungen ausführen und mit Ihrer lokalen Instanz von VS Code kommunizieren.

Sie wissen, dass Sie mit Ihrer VM verbunden sind, wenn Sie den Indikator in der Statusleiste betrachten. Jetzt wird der Hostname unserer VM angezeigt!

Die Remote - SSH Extension fügt auch ein neues Symbol zu Ihrer Aktivitätsleiste hinzu. Wenn Sie darauf klicken, öffnet sich der SSH-Explorer. Hier können Sie Ihre SSH-Verbindungen konfigurieren. Zum Beispiel können Sie die Hosts speichern, mit denen Sie am häufigsten verbunden sind, und von hier aus darauf zugreifen, anstatt Benutzer und Hostnamen einzugeben.

Sobald Sie mit Ihrem SSH-Host verbunden sind, können Sie mit Dateien interagieren und Ordner auf der Remote-Maschine öffnen. Wenn Sie das integrierte Terminal öffnen, sehen Sie, dass Sie innerhalb einer Bash-Shell arbeiten, *während Sie sich unter Windows befinden*. Moment mal, sind wir bereits mit unserer VM verbunden? Das war viel zu einfach. Das ist der Punkt. Diese Erweiterungen machen die Remote-Entwicklung einfach, reibungslos und... nun ja, nicht remote. 😃

Sie können die Bash-Shell verwenden, um durch das Dateisystem auf der VM zu navigieren. Erstellen Sie einen neuen Ordner "demo" mit mkdir demo, und Sie können Ordner im Remote-Home-Verzeichnis mit Datei > Ordner öffnen durchsuchen und öffnen.

Sie können auch Erweiterungen speziell auf dem Remote-SSH-Host installieren. Erweiterungen, die die Benutzeroberfläche beeinflussen, wie Themes und Snippets, werden lokal installiert, und die übrigen Erweiterungen müssen auf dem Remote-SSH-Host installiert werden. Sie werden feststellen, dass es beim Öffnen der Erweiterungsansicht zwei Abschnitte gibt: einen für Erweiterungen auf Ihrer lokalen Maschine und einen für Erweiterungen auf Ihrem Remote-Host. Selbst wenn Sie sich von verschiedenen Clients aus mit Ihrer Remote-Maschine über SSH verbinden, bleiben Ihre Remote-Erweiterungen und Ihre Einrichtung gleich. Wenn Sie eine Erweiterung installieren, wird sie von VS Code automatisch im richtigen Kontext installiert.

Hallo Welt

Lassen Sie uns eine einfache "Hello World"-Python-App auf unserer VM bereitstellen. Wir werden ein beliebtes Python-Webframework namens Flask verwenden. Führen Sie in Ihrer Bash-Shell den folgenden Befehl aus.

sudo apt install python3-flask

Erstellen Sie im zuvor erstellten "Demo"-Ordner eine neue Datei (Strg + N) namens app.py mit einer einfachen Hello-World-Flask-Anwendung.

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello Remote World! :)"

if __name__ == "__main__":
    app.run()

Sobald VS Code die Dateisprache als Python erkennt, sehen Sie eine Benachrichtigung, die die Microsoft Python Extension empfiehlt, falls sie noch nicht auf der Remote-Maschine installiert ist.

Wählen Sie Installieren, laden Sie VS Code neu und Sie werden sehen, wie VS Codes IntelliSense und Farbgebung auf unserer Remote-Maschine funktionieren.

Um die App auszuführen, drücken Sie F5 und wählen Sie die Flask Debug-Konfiguration. In der Python Debug Console sehen Sie, dass die App auf localhost unter Port 5000 läuft. Allerdings bezieht sich localhost derzeit auf den Remote-Server, nicht auf Ihre lokale Maschine. Um auf die Web-App auf Ihrer lokalen Maschine zugreifen zu können, werden wir eine weitere Funktion namens Portweiterleitung nutzen.

Um auf einen Port auf der Remote-Maschine zugreifen zu können, der möglicherweise nicht öffentlich zugänglich ist, müssen wir eine Verbindung oder einen Tunnel zwischen einem Port auf unserer lokalen Maschine und dem Server herstellen. Bei noch laufender App öffnen Sie den SSH-Explorer und suchen die Ansicht Weitergeleitete Ports. Klicken Sie auf den Link Einen Port weiterleiten und geben Sie an, dass wir Port 5000 weiterleiten möchten.

Benennen Sie die Verbindung "browser"

Der Server leitet nun den Datenverkehr auf Port 5000 an unsere lokale Maschine weiter. Wenn Sie zu https://:5000 navigieren, sehen Sie die laufende Web-App.

Nun zur eigentlichen Frage... können wir von VS Code auf unserer Remote-Maschine aus debuggen? JA! Bei noch laufender App setzen Sie einen Haltepunkt in der Zeile, die den String "Hello Remote World" zurückgibt, und wählen Sie die Neustart-Schaltfläche in der Debugging-Steuerung. Aktualisieren Sie die Seite in Ihrem Browser und Sie werden den Haltepunkt erreichen! Sie erhalten das gleiche VS Code-Erlebnis, mit Bearbeitung, Debugging und all Ihren Einstellungen und Erweiterungen. 😊

Um zu Ihrer lokalen Maschine für die lokale Entwicklung zurückzukehren, schließen Sie die Remote-Verbindung mit Datei > Remote-Verbindung schließen.

Mit der Remote - SSH Extension können Sie gegen eine VM mit allen Produktivitätsfunktionen und Erweiterungen von VS Code auf Ihrer Remote-Maschine arbeiten. Sie erhalten das vollwertige Entwicklungserlebnis, das Sie von VS Code kennen und lieben, egal wo Ihr Code gehostet wird.

Wenn Sie mehr über VS Code Remote erfahren möchten, können Sie unseren Blogbeitrag zur Ankündigung der Remote-Entwicklung lesen. Sie können auch die anderen Remote-Erweiterungen ausprobieren: Dev Containers und WSL, und unsere vollständige Remote-Entwicklungsdokumentation lesen.

Viel Spaß beim Remote Coding,

Sana Ajani, VS Code Program Manager @sana_ajani