VSCode에서 Docker 컨테이너 내에서 개발하기 위한 절차 요약

소개

이제 느낌도 부정할 수 없지만, devcontainer.json의 쓰는 법을 잘 잊기 때문에, 자신용의 비망록도 겸해 기사에 남겨 두려고 생각합니다.

도입 절차

VSCode에 확장 기능 추가

VSCode에서 Docker 컨테이너의 개발 환경에 연결하려면 확장 프로그램Remote Development이 필요하므로 설치합니다.


vscode.png)

devcontainer.json 추가

extension이 추가되면 다음은 설정 파일devcontainer.json과 저장용 폴더를 준비합시다.

/ProjectRoot
  └ .devcontainer
      └　devcontainer.json

Remote Development를 사용하려는 프로젝트의 루트 폴더 아래에 .devcontainer 폴더를 만든 다음 devcontainer.json를 만듭니다.
devcontainer.json 에는, 아래와 같이 전개하는 Docker 컨테이너의 정의(아래의 예라고 docker-compose.yml ), 이용하고 싶은 VSCode 의 확장 기능이나, 포트 포워딩의 설정등을 기재해 갑니다.

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

설정 방법에 대한 자세한 내용은 공식 문서는 devcontainer.json reference을 읽고 싶습니다만, 일본어로 번역되어 있지 않은 데다 설정 항목이 많기 때문에, 필자가 자주 사용하는 설정 항목에 픽업 해 정리 시도했습니다.

이미지

개발에 사용하는 단일 Docker 컨테이너를 DockerHub , Azure Container Registry 에서 참조하는 경우로 설정합니다. (둘 다 로그인이 필요하므로 미리 계정을 준비해야 합니다)

dockerFile

개발에 사용하는 단일 Docker 컨테이너를 로컬 Dockerfile을 사용할 때 설정합니다.

dockerComposeFile

개발에 사용할 여러 Docker 컨테이너를 로컬 docker-compose.yml을 사용하는 경우 설정합니다. (아래 설명 service을 설정하고 실제로 타는 컨테이너를 고유하게 설정해야합니다.)

주목할 점은 지정하는 docker-compose.yml까지의 경로가 devcontainer.json의 상대 경로여야 한다는 것입니다. (프로젝트의 루트 아래에 있다면 ../docker-compose.yml입니다.)

서비스

dockerComposeFile를 사용하는 경우 필수 항목으로 docker-compose.yml의 정의 중 실제로 개발시에 탑승하는 컨테이너의 서비스 이름을 설정합니다. (웹 서비스의 경우 대개는 애플리케이션 서버 용 컨테이너가 될 것입니다)