TOC

Comment configurer la plate-forme Cloud IDE avec serveur de code sur DigitalOcean Kubernetes

L'auteur a sélectionné lesFree and Open Source Fund pour recevoir un don dans le cadre du programmeWrite for DOnations.

introduction

Avec la migration des outils de développement vers le cloud, la création et l’adoption de plates-formes cloud IDE (Integrated Development Environment) se développent. Les IDE en nuage permettent une collaboration en temps réel entre les équipes de développeurs dans un environnement de développement unifié qui minimise les incompatibilités et améliore la productivité. Accessible via les navigateurs Web, les IDE en nuage sont disponibles à partir de tout type d'appareil moderne. Un autre avantage d'un IDE dans le cloud est la possibilité de tirer parti de la puissance d'un cluster, qui peut largement dépasser la puissance de traitement d'un seul ordinateur de développement.

code-server estMicrosoft Visual Studio Code s'exécutant sur un serveur distant et accessible directement depuis votre navigateur. Visual Studio Code est un éditeur de code moderne avec prise en charge intégrée de Git, un débogueur de code, la complétion automatique intelligente et des fonctionnalités personnalisables et extensibles. Cela signifie que vous pouvez utiliser différents périphériques, exécuter différents systèmes d'exploitation et disposer en permanence d'un environnement de développement cohérent.

Dans ce didacticiel, vous allez configurer la plate-forme IDE cloud pour serveurs de code sur votre cluster DigitalOcean Kubernetes et l'exposer sur votre domaine, en toute sécurité, avec des certificats Let’s Encrypt. Au final, Microsoft Visual Studio Code s'exécutera sur votre cluster Kubernetes, disponible via HTTPS et protégé par un mot de passe.

Conditions préalables

  • Un cluster DigitalOcean Kubernetes avec votre connexion configurée commekubectl par défaut. Les instructions sur la façon de configurerkubectl sont affichées sous l'étapeConnect to your Cluster lorsque vous créez votre cluster. Pour créer un cluster Kubernetes sur DigitalOcean, consultezKubernetes Quickstart.

  • Le gestionnaire de paquets Helm installé sur votre ordinateur local et Tiller installé sur votre cluster. Pour ce faire, suivez les étapes 1 et 2 du didacticielHow To Install Software on Kubernetes Clusters with the Helm Package Manager.

  • Nginx Ingress Controller et Cert-Manager ont été installés sur votre cluster à l’aide de Helm afin d’exposer le serveur de code utilisant Ingress Resources. Pour ce faire, suivezHow to Set Up an Nginx Ingress on DigitalOcean Kubernetes Using Helm.

  • Un nom de domaine entièrement enregistré sur le serveur de code hôte, pointé vers l'équilibreur de charge utilisé par Nginx Ingress. Ce didacticiel utiliseracode-server.your_domain partout. Vous pouvez acheter un nom de domaine surNamecheap, en obtenir un gratuitement surFreenom ou utiliser le registraire de domaine de votre choix. Ce nom de domaine doit être différent de celui utilisé dans le tutoriel Comment créer une interface Nginx sur DigitalOcean Kubernetes.

[[step-1 -—- installation-and-exposing-code-server]] == Étape 1 - Installation et exposition du serveur de code

Dans cette section, vous allez installer le serveur de code sur votre cluster DigitalOcean Kubernetes et l’exposer sur votre domaine, à l’aide du contrôleur Nginx Ingress. Vous devrez également configurer un mot de passe pour l’admission.

Vous stockerez la configuration de déploiement sur votre machine locale, dans un fichier nommécode-server.yaml. Créez-le en utilisant la commande suivante: 

nano code-server.yaml

Ajoutez les lignes suivantes au fichier:

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"

Cette configuration définit un espace de noms, un déploiement, un service et une entrée. L'espace de noms est appelécode-server et sépare l'installation du serveur de code du reste de votre cluster. Le déploiement se compose d'une réplique de l'image Docker decodercom/code-server et d'une variable d'environnement nomméePASSWORD qui spécifie le mot de passe d'accès.

Le servicecode-server expose en interne le pod (créé dans le cadre du déploiement) au port80. L'entrée définie dans le fichier spécifie que le contrôleur d'entrée estnginx et que le domainecode-server.your_domain sera servi à partir du service.

N'oubliez pas de remplaceryour_password par votre mot de passe souhaité etcode-server.your_domain par votre domaine souhaité, pointé vers l'équilibreur de charge du contrôleur d'entrée Nginx.

Créez ensuite la configuration dans Kubernetes en exécutant la commande suivante: 

kubectl create -f code-server.yaml

Vous verrez le résultat suivant: 

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

Vous pouvez voir le pod de serveur de code devenir disponible en exécutant: 

kubectl get pods -w -n code-server

La sortie ressemblera à: 

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

Dès que le statut devientRunning, le serveur de code a terminé l'installation sur votre cluster.

Accédez à votre domaine dans votre navigateur. Vous verrez l'invite de connexion pour le serveur de code.

code-server login prompt

Entrez le mot de passe que vous avez défini danscode-server.yaml et appuyez surEnter IDE. Vous allez entrer dans le serveur de code et voir immédiatement son interface graphique d'édition.

code-server GUI

Vous avez installé le serveur de code sur votre cluster Kubernetes et l'avez mis à disposition sur votre domaine. Vous avez également vérifié que vous devez vous connecter avec un mot de passe. Vous allez maintenant le sécuriser avec des certificats gratuits Let’s Encrypt à l’aide de Cert-Manager.

[[step-2 -—- secururing-the-code-server-deployment]] == Étape 2 - Sécurisation du déploiement du serveur de code

Dans cette section, vous allez sécuriser l’installation de votre serveur de code en appliquant les certificats Let’s Encrypt à votre interface, que Cert-Manager créera automatiquement. Une fois cette étape terminée, l’installation de votre serveur de code sera accessible via HTTPS.

Ouvrezcode-server.yaml pour l'édition: 

nano code-server.yaml

Ajoutez les lignes en surbrillance à votre fichier, en veillant à remplacer le domaine exemple par le vôtre:

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
...

Tout d'abord, vous spécifiez que l'émetteur du cluster que cette entrée utilisera pour provisionner les certificats seraletsencrypt-prod, créé dans le cadre des conditions préalables. Ensuite, vous spécifiez les domaines qui seront sécurisés dans la sectiontls, ainsi que votre nom pour lesSecret qui les détiennent.

Appliquez les modifications à votre cluster Kubernetes en exécutant la commande suivante: 

kubectl apply -f code-server.yaml

Il est nécessaire d’attendre quelques minutes que Let’s Encrypt mette à disposition votre certificat. En attendant, vous pouvez suivre sa progression en consultant le résultat de la commande suivante: 

kubectl describe certificate codeserver-prod -n code-server

Quand il finira, la fin de la sortie ressemblera à ceci: 

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

Vous pouvez maintenant actualiser votre domaine dans votre navigateur. Le cadenas situé à gauche de la barre d’adresse de votre navigateur indique que la connexion est sécurisée.

Dans cette étape, vous avez configuré Ingress pour sécuriser le déploiement de votre serveur de code. Maintenant, vous pouvez revoir l'interface utilisateur du serveur de code.

[[step-3 -—- explore-the-code-server-interface]] == Étape 3 - Explorer l'interface de code-server

Dans cette section, vous explorerez certaines des fonctionnalités de l’interface serveur de code. Puisque code-server est un code Visual Studio s'exécutant dans le nuage, il possède la même interface que l'édition de bureau autonome.

Sur le côté gauche de l'EDI, une rangée verticale de six boutons ouvre les fonctionnalités les plus couramment utilisées dans un panneau latéral appelé barre d'activité.

code-server GUI - Sidepanel

Cette barre est personnalisable afin que vous puissiez déplacer ces vues dans un ordre différent ou les supprimer de la barre. Par défaut, la première vue ouvre le panneau de l’explorateur qui offre une navigation sous forme d’arbre dans la structure du projet. Vous pouvez gérer vos dossiers et fichiers ici, en les créant, les supprimant, les déplaçant et les renommant si nécessaire. La vue suivante donne accès à une fonctionnalité de recherche et de remplacement.

Ensuite, dans l'ordre par défaut, est votre vue des systèmes de contrôle de source, commeGit. Le code Visual Studio prend également en charge d'autres fournisseurs de contrôle de code source et vous pouvez trouver des instructions supplémentaires pour les flux de travail de contrôle de code source avec l'éditeur dans cedocumentation.

Git dropdown menu with version control actions

L'option de débogage de la barre d'activité fournit toutes les actions courantes de débogage dans le panneau. Visual Studio Code est livré avec une prise en charge intégrée du débogueur d'exécution deNode.js et de tout langage transpilable enJavascript. Pour les autres langues, vous pouvez installerextensions pour le débogueur requis. Vous pouvez enregistrer les configurations de débogage dans le fichierlaunch.json.

Debugger View with launch.json open

La vue finale dans la barre d'activité fournit un menu pour accéder aux extensions disponibles sur lesMarketplace.

code-server GUI - Tabs

La partie centrale de l'interface graphique est votre éditeur, que vous pouvez séparer par des onglets pour l'édition de votre code. Vous pouvez modifier votre vue d’édition en système de grille ou en fichiers côte à côte.

Editor Grid View

Après avoir créé un nouveau fichier via le menuFile, un fichier vide s’ouvrira dans un nouvel onglet, et une fois enregistré, le nom du fichier sera visible dans le panneau latéral de l’explorateur. La création de dossiers peut être effectuée en cliquant avec le bouton droit sur la barre latérale de l'Explorateur et en appuyant surNew Folder. Vous pouvez développer un dossier en cliquant sur son nom, puis en glissant-déposant des fichiers et des dossiers dans les parties supérieures de la hiérarchie pour les déplacer vers un nouvel emplacement.

code-server GUI - New Folder

Vous pouvez accéder à un terminal en appuyant surCTRL+SHIFT+\, ou en appuyant surTerminal dans le menu supérieur et en sélectionnantNew Terminal. Le terminal s’ouvrira dans un panneau inférieur et son répertoire de travail sera défini sur l’espace de travail du projet, qui contient les fichiers et les dossiers affichés dans le panneau latéral de l’explorateur.

Vous avez exploré une vue d'ensemble de haut niveau de l'interface serveur de code et passé en revue certaines des fonctionnalités les plus couramment utilisées.

Conclusion

Vous avez maintenant un serveur de code, un IDE cloud polyvalent, installé sur votre cluster DigitalOcean Kubernetes. Vous pouvez travailler sur votre code source et vos documents individuellement ou collaborer avec votre équipe. L'exécution d'un IDE cloud sur votre cluster offre plus de puissance pour les tests, le téléchargement et un calcul plus approfondi ou rigoureux. Pour plus d'informations, consultez lesVisual Studio Code documentation sur les fonctionnalités supplémentaires et les instructions détaillées sur les autres composants du serveur de code.

Related