[JAVA] [Janvier 2020] Commençons sérieusement le «conteneur de développement» explosif avec le conteneur distant de VS Code.

Démarrez le tableau de bord depuis "environnement de développement + conteneur avec tous les projets" avec Remote Conainer de VSCode! ??

Utilisez-vous Remote Conainer de VS Code pour le développement? Si vous souhaitez simplement entrer un conteneur existant, vous pouvez utiliser Remote SSH, mais utilisons Remote Container comme "une partie de l'environnement de développement local", ou plutôt comme ** environnement de développement local = Remote Container **. C'est Reiwa! ~~ (Cela fait déjà 2 ans ...?) ~~

Surtout lors de l'utilisation d'un Mac, Python, PHP, Ruby, etc. sont inclus dès le début, il existe donc un ** environnement de développement **, mais ils sont relativement intégrés à l'écosystème macOS, ils ne sont donc pas nécessaires. Vous ne pouvez pas ajouter ni supprimer de packages. Il se casse facilement comme «infusion» ... Surtout ** en plus de la mise à niveau **. Du tout, ce sera fou avec une marge. C'est pourquoi si vous programmez avec Python ou Ruby sur votre Mac ... ** Du coup, vous serez dans une situation où vous ne pourrez plus revenir en arrière **. Pour éviter que cela ne se produise, commençons par "Développement avec un conteneur distant" ~!

Introduction de la fonction "Dev Container"

Saviez-vous qu'il existe un élément et un référentiel appelé "Try a dev container" sur le site d'origine de Remote Container et du Github d'origine?

«conteneur de développement» est un exemple de projet fourni avec un conteneur avec un environnement de développement, et un exemple de conteneur de développement est préparé pour chacun des langages suivants.

Par exemple, l'exemple pour node.js et Javascript a l'arborescence suivante.

% git clone https://github.com/Microsoft/vscode-remote-try-node nodejs-dev-sample
% cd nodejs-dev-sample
% tree -a -I ".git"
.
├── .devcontainer
│   ├── Dockerfile
│   └── devcontainer.json
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .vscode
│   └── launch.json
├── LICENSE
├── README.md
├── package.json
├── server.js
└── yarn.lock

Si vous excluez uniquement .git avec la commande tree et que vous affichez tout, ce sera comme ci-dessus. Ce qui est inquiétant ici, c'est ... .devcontainer, n'est-ce pas? !! Le contenu de Dockerfile et devcontainer.json est le suivant.

#-------------------------------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#-------------------------------------------------------------------------------------------------------------

FROM node:10

# The node image includes a non-root user with sudo access. Use the "remoteUser"
# property in devcontainer.json to use it. On Linux, the container user's GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=node
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

# Configure apt and install packages
RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \ 
    #
    # Verify git and needed tools are installed
    && apt-get -y install git iproute2 procps \
    #
    # Remove outdated yarn from /opt and install via package 
    # so it can be easily updated via apt-get upgrade yarn
    && rm -rf /opt/yarn-* \
    && rm -f /usr/local/bin/yarn \
    && rm -f /usr/local/bin/yarnpkg \
    && apt-get install -y curl apt-transport-https lsb-release \
    && curl -sS https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/pubkey.gpg | apt-key add - 2>/dev/null \
    && echo "deb https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update \
    && apt-get -y install --no-install-recommends yarn \
    #
    # Install eslint globally
    && npm install -g eslint \
    #
    # [Optional] Update a non-root user to UID/GID if needed.
    && if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
        groupmod --gid $USER_GID $USERNAME \
        && usermod --uid $USER_UID --gid $USER_GID $USERNAME \
        && chown -R $USER_UID:$USER_GID /home/$USERNAME; \
    fi \
    # [Optional] Add add sudo support for non-root user
    && apt-get install -y sudo \
    && echo node ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
    && chmod 0440 /etc/sudoers.d/$USERNAME \
    #
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

# Switch back to dialog for any ad-hoc use of apt-get
ENV DEBIAN_FRONTEND=dialog

Je publierai l'explication ci-dessus plus tard, puis le contenu de devcontainer.json est ...

devcontainer.json


{
    "name": "Node.js Sample",
    "dockerFile": "Dockerfile",

    // Use 'appPort' to create a container with published ports. If the port isn't working, be sure
    // your server accepts connections from all interfaces (0.0.0.0 or '*'), not just localhost.
    "appPort": [3000],

    // Comment out the next line to run as root instead.
    "remoteUser": "node",

    // Use 'settings' to set *default* container specific settings.json values on container create. 
    // You can edit these settings after create using File > Preferences > Settings > Remote.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },

    // Specifies a command that should be run after the container has been created.
    "postCreateCommand": "yarn install",

    // Add the IDs of extensions you want installed when the container is created in the array below.
    "extensions": [
        "dbaeumer.vscode-eslint"
    ]
}

Et c'est un fichier dans un format qui est un mélange de paramètres de conteneur et de vscode settings.json. Vous pouvez probablement imaginer ce qu'est ce paramètre, mais que se passe-t-il lorsque vous ouvrez ce dossier avec VS Code ... essayons-le! Avant cela, si le démon Docker n'est pas démarré, veuillez démarrer le démon Docker à l'avance. Pour Windows et Mac, veuillez démarrer Docker for Desktop.

Lorsque Docker démarre, lancez VSCode et ouvrez nodejs-dev-sample. Alors ... スクリーンショット 2020-01-03 14.10.20.png

configuration du conteneur de développement trouvée, ouverte dans le conteneur? J'ai reçu une demande disant ! Et lorsque vous cliquez sur «Rouvrir dans le conteneur» ... スクリーンショット 2020-01-03 14.22.25.png Au bout d'un moment ... il s'est ouvert! La barre d'état en bas à gauche devient verte et vous êtes connecté à Remote, et les mots «Dev Container: Node.js Sample» sont éblouissants! C'est vrai. Si vous avez le dossier .devcontainer, les paramètres devcontainer.json et le Dockerfile approprié, il générera automatiquement un conteneur qui montera le fichier entier dans le dossier du projet et ouvrira le projet avec VS Code. !!

Aussi, le point remarquable du Dockerfile ici est qu'il résout le problème de l'utilisateur "root" en question. "Développer dans un conteneur" sonne bien, mais la plupart des images sont souvent laissées en tant que "root" par l'utilisateur, de sorte que le propriétaire du fichier à mettre à jour dans le conteneur est "root". Il y avait un problème ennuyeux avec devenir ". Si vous écrivez un Dockerfile vous-même, vous pouvez faire n'importe quoi, mais vous ne pouvez pas l'écrire un par un, et si vous écrivez un Dockerfile un par un, ce n'est pas grave si l'environnement de développement se salit ** C'est un PC d'entreprise **, n'est-ce pas? ?? Ce Dockerfile soutient poliment cela, de sorte que le problème de l'utilisateur root a été résolu avec succès.

Au fait, vous pouvez également gérer les conteneurs à partir de VSCode ... スクリーンショット 2020-01-03 14.23.29.png De cette manière, vous pouvez gérer quel conteneur est utilisé dans quel projet à partir de VS Code. En particulier, ** Docker ne sait pas quel dossier le Dockerfile a été utilisé pour lancer le conteneur ** (ou plutôt, il crée une image et démarre le conteneur, donc peu importe quel dossier le Dockerfile a créé l'image). C'est utile.

Comment l'utilisez-vous?

Tout d'abord, introduisons le référentiel d'origine. Vous pouvez déterminer à quelle langue l'exemple de projet est destiné à partir du nom du référentiel.

En fait, si vous avez le dossier .devcontainer, les paramètres devcontainer.json et le Dockerfile à utiliser, il le fera automatiquement, donc créez uniquement ces fichiers à partir du référentiel d'origine en copiant. Est aussi une fourmi. Cependant, il est difficile de copier et coller à chaque fois, alors organisons la procédure comme suit.

1. Cloner comme modèle

Clonez le référentiel ci-dessus avec le "nom du projet" comme indiqué ci-dessous.

$ git clone https://github.com/microsoft/vscode-remote-try-php my-first-php

Le premier miso consiste à cloner avec un autre nom, qui est le nom du dossier où l'argument après le nom du référentiel est créé.

2. Supprimer et recréer l'historique

Bien sûr, si vous venez de le cloner, il inclut tout l'historique de validation du référentiel d'origine. Il est normal de le réutiliser tel quel, mais dans la plupart des cas, vous serez inquiet. Par conséquent, supprimez grossièrement le .git suivant.

$ rm -rf .git

Avec cela, j'ai complètement oublié l'historique des engagements passés. Au fait, supprimons les fichiers inutiles. Vous n'avez besoin de rien d'autre que .devcontainer. «.Vscode» dépend de vous.

Ensuite, une fois le nettoyage terminé, initialisez-le en tant que nouveau référentiel.

$ git init
...

C'est la première étape d'un nouveau projet de conteneur de développement!

3. Personnalisez Dockerfile

Dans un projet réel, il est nécessaire d'inclure DB, Angular, Aws, Firebase, CLI pour Azure, etc., il est donc presque impossible d'utiliser le Dockerfile tel quel. Par conséquent, mettez la commande pour installer les outils nécessaires dans le Dockerfile à l'avance.

Je vais omettre la description du Dockerfile ici. .. ..

4. Personnalisez devcontainer.json

devcontainer.json est un fichier très important où vous pouvez définir le nom du projet, le port de transfert, le plug-in VSCode requis, etc. Une liste de paramètres peut être trouvée sur:

Extrayons certains des paramètres utilisés dans l'exemple de référentiel ...

--settings… Il s'agit de la valeur de paramètre de VSCode setting.json utilisée dans le conteneur. --appPort… Le port à transférer --postCreateCommand… Commande exécutée après la création du conteneur --extensions… Plug-in VSCode installé côté distant

Est-ce un point de personnalisation important?

De plus, selon la référence, «docker-compose.yml» semble être disponible.

Après avoir défini ces derniers, ouvrez le dossier à partir de VSCode et vous démarrerez immédiatement le projet, y compris l'environnement de développement!

Résumé

Quand j'ai écrit la partie introductive de la fonction de VScode Remote container, j'ai revu le document officiel ... Le volume n'est pas parfait. Je m'inquiétais de la profondeur que cela devrait avoir, mais comme il s'agissait d'une édition d'introduction, j'ai essayé de ne pas y toucher (rires). Les liens sont dispersés dans le texte, mais l'aide officielle de Remote Container est une page surprenante.

C'est le volume que je peux écrire ce livre ...

Au fait, cette fois, nous finirons ici!

Recommended Posts

[Janvier 2020] Commençons sérieusement le «conteneur de développement» explosif avec le conteneur distant de VS Code.
Lancez plusieurs conteneurs dans le conteneur distant de VS Code pour basculer entre les tâches
Créez un environnement de développement Go avec les conteneurs distants de VS Code
Connectez-vous à un serveur distant avec SSH
Utilisez le conteneur de développement Docker facilement avec VS Code
Modifiez et déboguez le code dans Raspberry Pi avec la fonction de connexion SSH de VSCode
[Venv non requis] L'environnement de développement Python le plus puissant créé avec des conteneurs distants [VS Code / Docker]