How to deploy VS Code Remote Containers in a docker-compose project that includes both the API and the front app

background

--When launching a new project in-house, it is a plug-in of Visual Studio Code (hereinafter VS Code) Remote --Containers I wanted to develop using -containers). --By using docker, the operating environment of the application can be shared within the team, but ** the construction of the operating environment of the editor is left to each member **. In this project, it was decided from the beginning to include multiple syntax check and code completion tools such as eslint and rubocop, so Remote --Containers -vscode-remote.remote-containers), I wanted to share the operating environment of the editor with members with docker for efficiency. --In this project, ** the condition was that API and front are managed as separate repositories in the same project, and they are managed by the same docker-compose.yml **. I was quite worried about how to write the Remote --Container setting in this case.

Assumed reader

--You already have a project managed by docker-compose.yml, and that project contains multiple applications (eg API and front). --I want to be able to develop each application with Remote --Containers

Project configuration before modification

Folder structure

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

If you hit docker-compose up directly under project-docker, the API and front (and DB) will start at the same time and you will be happy.

docker-compose.yml Below is docker-compose.yml. For the time being, there are at least three services:

• db
• backend
• frontend

• Actually, there were redis and smtp, but they were excluded because they have nothing to do with the purpose of this article.

docker-compose.yml(Partially omitted)

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 --Containers installation procedure

--Basically, under each repository (project-api, project-front), create a directory .devcontainer to put the remote --Containers configuration file, and under that, devcontainer.json and docker-compose. The goal is to create two configuration files, .extend.yml.

Premise

--VScode and docker are already installed --From the VScode Extensions pane, you have Remote --Containers installed. --Once installed, a Remote --Containers icon will be added at the bottom left of the VScode screen.

procedure

Let's take the api side as an example. Do the same for the front side.

1. Automatically create .devcontainer

1. Open project-docker from" open workspace "of" file "
2. Click the Remote --Containers icon at the bottom left of the screen and select Reopen in Container
3. Select From docker-compose.yml
4. Select backend with select a service
5. Directly under project-docker, the .devcontainer directory and two configuration files, devcontainer.json and docker-compose.yml, will be created under it. Move under `

2. Modify .devcontainer/devcontainer.json

The .devcontainer/devcontainer.json immediately after being created automatically is as follows.

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"
}

Rewrite this as follows.

devcontainer.json(Only the corrected part)

{
	"name": "project-api-docker", //Give it a nice name
	"dockerComposeFile": [
		"../../docker-compose.yml", //Corrected the path because the folder was moved
		"docker-compose.extend.yml" // .Add extend (I don't need it if it just works, but I changed the name for clarity)
	],
	"runServices": [
		"db",
		"backend",
		//Add if there are other services such as stmp."frontend"It is important not to include. If empty, all services will be started by default.
	],
	"workspaceFolder": "/workspace/project-api/", //workspace project-Make it an api
}

3. Modify docker-compose.yml

The .devcontainer/docker-compose.yml right after it was created automatically is:

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"

First, ** rename the file to .devcontainer/docker-compose.extend.yml **. This makes it easy to see that .devcontainer/docker-compose.extend.yml is just overwriting some elements of docker-compose.yml directly under project-docker. Because.

Then rewrite the contents of .devcontainer/docker-compose.extend.yml as follows.

yml:docker-compose.extend.yml(Only the corrected part)

services:
  backend:    
    volumes:
      - .:/workspace:cached
      - ~/.gitconfig:/root/.gitconfig #Local.To share the gitconfig settings inside the container, the home directory on the container side(in this case/root)Mount on.
      - ~/.ssh:/root/.ssh #Local.To share ssh settings inside a container(The following is omitted)
      - /var/run/docker.sock:/var/run/docker.sock #I'm uncommenting, but I don't really understand the necessity. Please tell me ...
    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" 

--Especially, it is important to modify command. If you keep the original description, the server will not start because it overwrites the command (in this case, the rails server start command) of the backend of the parent docker-compose.yml. Bring the original description and add while sleep 1000; do:; done at the end. --If the user on the container side is using a container that is not root, such as a circleci container, it is necessary to specify the environment variable HOME in "environment". For more information, see this article.

4. Open with Remote --Containers

1. Now that the settings are complete, open the cloned api-okapi (or front-okapi) directly under this repository from "open workspace" of "file".
2. Click the icon at the bottom left and select Remote-Containers: Reopen in Container.
3. The container will start automatically and VS Code will open inside the container. (If you need to build, it will take a long time)

Differences on the front side

--When setting the front side, make sure that only frontend is included in runServices.

devcontainer.json(Only the corrected part)

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

--In this way, by separating the services that start on the backend side and the frontend side, even if you start the backend side and frontend side with Remote --Containers at the same time, you can rest assured that the services started in each repository will not collide. (May not be necessary. Please tell me who is familiar with it.) --Please note that if depends_on is specified in the parent docker-compose.yml, it will start even if you remove it from the runServices setting.

Post-installation settings

Change VScode editor settings

--Example: Make ESLint run the format every time you save a .ts file --Correct in settings of .devcontainer / devcontainer.json in each repository. --This is an alternative to .vscode/settings.json.

jsonc:.devcontainer/devcontainer.json

{
	"settings": {
		"editor.codeActionsOnSave": {
			"source.fixAll.eslint": true //Format with ESLint when saving a file
		}
		...
	},
}

Change VScode plugin settings

--Example: Insert the eslint VScode plugin --Modify in extensions of .devcontainer / devcontainer.json in each repository. --The ID of each plug-in can be obtained by right-clicking the corresponding plug-in in the extension pane of VScode and selecting "Copy extension ID". --As usual, you can add plugins from the VScode Extensions pane, but in this case it doesn't seem to be added to other developers' environments? ..

jsonc:.devcontainer/devcontainer.json

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

Change bash settings

--Example: Insert a completion script for the git command --Prepare a file such as .bashrc, modify volume of docker-compose.yml, and mount it directly under the home directory (/ root in this case) on the container side. .. --In the following, the bash-config folder is prepared under project-docker, and the mount is set with docker-compose.yml of the parent ball.

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
    ...

--If you want to change the bash settings in each repository, it is a good idea to prepare a bash-config folder under each repository and change the settings in docker-compose.extend.yml.

reference

VSCode Remote Container related

-VSCode Remote Container is good -Open the development environment launched with Docker with VS Code! -Use Docker development environment with VS Code Remote Development

Settings related after installation

-How to install ESLint and Prettier in TypeScript project (setting with + VS Code) -"Do not complement Git" "Use git status 100 times a day" Good news for you [git-completion and git-prompt]