Summary of steps for developing in Docker container with VS Code

Introduction

I can't deny the feeling now, but I often forget how to write devcontainer.json, so I'll leave it in the article as a memorandum for myself.

Installation procedure

Add extensions to VS Code

To connect to the development environment inside the Docker container with VS Code, the extension Remote Development You will need it, so let's install it.

vscode.png)

Add devcontainer.json

After adding the extension, let's prepare the configuration file devcontainer.json and the storage folder.

/ProjectRoot
  └ .devcontainer
      └　devcontainer.json

Create a .devcontainer folder under the root folder of the project you want to use Remote Development, and create a devcontainer.json there.

In devcontainer.json, describe the definition of the Docker container to be expanded as shown below (docker-compose.yml in the example below), the VS Code extension you want to use, the port forwarding settings, etc. To go.

{
    "name": "sample_project",
    "dockerComposeFile": "../docker-compose.yml",
    "service": "web",
    "extensions": [
        "mhutchie.git-graph",
    ],
    "forwardPorts": [
        8080
    ],
    "workspaceFolder": "/app",
}

For details on how to set it, please read the official document devcontainer.json reference, but it has been translated into Japanese. Besides, there are many setting items, so I picked up the setting items that I often use and summarized them.

image

A single Docker container used for development Docker Hub, [Azure Container Registry](https://azure.microsoft.com/ja-jp/services/container- Set when referencing from registry /). (Both require login, so you need to have an account in advance.)

dockerFile

Set up a single Docker container for development when using a local Dockerfile.

dockerComposeFile

Set multiple Docker containers used for development when using local docker-compose.yml. (It is necessary to set service, which will be described later, to uniquely set the container to actually board.)

Please note that the path to the specified docker-compose.yml must be relative to devcontainer.json. (If you put it under the root of the project, it will be ../docker-compose.yml.)

service

This item is indispensable when using dockerComposeFile, and set the service name of the container to be actually loaded during development from the definition of docker-compose.yml. (In the case of web services, I think that it will be a container for application servers in most cases)