L'une des choses les plus difficiles pour les développeurs est de démarrer un projet déjà en cours.

Il arrive souvent que les exigences d'un nouveau projet nous obligent à modifier les versions des SDK et les outils que nous avons installés localement pour déboguer l'environnement, ce qui nous fait perdre des jours jusqu'à ce que tout fonctionne comme prévu.

Si l'on considère les versions qui sont en phase de bêta ou de prévisualisation, les choses se compliquent encore plus. Pour éviter que cela ne se produise, je voudrais vous présenter Espaces de codes GitHub, qui vous permet non seulement de générer l'environnement de développement dont votre application a besoin dans un récipient mais permet aussi de développer n'importe où et depuis n'importe quel appareil.

Commençons!

Qu'est-ce que les espaces de code GitHub ?

Les espaces de code Github sont un environnement cloud accessible depuis un navigateur et disposant de toutes les fonctionnalités nécessaires au développement de code dédié.

Vous avez peut-être vu l'annonce de GitHub, chaque fois que vous êtes dans un dépôt et que vous appuyez sur la « touche » du point. UNE éditeur web ouvrira avec le référentiel en question.

Cependant, vous ne pourrez pas exécuter le terminal car il s'agit simplement d'un éditeur Web et il n'y a pas de machine principale. Parfois, cela peut être plus que suffisant, mais imaginez que vous devez exécuter un environnement ou compiler un projet mais vous n'avez pas sous la main un système répondant aux besoins (un iPad, une Surface Go, etc.).

GitHub Codespaces résout ce problème en vous permettant d'exécuter l'IDE dans le cloud pour qu'il fonctionne comme si vous utilisiez un système local et cela aussi avec votre configuration spécifiée.

Remarque : Cette fonctionnalité n'est disponible que sur Comptes d'équipe et d'entreprise.

Exemple de code

Pour cet exemple, je vais utiliser un très simple Node.js demande:

const express = require('express');
const app = express();
const port = 8080;
app.use(express.static('public'));
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
})

Le code ci-dessus a la structure suivante :

Structure du code

Vous pouvez lancer ce projet localement sans problème, à condition d'avoir installé Node.js, git et les extensions VS Code utiles pour un projet dans ce langage. Vous pouvez également utiliser des outils comme Nodemon, qui actualiseront automatiquement l'application.

Le problème survient lorsque vous travaillez non seulement avec cette configuration mais que vous en utilisez de nombreuses autres telles que le développement avec .NET Core, Python, Docker, ou Kubernetes et cela vous oblige à installer plus d'outils et d'extensions dont vous n'avez pas toujours besoin, et ils peuvent finir par nuire aux performances de votre environnement de développement.

Le problème ne se limite pas à votre propre performance. Si quelqu'un d'autre rejoint l'équipe et a besoin de préparer son système avec les outils et les frameworks nécessaires pour démarrer l'application, il perdra également plusieurs heures, ce qui nuira aux performances globales de l'équipe (cela sera pire si vous êtes travailler avec différents systèmes d'exploitation).

Travailler avec des conteneurs distants

Visual Studio Code propose une extension appelée Conteneurs distants, ou Dev Containers, qui vous permet de générer l'environnement de développement dont votre application a besoin dans un conteneur. De cette façon, tous les développeurs de votre équipe qui travaillent sur un projet auront automatiquement le même environnement de développement.

Cela rendra l'expérience de démarrage de votre projet aussi agile que possible et aussi si vous êtes celui qui a défini l'environnement, vous pouvez séparer plusieurs environnements de travail par projet avec différentes configurations sur la même machine. Cool hein?

Comment puis-je commencer?

Pour utiliser cette fonctionnalité, vous devez avoir Docker installé sur votre machine puisque les conteneurs fonctionneront dessus. Il est également nécessaire d'installer le Conteneurs distants extension, qui nous aidera à construire l'environnement de développement.

La première chose que vous devez faire est de créer un dossier appelé .devcontainer dans le répertoire racine. C'est celui que l'extension va tenter d'identifier afin de savoir si elle a une configuration pour monter un conteneur avec les indications qu'il contient.

Dans celui-ci, vous devez avoir au moins un fichier appelé devcontainer.json qui est celui qui aura la configuration de l'environnement.

Pour cet exemple, j'ai utilisé ce qui suit :

{
    "name": "dev-demo",
    "dockerFile": "Dockerfile",
    "forwardPorts": [
        8080
    ],
    "settings": {
        "workbench.colorTheme": "Visual Studio Light"
    },    
    "containerEnv": {
        "NODE_ENV": "development",
    },
    "extensions": [
        "coenraads.bracket-pair-colorizer-2",
        "eg2.vscode-npm-script",
        "christian-kohler.npm-intellisense",
        "dbaeumer.vscode-eslint",
        "streetsidesoftware.code-spell-checker",
        "formulahendry.auto-close-tag",
        "mikestead.dotenv",
        "christian-kohler.path-intellisense",
        "davidanson.vscode-markdownlint",
        "pkief.material-icon-theme",
        "humao.rest-client"
    ],
	"postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh",
    "postAttachCommand": "nodemon server.js"
}

Comme vous pouvez le voir, c'est un JSON avec différentes rubriques :

  • prénom: c'est le nom qu'aura le conteneur dev. Idéalement, il devrait s'agir d'un nom descriptif.
  • dockerFichier: il sert à indiquer le nom du Dockerfile que nous allons utiliser pour créer l'environnement. Dans mon cas, dans le même dossier .devcontainer, j'en ai un comme celui-ci :
FROM node:12.16.1-alpine
WORKDIR /code
RUN apk update && apk upgrade \
    && apk add git bash curl \
    && npm install -g nodemon
COPY . .

Dans cet exemple, j'utilise le nœud : 12.16.1-image alpine simplement pour démontrer que la configuration que j'ai dans cet environnement de développement est différente de celle que j'ai localement, où j'utilise la version 14 de Node.js. Par contre, j'installe quelques utilitaires comme git, bash et cURL, en plus du module Nodemon que j'utiliserai lors du développement.

  • vers l'avantPorts: ce sont les ports que mon application utilise pour que je puisse y accéder depuis la machine locale et donc le débogage est facile.
  • réglages: pour cet exemple, et lorsque vous avez plusieurs environnements, c'est super utile, j'ai modifié le thème Visual Studio Code afin qu'il soit évident que je ne suis pas dans l'environnement local dans cette instance de l'IDE. J'utilise généralement la version sombre et ici j'ai défini la version claire.
  • conteneurEnv: J'ai également ajouté une variable d'environnement, qui est généralement très utile lors du développement.
  • postCréerCommande : J'ai ajouté cette propriété pour que vous puissiez voir qu'il est possible d'exécuter des commandes ou des scripts pendant le cycle de vie du conteneur de développement. Dans ce cas, ce script sera lancé lorsque la création sera terminée. Le contenu de celui-ci est :
    #!/bin/bash
    # this runs in background after UI is available
    #Remove node_modules folder
    echo "Remove node_modules folder first"
    rm -rf node_modules
    #Install npm dependencies
    echo "Install dependencies"
    npm install
  • postAttachCommand : Enfin, j'ai ajouté la commande nodemon server.js à cette propriété afin que chaque fois que vous vous connectez au conteneur, il lève par défaut l'application.

Il y a beaucoup plus d'options à ajouter dans le fichier devcontainer.json, ce n'est qu'un très petit exemple de ce que vous pouvez faire.

Maintenant que vous savez tout ce qu'il y a dans ce dossier et comment fonctionne la configuration définie, comment la lancer ?

Le moyen le plus simple est d'utiliser ce bouton ici :

Sélectionnez le Rouvrir dans un conteneur et le processus commencera à créer le conteneur et votre IDE personnalisé. Le résultat devrait ressembler à ce qui suit :

Au final, le résultat, dans ce cas, sera une fenêtre Visual Studio Code avec le thème Light, avec une version spécifique de Node.js, plusieurs extensions choisies pour développer plus confortablement, et mon application déjà lancée et exposée par le port 8080.

Et le meilleur, c'est que cette configuration est versionnée dans le référentiel du projet afin que tout membre puisse l'utiliser. Tout simplement spectaculaire !

Maintenant que nous avons vu tout cela, et que nous avons compris toutes les étapes, supprimez le dossier .devcontainer, sélectionnez à nouveau l'icône en bas à gauche, sélectionnez Rouvrir dans le conteneur à nouveau et vous verrez que cette fois il vous permet de choisir entre plusieurs configurations pré-construites.

Vous n'avez pas besoin de recommencer votre configuration à partir de zéro, et vous savez également déjà où vous devez toucher pour finir de lui donner votre touche de nerd.

Retour aux Espaces Github

Nous allons maintenant utiliser le même projet que nous avons utilisé dans Visual Studio Remote Containers, mais cette fois avec GitHub. Une fois cela fait dans le Code section, vous aurez une nouvelle option appelée Espaces de code :

Ici, vous pouvez sélectionner le type de machine dont vous avez besoin pour travailler avec ce référentiel spécifique :

Choisissez la taille de la machine

Une fois choisi, le processus de création commencera. Il utilisera la configuration du dossier .devcontainer, celui que nous avons créé pour les conteneurs distants, pour configurer l'environnement.

Une fois le processus terminé, vous verrez qu'un code Visual Studio apparaîtra au format Web avec l'application en cours d'exécution, de la même manière que nous l'avons fait sur notre système local.

Derniers mots 👩‍💻

Comme vous pouvez le voir dans l'exemple ci-dessus, Github Codespaces using Remote Conteneurs est une excellente solution à notre problème de réplication de notre environnement de configuration et de développement et ils sont également un excellent moyen d'améliorer les performances de notre équipe.