Comment déployer des conteneurs distants VSCode dans un projet docker-compose qui comprend à la fois l'API et l'application frontale

Contexte

--Lors du lancement d'un nouveau projet en interne, il s'agit d'un plug-in de Visual Studio Code (ci-après VS Code) Remote --Containers Je voulais développer en utilisant -containers). --En utilisant docker, l'environnement d'exploitation de l'application peut être partagé au sein de l'équipe, mais ** la construction de l'environnement d'exploitation de l'éditeur est laissée à chaque membre **. Dans ce projet, il a été décidé dès le départ d'inclure plusieurs outils de vérification de syntaxe et de complétion de code tels que eslint et rubocop, donc Remote --Containers -vscode-remote.remote-containers), je voulais partager l'environnement d'exploitation de l'éditeur avec les membres avec docker pour plus d'efficacité.

• Dans ce projet **, la condition était que l'API et le front soient gérés comme des référentiels séparés dans le même projet et qu'ils étaient gérés par le même docker-compose.yml **. J'étais assez inquiet de savoir comment écrire le paramètre Remote --Container dans ce cas.

Lecteur supposé

• Vous avez déjà un projet géré par docker-compose.yml, et ce projet contient plusieurs applications (par exemple API et Front). --Je veux pouvoir développer chaque application avec Remote --Containers

Configuration du projet avant modification

Structure des dossiers

project-docker ┣ project-api (référentiel rails) ┃ ┣ app ┃ ┣ ... ┃ ┗ Gemfile ┣ project-front (référentiel Next.js) ┃ ┣ .next ┃ ┣ ... ┃ ┗ package.json ┣ docker-compose.yml ┣ Dockerfile.backend ┗ Dockerfile.frontend

Si vous appuyez sur docker-compose up directement sous project-docker, l'API et le front (et la base de données) démarreront en même temps et vous serez heureux.

docker-compose.yml Ci-dessous se trouve docker-compose.yml. Pour le moment, il existe au moins trois «services»:

• db
• backend
• frontend

• En fait, il y avait redis et smtp, mais ils ont été exclus car ils n'ont rien à voir avec le but de cet article.

docker-compose.yml(Partiellement omis)

services:
  db:
    image: postgres:11.5
    ports:
      - "5432:5432"
  backend:
    build:
      context: .
      dockerfile: Dockerfile.backend
    volumes:
      - ./project-api:/project-api
    command: /bin/sh -c "rm -f /api-okapi/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"
    depends_on:
      - db
  frontend:
    build:
      context: .
      dockerfile: Dockerfile.frontend
    command: npm run dev
    volumes:
      - ./project-front:/project-front
    ports:
      - "8080:8080"

Remote - Procédure d'installation des conteneurs

• Fondamentalement, sous chaque référentiel (project-api, project-front), créez un répertoire .devcontainer pour placer le fichier de configuration de Remote --Containers, et sous celui-ci, devcontainer.json et docker-compose. Le but est de créer deux fichiers de configuration, .extend.yml.

supposition

--VScode et docker sont déjà installés --Dans le volet Extensions VScode, Remote --Containers est déjà installé. --Une fois installé, une icône Remote --Containers sera ajoutée en bas à gauche de l'écran VScode.

procédure

Prenons le côté API comme exemple. Faites de même pour la face avant.

1. Créez automatiquement .devcontainer

1. Ouvrez project-docker depuis" open workspace "de" file "
2. Cliquez sur l'icône Remote --Containers en bas à gauche de l'écran et sélectionnez «Rouvrir dans le conteneur»
3. Sélectionnez From docker-compose.yml
4. Sélectionnez backend avec sélectionnez un service
5. Directement sous project-docker, un répertoire .devcontainer et deux fichiers de paramétrage, devcontainer.json et docker-compose.yml, seront créés en dessous. Déplacez-vous sous `

2. Modifiez .devcontainer / devcontainer.json

Le fichier .devcontainer / devcontainer.json immédiatement après sa création automatique est le suivant.

devcontainer.json

// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
{
	"name": "Existing Docker Compose (Extend)",

	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],

	// The 'service' property is the name of the service for the container that VS Code should
	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
	"service": "backend",

	// The optional 'workspaceFolder' property is the path VS Code should open by default when
	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
	"workspaceFolder": "/workspace",

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

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": []

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Uncomment the next line if you want start specific services in your Docker Compose config.
	// "runServices": [],

	// Uncomment the next line if you want to keep your containers running after VS Code shuts down.
	// "shutdownAction": "none",

	// Uncomment the next line to run commands after the container is created - for example installing curl.
	// "postCreateCommand": "apt-get update && apt-get install -y curl",

	// Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
	// "remoteUser": "vscode"
}

Réécrivez ceci comme suit.

devcontainer.json(Seule la partie corrigée)

{
	"name": "project-api-docker", //Donnez-lui un joli nom
	"dockerComposeFile": [
		"../../docker-compose.yml", //Correction du chemin car le dossier a été déplacé
		"docker-compose.extend.yml" // .Ajouter une extension (je n'en ai pas besoin si cela fonctionne, mais j'ai changé le nom pour plus de clarté)
	],
	"runServices": [
		"db",
		"backend",
		//Ajoutez s'il existe d'autres services tels que stmp."frontend"Il est important de ne pas inclure. S'il est vide, tous les services seront démarrés par défaut.
	],
	"workspaceFolder": "/workspace/project-api/", //projet d'espace de travail-Make it api
}

3. Modifiez docker-compose.yml

Le .devcontainer / docker-compose.yml immédiatement après sa création automatique est le suivant.

docker-compose.yml

version: '3'
services:
  # Update this to the name of the service you want to work with in your docker-compose.yml file
  backend:
    # If you want add a non-root user to your Dockerfile, you can use the "remoteUser"
    # property in devcontainer.json to cause VS Code its sub-processes (terminals, tasks, 
    # debugging) to execute as the user. Uncomment the next line if you want the entire 
    # container to run as this user instead. Note that, on Linux, you may need to 
    # ensure the UID and GID of the container user you create matches your local user. 
    # See https://aka.ms/vscode-remote/containers/non-root for details.
    #
    # user: vscode

    # Uncomment if you want to override the service's Dockerfile to one in the .devcontainer 
    # folder. Note that the path of the Dockerfile and context is relative to the *primary* 
    # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
    # array). The sample below assumes your primary file is in the root of your project.
    #
    # build:
    #   context: .
    #   dockerfile: .devcontainer/Dockerfile
    
    volumes:
      # Update this to wherever you want VS Code to mount the folder of your project
      - .:/workspace:cached

      # Uncomment the next line to use Docker from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker-compose for details.
      # - /var/run/docker.sock:/var/run/docker.sock 

    # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
    # cap_add:
    #   - SYS_PTRACE
    # security_opt:
    #   - seccomp:unconfined

    # Overrides default command so things don't shut down after the process ends.
    command: /bin/sh -c "while sleep 1000; do :; done"

Tout d'abord, ** renommez le fichier en .devcontainer / docker-compose.extend.yml **. Cela permet de voir facilement que .devcontainer / docker-compose.extend.yml est juste en train d'écraser certains éléments de docker-compose.yml directement sous project-docker. Car.

Ensuite, réécrivez le contenu de .devcontainer / docker-compose.extend.yml comme suit.

yml:docker-compose.extend.yml(Seule la partie corrigée)

services:
  backend:    
    volumes:
      - .:/workspace:cached
      - ~/.gitconfig:/root/.gitconfig #Local.Répertoire de base côté conteneur pour partager les paramètres gitconfig à l'intérieur du conteneur(dans ce cas/root)Monter sur.
      - ~/.ssh:/root/.ssh #Local.Pour partager les paramètres SSH dans un conteneur(Ce qui suit est omis)
      - /var/run/docker.sock:/var/run/docker.sock #Je ne fais pas de commentaires, mais je ne comprends pas vraiment la nécessité. S'il vous plaît dites-moi ...
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0' ; while sleep 1000; do :; done" 

――Il est particulièrement important de modifier la «commande». Si vous conservez la description d'origine, le serveur ne démarrera pas car il écrase la commande (dans ce cas, la commande de démarrage du serveur rails) du backend du parent docker-compose.yml. Apportez la description originale et ajoutez while sleep 1000; do :; done à la fin.

• Si l'utilisateur côté conteneur utilise un conteneur qui n'est pas root, tel qu'un conteneur de type circleci, il est nécessaire de spécifier la variable d'environnement HOME dans "environnement". Pour plus d'informations, consultez cet article.

4. Ouvrir avec la télécommande - Conteneurs

1. Maintenant que les réglages sont terminés, ouvrez l'api-okapi (ou front-okapi) cloné directement sous ce référentiel à partir de "open workspace" de "file".
2. Cliquez sur l'icône en bas à gauche et sélectionnez «Remote-Containers: Reopen in Container».
3. Le conteneur démarre automatiquement et VS Code s'ouvre à l'intérieur du conteneur. (Si vous avez besoin de construire, cela prendra beaucoup de temps)

Différences sur la face avant

• Lors de la configuration de la face avant, assurez-vous que seul frontend est inclus dans runServices.

devcontainer.json(Seule la partie corrigée)

{
	"runServices": [
		"frontend"
		// "db",
		// "backend",
	],
}

• De cette façon, en séparant les services qui démarrent du côté backend et du côté frontal, même si vous démarrez le côté backend et le côté frontal avec Remote --Containers en même temps, vous pouvez être assuré que les services qui démarrent dans chaque référentiel ne se heurteront pas. (Ce n'est peut-être pas nécessaire. Veuillez me dire qui le connaît.)
• Veuillez noter que si depend_on est spécifié dans le parent docker-compose.yml, il démarrera même s'il est supprimé du paramètre runServices.

Paramètres post-installation

Modifier les paramètres de l'éditeur VScode

• Exemple: faites exécuter le format par ESLint à chaque fois que vous enregistrez un fichier .ts --Correction dans les paramètres de .devcontainer / devcontainer.json dans chaque référentiel.
• Ceci est une alternative à .vscode / settings.json.

jsonc:.devcontainer/devcontainer.json

{
	"settings": {
		"editor.codeActionsOnSave": {
			"source.fixAll.eslint": true //Formater avec ESLint lors de l'enregistrement d'un fichier
		}
		...
	},
}

Modifier les paramètres du plug-in VScode

• Exemple: insérer le plug-in VScode pour eslint --Modifiez dans les extensions de .devcontainer / devcontainer.json dans chaque référentiel.
• L'ID de chaque plug-in peut être obtenu en cliquant avec le bouton droit de la souris sur le plug-in correspondant dans le volet d'extension de VScode et en sélectionnant "Copier l'ID d'extension".
• Comme d'habitude, vous pouvez ajouter des plugins à partir du volet Extensions VScode, mais dans ce cas, il ne semble pas être ajouté aux environnements d'autres développeurs? ..

jsonc:.devcontainer/devcontainer.json

{
	"extensions": [
		"dbaeumer.vscode-eslint",
		...
	],
}

Modifier les paramètres de bash

• Exemple: insérer le script de complétion de la commande git --Préparez un fichier tel que .bashrc, modifiez volume de docker-compose.yml, et montez-le directement sous le répertoire personnel (/ root dans ce cas) du côté du conteneur. .. --Dans ce qui suit, le dossier bash-config est préparé sous project-docker, et le montage est défini avec docker-compose.yml de la balle parent.

docker-compose.yml

frontend:
  volumes:
    - ./bash-config/.bashrc:/root/.bashrc
    - ./bash-config/.git-completion.bash:/root/.git-completion.bash
    - ./bash-config/.git-prompt.sh:/root/.git-prompt.sh
    ...

• Si vous souhaitez modifier les paramètres bash dans chaque référentiel, c'est une bonne idée de préparer un dossier bash-config sous chaque référentiel et de modifier les paramètres dans docker-compose.extend.yml.

référence

Liés au conteneur distant VSCode

• VSCode Remote Container is good
• Ouvrez l'environnement de développement lancé avec Docker avec VS Code!
• Utiliser l'environnement de développement Docker avec VS Code Remote Development

Paramètres liés après l'installation

• Comment installer ESLint et Prettier dans un projet TypeScript (réglage avec + VSCode)
• "Ne pas compléter Git" "Utiliser l'état de git 100 fois par jour" Bonne nouvelle pour vous [git-completion et git-prompt]