Catégories
Astuces et Design

Une introduction douce à l'utilisation d'un conteneur Docker comme environnement de développement

Avis de non-responsabilité concernant le sarcasme: Cet article est principalement du sarcasme. Je ne pense pas que je parle au nom de Dylan Thomas et je ne vous encouragerais jamais à imposer un thème clair aux personnes qui n'en veulent pas. Peu importe à quel point ils ont tort.

Lorsque Dylan Thomas a écrit les mots: «N'allez pas doucement dans cette bonne nuit», il parlait de la mort. Mais s'il était vivant aujourd'hui, il pourrait parler de conteneurs Linux. Il n'y a aucun moyen de le savoir avec certitude parce qu'il est décédé en 1953, mais c'est Internet, donc je me sens extrêmement confiant de parler avec autorité en son nom.

Ma confiance vient d'une surestimation complète de mes compétences et de mon intelligence couplée au fait que j'ai récemment essayé de configurer un conteneur Docker comme environnement de développement. Et je me suis retrouvé en colère contre la mort de la lumière alors que Docker rejetait chaque tentative que je faisais comme si j'étais moi et que c'était le roi James qui criait: «PAS DANS MA MAISON!

La douleur est un excellent professeur. Et parce que je me soucie de vous et que je n'ai pas d'autres arrière-pensées, je souhaite utiliser cette expérience pour vous donner une introduction «douce» à l'utilisation d'un conteneur Docker comme environnement de développement. Mais d'abord, parlons de pourquoiyyyyyyyyyy vous voudriez jamais faire ça.

kbutwhytho?

Fermez les yeux et imaginez ceci: un homme adulte habillé comme un renard.

Attendre. Non, mauvais scénario.

Au lieu de cela, imaginez un projet qui contient non seulement votre code source, mais l'ensemble de votre environnement de développement et toutes les dépendances et environnements d'exécution dont votre application a besoin. Vous pourriez alors donner ce projet à n'importe qui n'importe où (comme le gars du renard) et ils pourraient exécuter votre projet sans avoir à faire une petite modification de configuration dans leur propre environnement.

C'est exactement ce que font les conteneurs Docker. Un Dockerfile définit un environnement d'exécution complet avec un seul fichier. Tout ce dont vous auriez besoin, c'est d'un moyen de vous développer à l'intérieur de ce conteneur.

Attends ça…

VS Code et Remote – Conteneurs

VS Code a une extension appelée Remote – Containers qui vous permet de charger un projet dans un conteneur Docker et de vous y connecter avec VS Code. C'est tellement moi Début-niveau truc juste là. (Il l'a fait?! LE TALISMAN N'ARRÊTE JAMAIS VRAIMENT DE TOURNER.) Il est plus facile de comprendre si nous (et par «nous» je veux dire tu) regardez-le en action.

Ajouter un conteneur à un projet

Disons un instant que vous êtes sur un PC de jeu haut de gamme que vous avez conçu pour vos enfants et que vous avez ensuite décidé de le garder pour vous. Je veux dire, pourquoi exactement ils mérite à nouveau un nouvel ordinateur? Oh c'est vrai. Ce n’est pas le cas. Ils ne peuvent même pas sortir les poubelles le dimanche, même si vous leur dites toutes les semaines.

Il s’agit d’une nouvelle machine Windows avec WSL2 et Docker installés, mais c’est tout. Si vous essayiez d'exécuter un projet Node.js sur cette machine, Powershell vous dirait qu'il n'a absolument aucune idée de ce à quoi vous faites référence et que vous avez peut-être mal orthographié quelque chose. Ce qui, en toute honnêteté, vous est nul en orthographe. Souvenez-vous de cette fois en 4e année où vous avez été éliminé du premier tour d'orthographe parce que vous ne pouviez pas épeler «frit». FRITE? Il n'y a pas de «Y» là-dedans!

Maintenant, ce n'est pas un gros problème – vous pouvez toujours ignorer et installer Node.js. Mais disons une seconde que vous ne pouvez pas être dérangé de faire cela et que vous êtes presque sûr que sauter n'est pas quelque chose que les adultes font.

Au lieu de cela, nous pouvons configurer ce projet pour qu'il s'exécute dans un conteneur sur lequel Node.js est déjà installé. Maintenant, comme je l’ai déjà dit, je ne sais pas comment utiliser Docker. Je peux à peine utiliser le micro-ondes. Heureusement, VS Code configurera votre projet pour vous – dans une certaine mesure.

Dans la palette de commandes, il existe une commande «Ajouter des fichiers de configuration du conteneur de développement…». Cette commande examine votre projet et essaie d'ajouter la définition de conteneur appropriée.

Dans ce cas, VS Code sait que j'ai un projet Node ici, donc je vais simplement choisir Node.js 14. Oui, je sais que 12 est LTS pour le moment, mais il va être 14 dans (regarde regarder) un mois et je suis l'un des premiers à adopter, comme en témoigne mon intérêt pour la technologie des conteneurs tout à l'heure en 2020.

Cela ajoutera un .devcontainer dossier avec quelques éléments à l'intérieur. L'un est un Dockerfile qui contient l'image Node.js que nous allons utiliser, et l'autre est un devcontainer.json qui a une configuration au niveau du projet en cours.

Maintenant, avant de toucher quoi que ce soit et de tout casser (nous y arriverons, croyez-moi), nous pouvons sélectionner "Reconstruire et rouvrir dans le conteneur" dans la palette de commandes. Cela redémarrera VS Code et commencera à créer le conteneur. Une fois terminé (ce qui peut prendre un certain temps la première fois si vous n'êtes pas sur un PC de jeu haut de gamme dont vos enfants ne connaîtront jamais les joies), le projet s'ouvrira à l'intérieur du conteneur. VS Code est connecté au conteneur, et vous le savez car il le dit dans le coin inférieur gauche.

Maintenant, si nous ouvrons le terminal dans VS Code, Powershell est visiblement absent car nous ne sommes plus sous Windows, Dorthy. Nous sommes maintenant dans un conteneur Linux. Et nous pouvons les deux npm install et npm start dans ce pays magique.

Il s'agit d'une application express, elle devrait donc fonctionner sur le port 3000. Mais si vous essayez de visiter ce port, il ne se chargera pas. En effet, nous devons mapper un port dans le conteneur à 3000 sur notre hôte local. Comme on fait.

Heureusement, il existe une interface utilisateur pour cela.

L'extension Remote Containers place une icône «Remote Explorer» dans la barre d'action. Ce qui est du côté gauche pour vous, mais du côté droit pour moi. Parce que je l'ai déplacé et vous devriez aussi.

Il y a trois sections ici, mais regardez celle du bas qui dit "Redirection de port", je ne suis pas le sandwich avec le plus de laitue, mais je suis presque sûr que c'est ce que nous voulons ici. Vous pouvez cliquer sur "Transférer un port" et taper "3000", maintenant si nous essayons d'appuyer sur l'application à partir du navigateur …

Surtout des choses, «juste travaillé». Mais la configuration est également assez simple. Voyons comment nous pouvons commencer à personnaliser cette configuration en automatisant certains aspects du projet lui-même. La configuration spécifique au projet est effectuée dans le devcontainer.json fichier.

Automatiser la configuration de projet

Tout d'abord, nous pouvons automatiser la redirection de port en ajoutant un forwardPorts variable et spécifiant 3000 comme valeur. Nous pouvons également automatiser le npm install commande en spécifiant la postCreateCommand propriété. Et soyons réalistes, nous pourrions tous supporter d’en courir AU MOINS un de moins npm install.

{
  // ...
  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": (3000),
  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "npm install",
  // ...
}

De plus, nous pouvons inclure des extensions VS Code. Le code VS qui s'exécute dans le conteneur Docker n'obtient pas automatiquement toutes les extensions que vous avez installées. Vous devez les installer dans le conteneur ou simplement les inclure comme nous le faisons ici.

Des extensions comme Prettier et ESLint sont parfaites pour ce genre de scénario. Nous pouvons également profiter de cette occasion pour imposer un thème clair à tout le monde car il s'avère que les thèmes sombres sont pires pour la lecture et la compréhension. je me sens comme un prophète.

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.128.0/containers/javascript-node-14
{
  // ...
  // Add the IDs of extensions you want installed when the container is created.
  "extensions": (
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "GitHub.github-vscode-theme"
  )
  // ...
}

Si vous vous demandez où trouver ces ID d'extension, ils apparaissent dans intellisense (Ctrl/Cmd + Shift) si vous les avez installés. Sinon, recherchez le marché des extensions, cliquez avec le bouton droit de la souris sur l'extension et dites "Copier l'ID d'extension". Ou mieux encore, sélectionnez simplement "Ajouter à devcontainer.json".

Par défaut, le conteneur Node.js que VS Code vous donne contient des éléments tels que git et cURL déjà installés. Ce qu’il n’a pas, c’est «cowsay», et nous ne pouvons pas avoir un environnement Linux sans cowsay. C'est dans les bi-lois Linux (ce n'est pas le cas). Je ne fais pas les règles. Nous devons personnaliser ce conteneur pour l'ajouter.

Automatisation de la configuration de l'environnement

C'est là que les choses ont déraillé pour moi. Pour ajouter un logiciel à un conteneur de développement, vous devez modifier le Dockerfile. Et Linux n'a aucune tolérance pour vos manigances ou vos erreurs.

Le conteneur Docker de base que vous obtenez avec les configurations de conteneur dans VS Code est Debian Linux. Debian Linux utilise le gestionnaire de dépendances apt-get.

apt-get install cowsay

Nous pouvons ajouter ceci à la fin du Dockerfile. Chaque fois que vous installez quelque chose à partir d'apt-get, exécutez un apt-get update première. Cette commande met à jour la liste des packages et des dépôts de packages afin que vous ayez la liste la plus récente mise en cache. Si vous ne le faites pas, la construction du conteneur échouera et vous indiquera qu'elle ne peut pas trouver «cowsay».

# To fully customize the contents of this image, use the following Dockerfile instead:
# https://github.com/microsoft/vscode-dev-containers/tree/v0.128.0/containers/javascript-node-14/.devcontainer/Dockerfile
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
# ** Install additional packages **
RUN apt-get update 
  && apt-get -y install cowsay

Quelques points à noter ici…

  1. Cette RUN est une chose de Docker et crée une nouvelle «couche». Les couches indiquent comment le conteneur sait ce qui a changé et ce qui doit être mis à jour dans le conteneur lorsque vous le reconstruisez. Ils sont un peu comme des couches de gâteau sauf que vous ne pas j'en veux beaucoup parce que d'énormes gâteaux sont géniaux. Les énormes conteneurs ne le sont pas. Vous devriez essayer de garder la logique connexe ensemble dans le même RUN afin de ne pas créer de calques inutiles.
  2. Cette désigne un saut de ligne à la fin d'une ligne. Vous en avez besoin pour les commandes multilignes. Laissez-le et vous connaîtrez la douleur de nombreuses versions de Docker qui ont échoué.
  3. le && est la façon dont vous ajoutez une commande supplémentaire au RUN ligne. Pour l'amour de Dieu, ne l'oublie pas sur la ligne précédente.
  4. le -y flag est important car par défaut, apt-get vous demandera de vous assurer que vous voulez vraiment installer ce que vous venez d'essayer d'installer. Cela entraînera l'échec de la construction du conteneur car il n'y a personne pour le dire Y ou N. le -y flag est un raccourci pour «ne me dérange pas avec vos invites de confirmation stupides». Apparemment, tout le monde est censé le savoir déjà. Je ne le savais pas jusqu'à il y a environ quatre heures.

Utilisez l'invite de commande pour sélectionner «Reconstruire le conteneur»…

Et, juste comme ça …

Ça ne marche pas.

C'est la première leçon de ce que j'aime appeler, «Linux Vertigo». Il y a tellement de distributions de Linux et elles ne gèrent pas toutes les choses de la même manière. Il peut être difficile de comprendre pourquoi les choses fonctionnent au même endroit (Mac, WSL2) et ne fonctionnent pas dans d’autres. La raison pour laquelle «cowsay» n'est pas disponible, c'est que Debian met «cowsay» dans /usr/games, qui n'est pas inclus dans le PATH variable d'environnement.

Une solution serait de l'ajouter au PATH dans le Dockerfile. Comme ça…

FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
RUN apt-get update 
  && apt-get -y install cowsay
ENV PATH="/usr/games:${PATH}"

EXCELLENT. Nous résolvons de vrais problèmes ici, mes amis. Les gens aiment les monoplaces de vache. je bullieve je troupeau que quelque part.

Pour résumer, la configuration du projet (transfert des ports, installation des dépendances du projet, ect) se fait dans le «devcontainer.json» et la configuration de l'environnement (installation du logiciel) se fait dans le «Dockerfile». Maintenant, soyons courageux et essayons quelque chose d'un peu plus audacieux.

Configuration avancée

Disons un instant que vous avez une configuration de terminal magnifique et glamour que vous voulez vraiment mettre également dans le conteneur. Je veux dire, ce n’est pas parce que vous développez dans un conteneur que votre terminal doit être ennuyeux. Mais vous ne voudriez pas non plus reconfigurer votre prétentieuse configuration zsh pour chaque projet que vous ouvrez. Pouvons-nous automatiser cela aussi? Découvrons-le.

Heureusement, zsh est déjà installé dans l'image que vous obtenez. Le seul problème est qu'il ne s'agit pas du shell par défaut lorsque le conteneur s'ouvre. Il existe de nombreuses façons de faire de zsh le shell par défaut dans un scénario Docker normal, mais aucune d'entre elles ne fonctionnera ici. C'est parce que vous n'avez aucun contrôle sur la façon dont le conteneur est construit.

Au lieu de cela, regarde à nouveau le fidèle devcontainer.json fichier. En lui, il y a un "settings" bloquer. En fait, il y a déjà une ligne qui vous indique que le terminal par défaut est réglé sur "/bin/bash". Changer cela en "/bin/zsh".

// Set *default* container specific settings.json values on container create.
"settings": {
  "terminal.integrated.shell.linux": "/bin/zsh"
}

En passant, vous pouvez y définir TOUT paramètre VS Code. Comme, vous savez, déplacer la barre latérale vers le côté droit. Là – je l'ai réparé pour vous.

// Set default container specific settings.json values on container create.
"settings": {
  "terminal.integrated.shell.linux": "/bin/zsh",
  "workbench.sideBar.location": "right"
},

Et que diriez-vous de ces plugins prétentieux qui vous rendent meilleur que tout le monde? Pour ceux dont vous aurez besoin .zshrc fichier. Le conteneur contient déjà oh-my-zsh, et il se trouve dans le dossier "racine". Vous devez juste vous assurer de définir le chemin vers ZSH au sommet de la .zshrc afin qu'il pointe vers root. Comme ça…

# Path to your oh-my-zsh installation.
export ZSH="/root/.oh-my-zsh"


# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="cloud"


# Which plugins would you like to load?
plugins=(zsh-autosuggestions nvm git)


source $ZSH/oh-my-zsh.sh

Ensuite, vous pouvez copier dans ce sexy .zshrc fichier dans le dossier racine du Dockerfile. Je mets ça .zshrc fichier dans le .devcontainer dossier dans mon projet.

COPY .zshrc /root/.zshrc

Et si vous avez besoin de télécharger un plugin avant de l'installer, faites-le dans le Dockerfile avec un RUN commander. N'oubliez pas de regrouper tous ces éléments en une seule commande car chaque RUN est une nouvelle couche. Vous êtes presque un expert en conteneurs maintenant. La prochaine étape consiste à écrire un article de blog à ce sujet et à enseigner aux gens les façons de Docker comme vous l'avez inventé.

RUN git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Regardez le magnifique terminal! Voici les couleurs! Le plugin git qui vous indique la branche et ajoute un emoji éclair! Rien ne dit «je sais ce que je fais» comme un terminal personnalisé. J'aime apporter le mien à Starbucks et laisser les gens le voir en action et me demander si je suis une célébrité.

Allez doucement

J'espère que vous êtes arrivé à ce point et que vous vous êtes dit: «Bon sang, ce gars réagit sérieusement de manière excessive. Ce n’est pas si difficile. » Si tel est le cas, je vous ai sauvé avec succès. Je vous en prie. Pas besoin de me remercier. Oui, j'ai une liste de souhaits Amazon.

Pour plus d'informations sur les conteneurs distants, notamment comment ajouter une base de données ou utiliser Docker Compose, consultez la documentation officielle sur les conteneurs distants, qui fournissent beaucoup plus de clarté avec 100% de commentaires névrotiques en moins.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *