A laptop with some code on the screen and a mouse cursor.
Agence web » Actualités du digital » Comment j'ai construit la plate-forme de programmation parfaite en moins de 10 minutes

Comment j'ai construit la plate-forme de programmation parfaite en moins de 10 minutes

En tant que codeur expérimenté ou nouveau venu apprenant votre premier langage de programmation, la configuration de votre environnement de développement peut être délicate. Laissez-moi vous montrer comment j'ai mis en place la plate-forme de programmation Linux parfaite à l'aide de VSCode et de conteneurs.

Comment ça marche ?

Ce que nous allons créer est un système dans lequel tous les éléments nécessaires pour utiliser et exécuter votre code, comme les compilateurs, les machines virtuelles Java et les bibliothèques spécialisées, sont installés dans un conteneur isolé où ils ne peuvent pas nuire au reste de votre code. système. Vous pourrez également créer des conteneurs spécifiques pour différents langages de programmation, ou même pour différentes versions du même langage, sans vous soucier des packages en conflit ou des problèmes de stabilité du système.

Suivez-nous et vous aurez votre propre plate-forme de programmation à toute épreuve en quelques minutes.

Installer Docker ou Podman

Afin de configurer des conteneurs, vous devez avoir Docker ou Podman installé sur votre système. Les deux applications font la même chose de base, vous permettant de créer et de gérer des conteneurs. Dans ce cas, VSCode se chargera de créer le(s) conteneur(s) et vous pourrez utiliser Docker Desktop ou Podman Desktop pour gérer toutes les tâches manuelles de gestion des conteneurs qui pourraient être nécessaires ultérieurement.

Dois-je utiliser Docker ou Podman ?

Les deux systèmes de conteneurs sont pratiquement identiques du point de vue de l'utilisateur. La principale différence est que si votre distribution Linux est un dérivé de Red Hat, comme le très populaire Fedora Workstation ou CentOS, Podman est normalement installé par défaut, ce qui sera donc pris en charge pour vous.

Vous pouvez vérifier si vous avez déjà installé l'un ou l'autre en tapant docker ou podman à une invite du terminal. Si vous recevez un message indiquant que la commande est introuvable, cela signifie qu'elle n'est pas installée. Sinon, il devrait renvoyer une liste d’options et de commutateurs pouvant être utilisés.

Si Podman est déjà installé, par souci de simplicité, vous devez l'utiliser. Si aucun des deux n'est déjà installé, Docker vous offrira une compatibilité maximale avec l'écosystème de conteneurs existant.

Installer et configurer VSCode

Ensuite, vous devrez télécharger et installer Visual Studio Code, si ce n'est pas déjà fait. Vous trouverez des instructions faciles à suivre sur la page de téléchargement pour toutes les distributions Linux les plus courantes.

Une fois installé, vous devrez installer deux extensions pour vous aider à créer et gérer les conteneurs qui répondront aux besoins de votre environnement de développement. Pour accéder au gestionnaire d'extensions dans VSCode, appuyez sur Ctrl+Shift+X. Vous devriez alors voir une liste des extensions installées et recommandées dans le volet sur le côté gauche de l'écran.

Dans la zone de recherche en haut de ce volet, entrez « conteneur de développement » et vous devriez voir deux extensions en haut de la liste appelées Conteneurs de développement et Développement à distance. Cliquez sur le bouton bleu « Installer » pour chacun d’eux. Cela ne devrait prendre que quelques instants à Code pour les télécharger et les installer.

Si vous utilisez Podman, vous devrez apporter une modification rapide à la configuration par défaut pour terminer. Si vous utilisez Docker, vous pouvez ignorer cette étape et passer à la section suivante.

Tout d’abord, appuyez sur Ctrl+Shift+P pour ouvrir la palette de commandes. Ensuite, dans la zone de recherche qui apparaît en haut, saisissez « Dev » et vous devriez voir une liste d'éléments commençant par les mots Dev Containers. Cliquez sur « Conteneurs de développement : paramètres ».

Cela ouvrira les paramètres de l'extension Dev Containers. Faites défiler vers le bas jusqu’à voir Dev > Conteneurs : Docker Path. Le paramètre par défaut dira docker. Changez-le simplement en podman et fermez les paramètres.

Comment créer votre conteneur de développement VSCode

Avec VSCode et les extensions de conteneur de développement distant installés, vous êtes prêt à créer votre propre environnement de développement personnalisé. À des fins de démonstration, je vais vous montrer comment créer un conteneur basé sur la dernière version de Fedora Linux avec NodeJS et Git installés. Ce serait un environnement de base pour quelqu'un développant une application NodeJS ou React.

Pour commencer, utilisez l'explorateur de fichiers (Ctrl+Shift+E) pour accéder au répertoire dans lequel vous souhaitez créer votre projet et votre plateforme de programmation. Il peut s'agir d'un nouveau répertoire vide ou d'un emplacement où vous avez déjà commencé à écrire du code. Je recommanderais cependant de commencer avec un répertoire vide pour voir comment les choses fonctionnent avant d'essayer de créer un conteneur pour un projet existant.

Dans le répertoire de votre projet, créez un sous-répertoire appelé .devcontainer. Pour être clair, le répertoire doit commencer par un point (point), suivi du mot devcontainer. Ensuite, dans ce répertoire, créez un fichier appelé devcontainer.json.

Le fichier .JSON contient toutes les informations nécessaires à la configuration du conteneur de développement que vous souhaitez utiliser pour ce projet. Un exemple de fichier devcontainer.json pourrait ressembler à ceci :

{
"name": "Fedora Node.js Container",
"image": "fedora:latest",
// Set container workspace directory
"workspaceFolder": "/workspace",
"workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,Z",
"postCreateCommand": "dnf install -y git gh nodejs"
}

Il est important de suivre de près le formatage de ce fichier. Il doit commencer et se terminer par des accolades. Chaque ligne doit contenir un attribut, entre guillemets, suivi de deux points, suivi de la valeur, également entre guillemets. Vous pouvez trouver des instructions détaillées pour créer des configurations plus complexes dans la documentation de l'extension.

La première ligne, « name », donne un nom au conteneur, uniquement à titre de référence. Vous pouvez lui donner le nom de votre choix.

L'attribut « image » indique à l'extension quelle image extraire pour créer le système d'exploitation pour le conteneur. Dans ce cas, nous travaillons avec « fedora:latest », qui est toujours la dernière version stable de Fedora. Vous pouvez rechercher d'autres images, telles qu'Ubuntu, sur le Docker Hub.

L'attribut « workspaceFolder » est le nom que vous souhaitez donner au dossier dans lequel vous allez travailler. Il peut s'agir de tout ce que vous voulez et il n'est pas nécessaire de le créer n'importe où avant de l'utiliser.

« workspaceMount » lie votre dossier de travail réel sur votre disque dur au dossier « workspace » virtuel dans le conteneur. C'est ce qui permet au conteneur de lire et d'exécuter votre code. Vous devez copier et coller la configuration ci-dessus.

Et enfin, le « postCreateCommand » est exécuté après la création du conteneur à partir de l'image. C'est ici que vous installez les outils dont vous aurez besoin. Dans ce cas, nous courons sur Fedora et exécutons la commande dnf install -y git gh nodejs pour installer Git, les outils de ligne de commande GitHub et NodeJS. Le -y dans la commande est utilisé pour répondre automatiquement oui à toutes les questions d'installation afin que tout se déroule sans aucune intervention de l'utilisateur. Si vous travailliez avec une autre image Linux, vous utiliseriez le gestionnaire de packages pour cette distribution. Par exemple, Ubuntu utilise apt-get.

Si vous avez besoin d'une liste plus complexe de commandes à exécuter, vous pouvez également créer un script shell pour faire tout ce dont vous avez besoin, puis appeler ce script à partir de postCreateCommand.

Travailler dans le conteneur

Une fois que vous avez créé un fichier devcontainer.json valide, VSCode devrait le reconnaître et vous inviter à rouvrir votre espace de travail à l'intérieur du conteneur. Si ce n’est pas le cas ou si vous manquez l’invite, vous pouvez forcer la construction ou la reconstruction du conteneur. Appuyez sur Ctrl+Shift+P pour ouvrir la palette de commandes et saisissez dev dans la zone de recherche. Vous verrez trois options pour créer ou reconstruire votre conteneur. N’importe lequel d’entre eux fera l’affaire.

La première fois que vous effectuez cette opération, la création du conteneur peut prendre plusieurs minutes, en fonction de la vitesse de votre système. Après cela, démarrer et arrêter le conteneur lorsque vous êtes prêt à travailler ne prendra que quelques instants.

Vous pouvez vérifier que vous travaillez dans votre conteneur en regardant dans le coin inférieur gauche de l'écran et en vous enregistrant dans un terminal. Le code affichera le nom de votre conteneur dans le coin inférieur gauche et le terminal vous montrera comme étant l'utilisateur root avec un nom d'hôte charabia. Toutes les commandes que vous entrez dans le terminal seront exécutées dans le conteneur.

Votre conteneur est terminé !

Vous disposez désormais de votre propre conteneur de développement fonctionnel ! VSCode démarrera automatiquement le conteneur lorsque vous ouvrirez votre projet et le fermera lorsque vous fermerez Code ou passerez à un autre projet. Vos outils de développement resteront dans le conteneur et votre code restera sur votre disque local.

Vous pouvez reconstruire votre conteneur avec de nouveaux outils, ou même changer de système d'exploitation sans vous soucier de créer des conflits ou d'endommager votre propre système d'exploitation. Mieux encore, si vous cassez quelque chose, vous pouvez facilement reconstruire et remettre votre plate-forme de développement parfaite en marche en quelques minutes. Le principal avantage de ce type de configuration est que vous pouvez ajuster votre système d'exploitation sans interrompre votre environnement de développement et vice versa.

★★★★★