// Tutorial //

Verwenden von Visual Studio Code für die Remoteentwicklung über das Remote-SSH-Plugin

Published on April 28, 2020
Default avatar

By Mason Egger

Developer Advocate

Deutsch
Verwenden von Visual Studio Code für die Remoteentwicklung über das Remote-SSH-Plugin

Einführung

Visual Studio Code ist eine beliebte Integrated Developer Environment (IDE) für Entwickler. Dank ihres großen Spektrums an Plugins, eines Minimaldesigns und plattformübergreifender Unterstützung eignet sie sich perfekt für Entwickler aller Kenntnisstufen. In diesem Tutorial geht es um die Verwendung des Remote-SSH-Plugins, das eine Remoteentwicklung von Software ermöglicht. Mit diesem Plugin können Sie Dateien auf Ihrer lokalen Workstation bearbeiten, Entwicklungsaufgaben wie Programmausführung, Komponententests oder statische Analysen aber auf einem Remoteserver ausführen.

Es gibt viele Gründe, warum dies hilfreich sein kann. Möglicherweise verfügen Sie zum Beispiel über eine Windows-Workstation und möchten unter Windows entwickeln, während der Code später in Linux ausgeführt werden soll. Vielleicht benötigen Sie mehr RAM- oder Verarbeitungsleistung, als Ihr aktueller Rechner hat, oder wollen aufgrund einer Unternehmensrichtlinie Code fern von Ihrem persönlichen Rechner halten, oder Ihre Workstation unberührt lassen.

In diesem Tutorial aktivieren Sie das Remote-SSH-Plugin, konfigurieren Visual Studio Code so, dass Code auf dem Remoteserver ausgeführt wird, und führen Code von Ihrer lokalen Visual Studio Code-Installation auf dem Remoteserver aus.

Voraussetzungen

Um mit diesem Leitfaden fortfahren zu können, benötigen Sie:

Schritt 1 — Installieren des Remote-SSH-Plugins

Im Extensions Marketplace können Sie für verschiedene Tools und Programmiersprachen unterstützte Erweiterungen und Erweiterungen von Drittanbietern herunterladen. Hier suchen Sie nach dem Remote-SSH-Plugin und installieren es.

Auf der linken Seite der IDE befindet sich eine vertikale Reihe mit fünf Symbolen. Das unterste Symbol, das wie vier Quadrate in einem Kästchen aussieht, dessen oberes rechtes Quadrat nach außen ragt, ist das Symbol für den Extensions Marketplace:

Stelle des Extensions Marketplace-Symbols

Sie können auch auf diesen Abschnitt zugreifen, indem Sie Strg+Umschalttaste+X drücken. Wenn Sie diese Seite öffnen, sehen Sie zum Herunterladen und Installieren vorgeschlagene Plugins.

Wenn der Extensions Marketplace geöffnet ist, geben Sie Remote-SSH in die Suchleiste Extensions in Marketplace durchsuchen ein. Wenn Sie das Plugin finden, wählen Sie es aus und klicken Sie dann auf die grüne Schaltfläche Installieren, um die Erweiterung zu installieren.

Suchen nach dem Remote-SSH-Plugin

Die Erweiterung ist nun installiert. Als Nächstes konfigurieren Sie die Erweiterung, damit Sie sich mit Ihrem Server verbinden können.

Schritt 2 — Konfigurieren des Remote-SSH-Plugins und Verbinden mit Ihrem Server

Nachdem Sie das Plugin installiert haben, können Sie es nun konfigurieren, um eine Verbindung mit einem Server herzustellen. Dazu benötigen Sie folgende Informationen:

  • Die IP-Adresse oder den Hostnamen des Servers.
  • Den Benutzernamen, mit dem Sie sich verbinden.
  • Den privaten Schlüssel, den Sie zur Authentifizierung Ihres Benutzers verwenden werden.

Sie verwenden diese Informationen zum Erstellen einer SSH-Konfigurationsdatei, die Visual Studio Code zur Herstellung einer SSH-Verbindung mit dem Server verwenden kann, um Dateien zu synchronisieren und Code in Ihrem Namen auszuführen. Diese Konfiguration erstellen Sie mit Visual Studio Code.

Nachdem Sie das Remote-SSH-Plugin installiert haben, sehen Sie nun ein kleines grünes Feld in der unteren linken Ecke der Benutzeroberfläche von Visual Studio Code. Wenn Sie mit dem Mauszeiger über das Feld fahren, steht im Popup Remotefenster öffnen. Die Schaltfläche sieht ungefähr wie ein Größer-als-Zeichen unter einem Kleiner-als-Zeichen >< aus, wie im folgenden Bild dargestellt:

Grüne Schaltfläche zum Öffnen eines Remotefensters

Klicken Sie auf die Schaltfläche, woraufhin oben in der Mitte ein Dialogfeld erscheint. Wählen Sie Remote-SSH: Konfigurationsdatei öffnen… aus der Liste:

Auswählen von "SSH konfigurieren" in der Benutzeroberfläche

In der nächsten Eingabeaufforderung werden Sie gefragt, welche Konfigurationsdatei Sie öffnen möchten. Wenn Sie Windows verwenden, sehen Sie zwei Speicherorte: einen in Ihrem persönlichen Benutzerverzeichnis und einen am Installationsspeicherort für SSH. Zum Konfigurieren des Servers sollten Sie die Datei in Ihrem Benutzerverzeichnis verwenden.

Wählen Sie die Datei aus, woraufhin Ihr Editor die config-Datei öffnet. Fügen Sie der Datei folgenden Code hinzu, um die Verbindung mit Ihrem Server festzulegen, indem Sie die hervorgehobenen Abschnitte durch die Informationen für Ihren Server ersetzen:

config
Host my_remote_server
    HostName your_server_ip_or_hostname
    User sammy
    IdentityFile /location/of/your/private/key

So funktioniert diese Konfigurationsdatei:

  • Host: Gibt einen Namen für Ihren Host an. Damit können Sie beim Herstellen einer Verbindung mit dem Server einen kurzen Namen oder eine Abkürzung anstelle der vollständigen IP-Adresse oder des Hostnamens verwenden.
  • HostName: Der tatsächliche Hostname des Servers, der entweder eine IP-Adresse oder ein vollqualifizierter Domänenname ist.
  • User: Der Benutzer, mit dem Sie eine Verbindung herstellen möchten.
  • IdentityFile: Der Pfad zu Ihrem privaten SSH-Schlüssel. In Mac- und Linux-Systemen finden Sie diesen in Ihrem Stammverzeichnis in einem versteckten .ssh-Verzeichnis, das typischerweise id_rsa heißt. Wenn Sie Windows verwenden, haben Sie einen Speicherort zur Speicherung dieser Datei angegeben, als Sie diese mit putty-gen erstellt haben.

Geben Sie die entsprechenden Werte in Ihrer Datei an und speichern Sie die Datei.

Visual Studio Code ist nun konfiguriert und bereit, sich mit Ihrem Server zu verbinden. Klicken Sie unten links auf die grüne Schaltfläche Remotefenster öffnen und wählen Sie Remote-SSH: Mit Host verbinden…

Herstellen einer Verbindung mit dem Server von Visual Studio Code

Sobald Sie damit fertig sind, werden alle verfügbaren und konfigurierten Server im Dropdown-Menü angezeigt. Wählen Sie den Server, mit dem Sie sich verbinden möchten, aus dieser Liste aus.

Wenn Sie sich von Ihrem Rechner zum ersten Mal mit diesem Server verbinden, werden Sie wahrscheinlich eine Aufforderung mit dem SSH Fingerprint-Verifizierungsdialog erhalten, wie im folgenden Bild zu sehen:

Bestätigen Ihres SSH Fingerprint

Dadurch wird sichergestellt, dass Sie sich wirklich mit dem richtigen Server verbinden. Sie können dies überprüfen, indem Sie sich bei Ihrem Server manuell anmelden und ssh-keygen -l -f /etc/ssh/ssh_host_key.pub ausführen, um den Fingerabdruck des Servers anzuzeigen. Wenn dieser Fingerabdruck mit dem übereinstimmt, der in Visual Studio Code angezeigt wird, dann verbinden Sie sich tatsächlich mit dem richtigen Server, sodass Sie auf Fortfahren klicken können.

Visual Studio Code öffnet standardmäßig ein neues Fenster, sobald eine neue Verbindung hergestellt wird. Ein neues Fenster mit dem Empfangsbildschirm wird angezeigt. Sie wissen, dass Ihre Verbindung erfolgreich hergestellt wurde, wenn unten links im grünen Feld SSH: your_ip_address_or_hostname angezeigt wird. Das bedeutet, dass Visual Studio Code verbunden ist und mit Ihrem Remoteserver kommuniziert.

Erfolgreiche SSH-Verbindung

Nachdem Sie verbunden sind, können Sie nun Befehle und Code aus Ihrem Editor ausführen.

Schritt 3 — Ausführen von Code auf dem Remoteserver

Das Remote-SSH-Plugin ist fertig konfiguriert, sodass es an der Zeit ist, Code auf Ihrem Remotecomputer auszuführen. Öffnen Sie ein Terminalfenster, indem Sie aus der Navigationsleiste oben im Fenster Visual Studio Terminal auswählen und auf Neues Terminal klicken. Sie können auch ein Terminal öffnen, indem Sie ``Strg+Umschalttaste+``` drücken. Das Terminal, das geöffnet wird, ist ein Terminal auf Ihrem Remoteserver, nicht auf Ihrem lokalen Rechner.

Wenn sich das Terminal öffnet, geben Sie folgenden Befehl aus, um die IP-Adresse Ihres Servers anzuzeigen und zu überprüfen, ob Sie mit Ihrem Remoteserver verbunden sind:

  1. ip addr

Sie sehen in Ihrem Terminal folgende Ausgabe:

Output
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever inet6 ::1/128 scope host valid_lft forever preferred_lft forever 2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000 link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff inet your_server_ip brd your_broadcast_address scope global eth0 valid_lft forever preferred_lft forever ...

Um die Fähigkeit zur Ausführung von Remotecode zu testen, erstellen Sie in Ihrem Editor eine neue Python-Datei namens hello.py. Wenn Sie mit Ihrem Remoteserver verbunden sind, werden alle über Visual Studio Code erstellten Dateien auf diesem Server gespeichert, nicht auf Ihrem lokalen Rechner.

Fügen Sie der Datei folgende Inhalte hinzu:

hello.py
print("Hello Sammy!")

Um das Programm auf Ihrem Server auszuführen, öffnen Sie in Visual Studio Code ein Terminal über das Navigationsmenü oder drücken Sie die Tastenfolge Strg+Umschalt+` . Da diese Terminalsitzung mit Ihrem Remoteserver verbunden ist, führen Sie im Terminal folgenden Befehl zur Ausführung Ihres hello.py-Programms aus:

  1. python3 hello.py

Die Ausgabe Ihres Programms wird angezeigt.

Ausführen Ihres Python-Skripts

Sie können die Datei auch über das Kontextmenü Debug ausführen, indem Sie Ohne Debugging ausführen wählen.

Anmerkung: Wenn Sie in Visual Studio Code Entwicklungserweiterungen installiert haben (wie die Python-Erweiterung), müssen Sie diese Erweiterungen auf Ihrem Server über den Extension Marketplace neu installieren. Falls Sie diese Plugins zuvor in Visual Studio Code installiert haben, zeigt der Marketplace, wenn Sie erneut nach ihnen suchen, Installieren in SSH: Hostname an. Achten Sie stets darauf, in welchem Entwicklungskontext Sie sich befinden, da Visual Studio Code dort Ihre Plugins installieren und Dateien erstellen wird. Wenn Sie versuchen, Code auszuführen, ohne diese Plugins installiert zu haben, werden in der unteren rechten Ecke des Bildschirms Fehlerdialogfelder angezeigt, in denen Sie zur Installation der Plugins auf Ihrem Remoteserver aufgefordert werden. Nachdem Sie sie installiert haben, müssen Sie Visual Studio Code wahrscheinlich neu laden. Wenn Sie es neu starten, wird es auf dem Remoteserver weiter ausgeführt, ohne dass Sie manuell eine neue Verbindung herstellen müssen.

Zusammenfassung

Sie haben Visual Studio Code nun zur Entwicklung auf einem Remoteserver mit SSH konfiguriert. Remoteausführung mit einer IDE bietet viele Vorteile, einschließlich der Fähigkeit, schnell zu testen, wie Ihr Code in verschiedenen Betriebssystemen und Hardwarespezifikationen ausgeführt wird. Solange Sie über eine Internetverbindung verfügen, können Sie sich mit Ihrem Server verbinden und über beliebige Computer mit Ihrem Code arbeiten. Außerdem können Sie mit einer Linux-Umgebung entwickeln, selbst wenn Sie Windows als primäres Betriebssystem verwenden.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar

Developer Advocate

Mason is currently a Sr. Developer Advocate at DigitalOcean who specializes in cloud infrastructure, distributed systems, and Python.



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

card icon
Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up
card icon
Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Learn more
card icon
Become a contributor

You get paid; we donate to tech nonprofits.

Learn more
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

Learn more ->
DigitalOcean Cloud Control Panel