Der Workflow mit Visual Studio (VS) Code

Editieren und Programmieren von Webseiten mit UNIX-Editoren ist zwar möglich, aber mühevoll und fehleranfällig. Ich benutze daher folgenden Workflow:

1. Das Original der Website wird lokal auf dem PC mit dem EditorVisual Studio Codeentwickelt und gepflegt.
2. Die örtlichen Dateien werden entweder direkt durch "Herüberziehen" vom örtlichen Editorfenster ins remote Editorfenster kopiert, oder
3. über das gcloud-Befehlszeilentool mit dem Programmscpauf die virtuelle Maschine kopiert.

Visual Studio Code (VS Code) ist ein freier Quelltext-Editor von Microsoft. Er ist plattformübergreifend für die Betriebssysteme Windows, macOS und Linux verfügbar. Ich habe schon mit einigen freien Editoren gearbeitet, VS Code ist für das Programmieren mit JavaScript und React für mich der beste und ich kann ihn guten Gewissens weiterempfehlen. Den Editor können Siehier downloaden.

Ein Thema bei diesem Editor sind die Erweiterungen. Da ich überwiegend mit JavaScript, React und React-Native arbeite, habe ich folgende 19 Erweiterungen installiert, auf die ich, bis auf die Remote-SSH-Erweiterungen, nicht weiter eingehen möchte.

1. Atom One Dark Theme
2. Auto Close Tag
3. Auto Import
4. Babel JavaScript
5. Color Highlight
6. Color Picker
7. ES7 React/Redux/GraphQL/React-Native snippets
8. ESLint
9. Guides
10. indent-rainbow
11. Material Icon Theme
12. Path Intellisense
13. Prettier - Code formatter
14. Quokka.js
15. Rainbow Brackets
16. React Native Tools
17. Remote - SSH
18. Remote - SSH: Editing Configuration Files
19. Theme - Oceanic Next

Um über VS Code Zugriff auf die VM-Instanz zu erhalten, brauchen Sie eine private und öffentliche SSH-Schlüsseldatei. Wie Sie diese Dateien zeugen können isthier unter "Neuen SSH-Schlüssel erstellen"beschrieben.

Bei der Schlüsselerstellung müssen Sie ihren Benutzernamen in der virtuellen Maschine und ein frei gewähltes Passwort angeben. Ihr Benutzernamen in der VM wird als Prompt im SSH-Browserfenster angezeigt, im untenstehenden Bild ist er "anton_betonl@web-node-server". Die Adresse, die hinter dem @ angegeben ist, scheint egal zu sein, funktioniert hat der Verbindungsaufbau auch mit dem Benutzernamen "anton_beton@gmail.com". Das Passwort wird bei jedem neuen Verbindungsaufbau zur virtuellen Maschine abgefragt.

Die Schlüssel, die Sie erzeugen sollten in etwa wie folgt aussehen:

Den öffentlichen Schlüssel müssen wir der VM bekanntgeben. Wir wählen dazu in der GC Konsole die Menüpunkte Compute Engine, Metadaten und dort den Reiter SSH-Schlüssel. Weiter klicken wir auf Bearbeiten, Zeile hinzufügen, kopieren in das sich öffnende Feld den öffentlichen Schlüssel und speichern das Ganze ab. Das war's.

Sie haben VS Code mit den ErweiterungenRemote - SSHundRemote - SSH: Editing Configuration Filesinstalliert.

Bevor wir die Verbindung zur virtuellen Maschine herstellen können, müssen wir diese in die Konfigurationsdatei der VS Code Erweiterung eintragen. Hierzu klicken wir auf das Symbol des Remote Window, ganz unten links im VS Code Fenster.

Es öffnet sich in der oberen Zeile ein Menü aus dem wir den Punkt "Remote-SSH: Open Configuration-File" wählwen. Dann werden einige Dateien angezeigt, in die die Konfiguration geschrieben werden kann. Die Dateinamen und -orte sind vermutlich betriebssystemabhängig, ich wähle immer den obersten.

In die Konfigurationsdatei tragen Sie folgende Daten ein:

Um eine Verbindung mit der virtuellen Maschine herzustellen klicken wir in der linken Seitenleiste von VS Code auf den Remote Explorer. Es öffnet sich das Fenster der SSH Targets. Dort finden wir den gerade in der Konfigurationsdatei eingetragenen Server. Wir klicken mit der rechten Maustaste auf die Adresse und wählen "Connect to Host in New Window". Es öffnet sich ein neues Fenster und ganz oben erscheint eine Eingabezeile für das Passwort, das wir bei der Schlüsselerstellung haben.

Nach der Eingabe des Passwortes dauert es eine Weile, dann sind wir mit der virtuellen Maschine verbunden. Das kann man wieder in der untersten Zeile des Editors erkennen. Durch Klicken auf "Open Folder" im VS-Code Hauptmenu werden die Verzeichnisse vom Homeverzeichnisses der virtuellen Maschine angezeigt. Wir wählen das früher erstellte Verzeichnis helloWorld und können jetzt die Datei app.js direkt auf der virtuellen Maschine editieren. Leider ist die Verbindung nicht stabil genug. Ich editiere lieber örtlich und kopiere die Dateien zum Server.
Zum Kopieren können wir die Dateien einfach anklicken und in das Explorer Fenster des VS Code Fensters der virtuellen Maschine ziehen, sogar aus dem örtlichen VS-Code Fenster.

Zusätzliche Hinweise für die für die Einrichtung und Benutzung gibt eshier.

Google bietet für seine Cloud ein Software Development Kit (SDK) an, mit dem Ressourcen und Anwendungen in der Cloud verwaltet werden können. Wir wollen von diesen Tools lediglich das Befehlszeilen Tool gcloud benutzen, um Dateien vom PC zum Server zu kopieren. Die Installation des SDK und die weiteren Schritte sindhierfür verschiedene Plattformen beschrieben. Nach der Installation müssen wir "gcloud init" in einem Kommandofenster (Terminal etc.) auf dem PC ausführen.

Je nachdem, wie der Zugriff auf die Google Cloud bereits autorisiert ist, werden Sie entweder aufgefordert, sich über einen Webbrowser anzumelden und den Zugriff für ihr Konto zu gewähren oder ein vorhandenes Konto auszuwählen. Wählen Sie anschließend das Google Cloud-Projekt aus (in unserem Fall: web-node-server), wenn Sie dazu aufgefordert werden. Wenn nur ein einziges Projekt existiert, wählt gcloud init dieses aus. Das Kommando:

listet die bestehenden Konfigurationen auf. Die Antwort sollte wie folgt aussehen.

Zum Testen legen wir in einem Verzeichnis 2 Dateien an und geben in einem Kommandofenster (Terminal etc.) folgende Kommandofolge ein:

Hinweise:

• Das Verzeichnis, in das kopiert wird, muss vorhanden sein, vorhandene Dateien werden überschreiben.
• Das Kommando für rekursives (also mit Unterverzeichnissen) Kopieren ist:
  gcloud compute scp --recurse Pfad-zu-den-Dateien/* xxxx.yyyy@web-node-server:~/helloWorld/
  
• Wenn nur der Verzeichnisinhalt (ohne Unterverzeichnisse) kopiert werden soll:
  gcloud compute scp Pfad-zu-den-Dateien/* xxxx.yyyy@web-node-server:~/helloWorld/