Remote-Entwicklung über SSH
Dieses Tutorial führt Sie durch die Erstellung und Verbindung mit einer virtuellen Maschine (VM) unter Azure mithilfe der Visual Studio Code-Erweiterung Remote - SSH. Sie erstellen eine Node.js Express-Web-App, um zu zeigen, wie Sie auf einer Remote-Maschine mit VS Code bearbeiten und debuggen können, genau wie Sie es tun könnten, wenn der Quellcode lokal wäre.
Hinweis: Ihre Linux-VM kann überall gehostet werden – lokal, On-Premise, in Azure oder in jeder anderen Cloud –, solange die gewählte Linux-Distribution diese Voraussetzungen erfüllt.
Voraussetzungen
Um zu beginnen, müssen Sie die folgenden Schritte ausgeführt haben
- Installieren Sie einen OpenSSH-kompatiblen SSH-Client (PuTTY wird nicht unterstützt).
- Installieren Sie Visual Studio Code.
- Besitzen Sie ein Azure-Abonnement (Wenn Sie kein Azure-Abonnement haben, erstellen Sie ein kostenloses Konto, bevor Sie beginnen).
Erweiterung installieren
Die Erweiterung Remote - SSH wird verwendet, um sich mit SSH-Hosts zu verbinden.
Remote – SSH
Nach der Installation der Remote - SSH-Erweiterung sehen Sie ein neues Element in der Statusleiste ganz links.
Das Element "Remote" in der Statusleiste kann Ihnen schnell anzeigen, in welchem Kontext VS Code ausgeführt wird (lokal oder remote), und ein Klick auf das Element öffnet die Remote - SSH-Befehle.
Erstellen einer virtuellen Maschine
Wenn Sie keine vorhandene Linux-VM haben, können Sie eine neue VM über das Azure-Portal 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.
Hinweis: In diesem Tutorial verwenden wir Azure, aber Ihre Linux-VM kann überall gehostet werden, solange die Linux-Distribution diese Voraussetzungen erfüllt.
Jetzt können Sie Details Ihrer VM angeben, wie z. B. den Namen, die Größe und das Basisimage. Wählen Sie für dieses Beispiel Ubuntu Server 18.04 LTS, aber Sie können neuere Versionen anderer Linux-Distributionen wählen und sich die unterstützten SSH-Server von VS Code ansehen.
SSH einrichten
Es gibt mehrere Authentifizierungsmethoden für eine VM, darunter ein SSH-Schlüsselpaar (öffentlich/privat) oder Benutzername und Passwort. Wir empfehlen die schlüsselbasierte Authentifizierung (wenn Sie Benutzername/Passwort verwenden, werden Sie von der Erweiterung mehr als einmal aufgefordert, Ihre Anmeldedaten einzugeben). Wenn Sie unter Windows arbeiten und bereits Schlüssel mit PuTTYGen erstellt haben, können Sie diese wiederverwenden.
SSH-Schlüssel erstellen
Wenn Sie kein SSH-Schlüsselpaar haben, öffnen Sie eine Bash-Shell oder die Eingabeaufforderung und geben Sie Folgendes ein:
ssh-keygen -t ed25519
Dadurch wird der SSH-Schlüssel generiert. Drücken Sie Enter bei der folgenden Aufforderung, um den Schlüssel am Standardspeicherort zu speichern (unter Ihrem Benutzerverzeichnis in einem Ordner namens .ssh).
Sie werden dann aufgefordert, eine sichere Passphrase einzugeben, diese können Sie jedoch leer lassen. Sie sollten nun eine Datei namens id_ed25519.pub haben, die Ihren neuen öffentlichen SSH-Schlüssel enthält.
Hinweis: Wenn Sie ein älteres System verwenden, das den Ed25519-Algorithmus nicht unterstützt, können Sie stattdessen rsa verwenden:
ssh-keygen -t rsa -b 4096.
SSH-Schlüssel zu Ihrer VM hinzufügen
Im vorherigen Schritt haben Sie ein SSH-Schlüsselpaar generiert. Wählen Sie im Dropdown-Menü für SSH-Schlüsselquelle die Option Vorhandenen öffentlichen Schlüssel verwenden, um den gerade generierten öffentlichen Schlüssel verwenden zu können. Nehmen Sie den öffentlichen Schlüssel und fügen Sie ihn in Ihre VM-Einrichtung ein, indem Sie den gesamten Inhalt von id_ed25519.pub in das Feld SSH-öffentlicher Schlüssel kopieren. Sie möchten auch zulassen, dass Ihre VM eingehenden SSH-Datenverkehr akzeptiert, indem Sie Ausgewählte Ports zulassen auswählen und SSH (22) aus der Dropdown-Liste Eingehende Ports auswählen wählen.
Automatische Abschaltung
Ein cooles Feature der 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 tägliche Abschaltzeit der VM festlegen.
Wählen Sie Überprüfen und Erstellen und dann Erstellen, und Azure stellt Ihre VM für Sie bereit!
Sobald die Bereitstellung abgeschlossen ist (sie kann mehrere Minuten dauern), gehen Sie zur Ansicht der neuen Ressource für Ihre virtuelle Maschine.
Verbindung über SSH herstellen
Nachdem Sie nun einen SSH-Host erstellt haben, verbinden wir uns damit!
Sie haben einen Indikator in der unteren linken Ecke der Statusleiste bemerkt. Dieser Indikator zeigt Ihnen, in welchem Kontext VS Code ausgeführt wird (lokal oder remote). Ein Klick auf den Indikator öffnet eine Liste der Befehle der Remote-Erweiterungen.
Wählen Sie den Befehl Verbindung mit Host herstellen... im Abschnitt Remote-SSH und stellen Sie eine Verbindung zum Host her, indem Sie die Verbindungsinformationen für Ihre VM im folgenden Format eingeben: benutzer@hostname.
Der benutzer 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 von Ihnen erstellten VM die Öffentliche IP-Adresse.
Bevor Sie sich in Remote - SSH verbinden, können Sie über eine Eingabeaufforderung mit ssh benutzer@hostname überprüfen, ob Sie eine Verbindung zu Ihrer VM herstellen können.
Hinweis: Wenn Sie auf den Fehler
ssh: connect to host <host ip> port 22: Connection timed outstoßen, müssen Sie möglicherweise NRMS-Rule-106 aus dem Netzwerk-Tab Ihrer VM löschen.
Benutzer und Hostnamen im Textfeld für Verbindungsinformationen festlegen.
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, indem Sie den Indikator in der Statusleiste betrachten. Er zeigt den Hostnamen Ihrer VM an.
Die Erweiterung Remote - SSH fügt auch ein neues Symbol zur Aktivitätsleiste hinzu. Ein Klick darauf öffnet den Remote-Explorer. Wählen Sie im Dropdown-Menü SSH-Ziele, wo Sie Ihre SSH-Verbindungen konfigurieren können. Sie können beispielsweise die Hosts, mit denen Sie sich am häufigsten verbinden, speichern und von hier aus darauf zugreifen, anstatt Benutzer und Hostnamen eingeben zu müssen.
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 (⌃` (Windows, Linux Ctrl+`)), sehen Sie, dass Sie unter Windows in einer Bash-Shell arbeiten.
Sie können die Bash-Shell verwenden, um das Dateisystem auf der VM zu durchsuchen. Sie können auch Ordner im Remote-Home-Verzeichnis mit Datei > Ordner öffnen durchsuchen und öffnen.
Erstellen Ihrer Node.js-Anwendung
In diesem Schritt erstellen Sie eine einfache Node.js-Anwendung. Sie verwenden einen Anwendungsgenerator, um die Anwendung schnell über ein Terminal zu erstellen.
Node.js und npm installieren
Aktualisieren Sie im integrierten Terminal (⌃` (Windows, Linux Ctrl+`)) die Pakete auf Ihrer Linux-VM und installieren Sie dann Node.js, das npm, den Node.js-Paketmanager, enthält.
sudo apt-get update
curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
Sie können die Installationen überprüfen, indem Sie Folgendes ausführen:
node --version
npm --version
Express Generator installieren
Express ist ein beliebtes Framework zum Erstellen und Ausführen von Node.js-Anwendungen. Sie können eine neue Express-Anwendung mit dem Express Generator-Tool generieren (erstellen). Der Express Generator wird als npm-Modul ausgeliefert und mit dem npm-Befehlszeilenwerkzeug npm installiert.
sudo npm install -g express-generator
Der Schalter -g installiert den Express Generator global auf Ihrem Computer, sodass Sie ihn von überall aus ausführen können.
Neue Anwendung erstellen
Sie können nun eine neue Express-Anwendung namens myExpressApp erstellen, indem Sie Folgendes ausführen:
express myExpressApp --view pug
Die Parameter --view pug weisen den Generator an, die Pug-Template-Engine zu verwenden.
Um alle Abhängigkeiten der Anwendung zu installieren, wechseln Sie in den neuen Ordner und führen Sie npm install aus.
cd myExpressApp
npm install
Anwendung ausführen
Stellen wir abschließend sicher, dass die Anwendung läuft. Starten Sie die Anwendung vom Terminal aus mit dem Befehl npm start, um den Server zu starten.
npm start
Die Express-App läuft standardmäßig unter https://:3000. Sie sehen in Ihrem lokalen Browser unter localhost:3000 nichts, da die Web-App auf Ihrer virtuellen Maschine läuft.
Portweiterleitung
Um die Web-App auf Ihrer lokalen Maschine durchsuchen zu können, können Sie 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 Sie eine Verbindung oder einen Tunnel zwischen einem Port auf Ihrer 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 Port weiterleiten und geben Sie an, dass Sie Port 3000 weiterleiten möchten
Benennen Sie die Verbindung "Browser"
Der Server leitet nun den Datenverkehr auf Port 3000 an Ihre lokale Maschine weiter. Wenn Sie zu https://:3000 navigieren, sehen Sie die laufende Web-App.
Bearbeiten und Debuggen
Navigieren Sie im Visual Studio Code-Datei-Explorer (⇧⌘E (Windows, Linux Ctrl+Shift+E)) zu Ihrem neuen myExpressApp-Ordner und doppelklicken Sie auf die Datei app.js, um sie im Editor zu öffnen.
IntelliSense
Sie haben Syntaxhervorhebung für die JavaScript-Datei sowie IntelliSense mit Tooltips, genau wie Sie es sehen würden, wenn der Quellcode auf Ihrer lokalen Maschine wäre.
Wenn Sie mit der Eingabe beginnen, erhalten Sie intelligente Vervollständigungen für die Objektmethoden und -eigenschaften.
Debugging
Legen Sie einen Haltepunkt in Zeile 10 von app.js, indem Sie in die Spalte links neben der Zeilennummer klicken oder den Cursor auf die Zeile setzen und F9 drücken. Der Haltepunkt wird als roter Kreis angezeigt.
Drücken Sie nun F5, um Ihre Anwendung auszuführen. Wenn Sie gefragt werden, wie die Anwendung ausgeführt werden soll, wählen Sie Node.js.
Die App wird gestartet, und Sie erreichen den Haltepunkt. Sie können Variablen inspizieren, Überwachungen erstellen und den Aufrufstapel navigieren.
Drücken Sie F10 zum Schritt durch oder F5 erneut, um Ihre Debugging-Sitzung abzuschließen.
Sie erhalten die vollständige Entwicklungsumgebung von Visual Studio Code, verbunden über SSH.
Beenden Ihrer SSH-Verbindung
Sie können Ihre Sitzung über SSH beenden und mit Datei > Remote-Verbindung schließen wieder mit der lokalen Ausführung von VS Code fortfahren.
Glückwunsch
Herzlichen Glückwunsch, Sie haben dieses Tutorial erfolgreich abgeschlossen!
Schauen Sie sich als Nächstes die anderen Remote-Entwicklungserweiterungen an.
Oder erhalten Sie sie alle, indem Sie das Remote Development-Erweiterungspaket installieren.