TOC

So richten Sie die Code-Server-Cloud-IDE-Plattform auf DigitalOcean-Kubernetes ein

Der Autor hat dieFree and Open Source Fundausgewählt, um eine Spende im Rahmen desWrite for DOnations-Programms zu erhalten.

Einführung

Mit der Umstellung der Entwicklertools auf die Cloud nimmt die Erstellung und Einführung von Cloud-IDE-Plattformen (Integrated Development Environment) zu. Mithilfe von Cloud-IDEs können Entwicklerteams in Echtzeit in einer einheitlichen Entwicklungsumgebung zusammenarbeiten, die Inkompatibilitäten minimiert und die Produktivität steigert. Cloud-IDEs, auf die über Webbrowser zugegriffen werden kann, sind auf allen modernen Geräten verfügbar. Ein weiterer Vorteil einer Cloud-IDE ist die Möglichkeit, die Leistung eines Clusters zu nutzen, was die Verarbeitungsleistung eines einzelnen Entwicklungscomputers erheblich übersteigen kann.

code-server istMicrosoft Visual Studio Code, das auf einem Remote-Server ausgeführt wird und direkt über Ihren Browser aufgerufen werden kann. Visual Studio Code ist ein moderner Code-Editor mit integrierter Git-Unterstützung, einem Code-Debugger, intelligenter Autovervollständigung sowie anpassbaren und erweiterbaren Funktionen. Dies bedeutet, dass Sie verschiedene Geräte verwenden können, verschiedene Betriebssysteme ausführen und immer eine konsistente Entwicklungsumgebung zur Hand haben.

In diesem Lernprogramm richten Sie die Code-Server-Cloud-IDE-Plattform in Ihrem DigitalOcean Kubernetes-Cluster ein und legen sie in Ihrer Domäne offen, die mit Let's Encrypt-Zertifikaten geschützt ist. Am Ende wird Microsoft Visual Studio Code auf Ihrem Kubernetes-Cluster ausgeführt, der über HTTPS verfügbar und durch ein Kennwort geschützt ist.

Voraussetzungen

  • Ein DigitalOcean Kubernetes-Cluster, dessen Verbindung als Standardwert fürkubectlkonfiguriert ist. Anweisungen zum Konfigurieren vonkubectl finden Sie beim Erstellen Ihres Clusters unter dem SchrittConnect to your Cluster. Informationen zum Erstellen eines Kubernetes-Clusters in DigitalOcean finden Sie unterKubernetes Quickstart.

  • Der Helm-Paket-Manager ist auf Ihrem lokalen Computer installiert, und Tiller ist auf Ihrem Cluster installiert. Führen Sie dazu die Schritte 1 und 2 des LernprogrammsHow To Install Software on Kubernetes Clusters with the Helm Package Manageraus.

  • Der Nginx Ingress Controller und Cert-Manager, die mithilfe von Helm auf Ihrem Cluster installiert wurden, um Code-Server mithilfe von Ingress-Ressourcen verfügbar zu machen. Folgen Sie dazuHow to Set Up an Nginx Ingress on DigitalOcean Kubernetes Using Helm.

  • Ein vollständig registrierter Domänenname für den Host-Code-Server, der auf den vom Nginx Ingress verwendeten Load Balancer verweist. In diesem Tutorial werden durchgehendcode-server.your_domain verwendet. Sie können einen Domain-Namen fürNamecheap kaufen, einen fürFreenom kostenlos erhalten oder den Domain-Registrar Ihrer Wahl verwenden. Dieser Domänenname muss sich von dem Namen unterscheiden, der im Lernprogramm für die Einrichtung eines Nginx Ingress für DigitalOcean Kubernetes verwendet wird.

[[Schritt 1 - Installieren und Freigeben des Codeservers]] == Schritt 1 - Installieren und Freigeben des Codeservers

In diesem Abschnitt installieren Sie den Code-Server in Ihrem DigitalOcean Kubernetes-Cluster und machen ihn mit dem Nginx Ingress-Controller in Ihrer Domäne verfügbar. Sie werden auch ein Passwort für die Zulassung einrichten.

Sie speichern die Bereitstellungskonfiguration auf Ihrem lokalen Computer in einer Datei mit dem Namencode-server.yaml. Erstellen Sie es mit dem folgenden Befehl: 

nano code-server.yaml

Fügen Sie der Datei die folgenden Zeilen hinzu:

code-server.yaml

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    kubernetes.io/ingress.class: nginx
spec:
  rules:
  - host: code-server.your_domain
    http:
      paths:
      - backend:
          serviceName: code-server
          servicePort: 80
---
apiVersion: v1
kind: Service
metadata:
 name: code-server
 namespace: code-server
spec:
 ports:
 - port: 80
   targetPort: 8443
 selector:
   app: code-server
---
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  labels:
    app: code-server
  name: code-server
  namespace: code-server
spec:
  selector:
    matchLabels:
      app: code-server
  replicas: 1
  template:
    metadata:
      labels:
        app: code-server
    spec:
      containers:
      - image: codercom/code-server
        imagePullPolicy: Always
        name: code-server
        args: ["--allow-http"]
        ports:
        - containerPort: 8443
        env:
        - name: PASSWORD
          value: "your_password"

Diese Konfiguration definiert einen Namespace, eine Bereitstellung, einen Service und einen Ingress. Der Namespace heißtcode-server und trennt die Code-Server-Installation vom Rest Ihres Clusters. Die Bereitstellung besteht aus einem Replikat des Docker-Images voncodercom/code-serverund einer Umgebungsvariablen mit dem NamenPASSWORD, die das Kennwort für den Zugriff angibt.

Dercode-server-Dienst macht den Pod (der als Teil der Bereitstellung erstellt wurde) intern an Port80 verfügbar. Der in der Datei definierte Ingress gibt an, dass der Ingress Controllernginx ist und dass die Domänecode-server.your_domain vom Service bereitgestellt wird.

Denken Sie daran,your_password durch Ihr gewünschtes Passwort undcode-server.your_domain durch Ihre gewünschte Domain zu ersetzen, die auf den Load Balancer des Nginx Ingress Controllers verweist.

Erstellen Sie dann die Konfiguration in Kubernetes, indem Sie den folgenden Befehl ausführen: 

kubectl create -f code-server.yaml

Sie sehen die folgende Ausgabe: 

Outputnamespace/code-server created
ingress.extensions/code-server created
service/code-server created
deployment.extensions/code-server created

Sie können sehen, wie der Code-Server-Pod verfügbar wird, indem Sie Folgendes ausführen: 

kubectl get pods -w -n code-server

Die Ausgabe sieht folgendermaßen aus: 

OutputNAME                          READY   STATUS              RESTARTS   AGE
code-server-f85d9bfc9-j7hq6   0/1     ContainerCreating   0          1m

Sobald der StatusRunning lautet, ist die Installation des Codeservers in Ihrem Cluster abgeschlossen.

Navigieren Sie in Ihrem Browser zu Ihrer Domain. Sie sehen die Anmeldeaufforderung für den Code-Server.

code-server login prompt

Geben Sie das incode-server.yaml festgelegte Passwort ein und drücken SieEnter IDE. Sie geben Code-Server ein und sehen sofort die Editor-GUI.

code-server GUI

Sie haben den Code-Server in Ihrem Kubernetes-Cluster installiert und in Ihrer Domain verfügbar gemacht. Sie haben außerdem überprüft, dass Sie sich mit einem Kennwort anmelden müssen. Jetzt werden Sie fortfahren, um es mit kostenlosen Let’s Encrypt-Zertifikaten mit Cert-Manager zu sichern.

[[Schritt 2 - Sichern der Code-Server-Bereitstellung]] == Schritt 2 - Sichern der Code-Server-Bereitstellung

In diesem Abschnitt sichern Sie Ihre Code-Server-Installation, indem Sie Let's Encrypt-Zertifikate auf Ihren Ingress anwenden, den Cert-Manager automatisch erstellt. Nach Abschluss dieses Schritts können Sie über HTTPS auf Ihre Code-Server-Installation zugreifen.

Öffnen Siecode-server.yaml zum Bearbeiten: 

nano code-server.yaml

Fügen Sie die markierten Zeilen zu Ihrer Datei hinzu, und stellen Sie sicher, dass Sie die Beispieldomäne durch Ihre eigene ersetzen:

code-server.yaml

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    kubernetes.io/ingress.class: nginx
    certmanager.k8s.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
  - hosts:
    - code-server.your_domain
    secretName: codeserver-prod
  rules:
  - host: code-server.your_domain
    http:
      paths:
      - backend:
          serviceName: code-server
          servicePort: 80
...

Zunächst geben Sie an, dass der Cluster-Aussteller, mit dem dieser Ingress Zertifikate bereitstellt,letsencrypt-prod ist und als Teil der Voraussetzungen erstellt wird. Anschließend geben Sie im Abschnitttls die Domänen an, die gesichert werden sollen, sowie Ihren Namen für dieSecret, in denen sie gespeichert sind.

Wenden Sie die Änderungen auf Ihren Kubernetes-Cluster an, indem Sie den folgenden Befehl ausführen: 

kubectl apply -f code-server.yaml

Sie müssen einige Minuten warten, bis Let's Encrypt Ihr Zertifikat bereitgestellt hat. In der Zwischenzeit können Sie den Fortschritt verfolgen, indem Sie sich die Ausgabe des folgenden Befehls ansehen: 

kubectl describe certificate codeserver-prod -n code-server

Nach Abschluss der Ausgabe sieht das Ende der Ausgabe folgendermaßen aus: 

OutputEvents:
  Type    Reason              Age    From          Message
  ----    ------              ----   ----          -------
  Normal  Generated           2m49s  cert-manager  Generated new private key
  Normal  GenerateSelfSigned  2m49s  cert-manager  Generated temporary self signed certificate
  Normal  OrderCreated        2m49s  cert-manager  Created Order resource "codeserver-prod-4279678953"
  Normal  OrderComplete       2m14s  cert-manager  Order "codeserver-prod-4279678953" completed successfully
  Normal  CertIssued          2m14s  cert-manager  Certificate issued successfully

Sie können Ihre Domain jetzt in Ihrem Browser aktualisieren. Sie sehen das Vorhängeschloss links neben der Adressleiste in Ihrem Browser, um anzuzeigen, dass die Verbindung sicher ist.

In diesem Schritt haben Sie Ingress so konfiguriert, dass Ihre Code-Server-Bereitstellung geschützt ist. Jetzt können Sie die Code-Server-Benutzeroberfläche überprüfen.

[[Schritt 3 - Erkunden der Code-Server-Schnittstelle]] == Schritt 3 - Erkunden der Code-Server-Schnittstelle

In diesem Abschnitt werden einige Funktionen der Code-Server-Schnittstelle erläutert. Da der Code-Server Visual Studio Code ist, der in der Cloud ausgeführt wird, verfügt er über dieselbe Benutzeroberfläche wie die Standalone-Desktop-Edition.

Auf der linken Seite der IDE befindet sich eine vertikale Reihe mit sechs Schaltflächen, die die am häufigsten verwendeten Funktionen in einem als Aktivitätsleiste bezeichneten Seitenbereich öffnen.

code-server GUI - Sidepanel

Diese Leiste ist anpassbar, sodass Sie diese Ansichten in eine andere Reihenfolge verschieben oder aus der Leiste entfernen können. Standardmäßig wird in der ersten Ansicht das Explorer-Bedienfeld geöffnet, das eine baumartige Navigation durch die Projektstruktur bietet. Hier können Sie Ihre Ordner und Dateien verwalten - nach Bedarf erstellen, löschen, verschieben und umbenennen. Die nächste Ansicht bietet Zugriff auf eine Such- und Ersetzungsfunktion.

Anschließend sehen Sie in der Standardreihenfolge die Quellcodeverwaltungssysteme wieGit. Visual Studio-Code unterstützt auch andere Versionsverwaltungsanbieter. Weitere Anweisungen für Versionsverwaltungs-Workflows mit dem Editor finden Sie indocumentation.

Git dropdown menu with version control actions

Die Debugger-Option in der Aktivitätsleiste bietet alle gängigen Aktionen zum Debuggen in der Kontrollleiste. Visual Studio Code bietet integrierte Unterstützung für den Laufzeit-Debugger vonNode.jsund jede Sprache, die inJavascript transpiliert wird. Für andere Sprachen können Sieextensions für den erforderlichen Debugger installieren. Sie können Debugging-Konfigurationen in der Dateilaunch.jsonpeichern.

Debugger View with launch.json open

Die endgültige Ansicht in der Aktivitätsleiste bietet ein Menü für den Zugriff auf verfügbare Erweiterungen fürMarketplace.

code-server GUI - Tabs

Der zentrale Teil der Benutzeroberfläche ist Ihr Editor, den Sie für die Codebearbeitung durch Registerkarten trennen können. Sie können die Bearbeitungsansicht in ein Rastersystem oder in Dateien nebeneinander ändern.

Editor Grid View

Nach dem Erstellen einer neuen Datei über das MenüFilewird eine leere Datei auf einer neuen Registerkarte geöffnet. Nach dem Speichern wird der Dateiname im Explorer-Seitenbereich angezeigt. Das Erstellen von Ordnern kann durch Klicken mit der rechten Maustaste auf die Explorer-Seitenleiste und Drücken vonNew Folder erfolgen. Sie können einen Ordner erweitern, indem Sie auf seinen Namen klicken und Dateien und Ordner in die oberen Teile der Hierarchie ziehen und ablegen, um sie an einen neuen Ort zu verschieben.

code-server GUI - New Folder

Sie können auf ein Terminal zugreifen, indem SieCTRL+SHIFT+\ drücken oderTerminal im oberen Menü drücken undNew Terminal auswählen. Das Terminal wird in einem unteren Bereich geöffnet und sein Arbeitsverzeichnis wird auf den Arbeitsbereich des Projekts festgelegt, der die im Explorer-Seitenbereich angezeigten Dateien und Ordner enthält.

Sie haben einen allgemeinen Überblick über die Code-Server-Oberfläche erhalten und einige der am häufigsten verwendeten Funktionen überprüft.

Fazit

Sie haben jetzt Code-Server, eine vielseitige Cloud-IDE, auf Ihrem DigitalOcean Kubernetes-Cluster installiert. Sie können Ihren Quellcode und Ihre Dokumente damit individuell bearbeiten oder mit Ihrem Team zusammenarbeiten. Das Ausführen einer Cloud-IDE auf Ihrem Cluster bietet mehr Leistung für das Testen, Herunterladen und gründlichere oder strengere Berechnungen. Weitere Informationen finden Sie inVisual Studio Code documentation zu zusätzlichen Funktionen und ausführlichen Anweisungen zu anderen Komponenten des Code-Servers.

Related