Dev Containers 튜토리얼

이 튜토리얼에서는 Dev Containers 확장 프로그램을 사용하여 Docker 컨테이너에서 Visual Studio Code를 실행하는 방법을 안내합니다. 이 튜토리얼을 완료하기 위해 Docker에 대한 사전 지식이 필요하지 않습니다.

Docker 컨테이너 내부에서 VS Code를 실행하는 것은 여러 가지 이유로 유용할 수 있지만, 이 워크스루에서는 Docker 컨테이너를 사용하여 로컬 환경과 분리된 개발 환경을 설정하는 데 중점을 둘 것입니다.

전제 조건

Visual Studio Code가 설치되어 있어야 합니다.

Docker 설치

컨테이너를 생성하고 관리하려면 Docker가 필요합니다.

Docker Desktop

Docker Desktop 또는 원격 호스트의 Docker 또는 Docker 호환 CLI와 같은 대체 Docker 옵션을 다운로드하여 설치하십시오.

Docker 시작

Docker Desktop 애플리케이션을 실행하여 Docker를 시작합니다. 활동 트레이에서 Docker 고래 아이콘을 보면 실행 중임을 알 수 있습니다.

Docker가 시작되는 데 몇 분이 걸릴 수 있습니다. 고래 아이콘이 애니메이션이면 시작 중일 가능성이 높습니다. 아이콘을 클릭하여 상태를 볼 수 있습니다.

Docker 확인

Docker가 실행되면 새 터미널 창을 열고 다음 명령을 입력하여 모든 것이 작동하는지 확인할 수 있습니다.

docker --version
# Docker version 18.09.2, build 6247962

확장 설치

Dev Containers 확장 프로그램을 사용하면 Docker 컨테이너 내에서 Visual Studio Code를 실행할 수 있습니다.

Dev Containers 확장 프로그램 설치

설치 확인

Dev Containers 확장 프로그램을 설치하면 가장 왼쪽에 새로운 상태 표시줄 항목이 표시됩니다.

원격 상태 표시줄 항목은 VS Code가 어떤 컨텍스트(로컬 또는 원격)에서 실행 중인지 빠르게 표시하며, 항목을 클릭하면 Dev Containers 명령이 표시됩니다.

샘플 가져오기

Docker 컨테이너를 만들기 위해 Node.js 프로젝트가 있는 GitHub 리포지토리를 열 것입니다.

명령 팔레트(F1)를 열어 Dev Containers: Try a Dev Container Sample... 명령을 실행하고 목록에서 Node 샘플을 선택합니다.

참고: vscode-remote-try-python 또는 vscode-remote-try-java와 같은 다른 dev container 샘플도 있지만, 이 튜토리얼에서는 vscode-remote-try-node를 사용합니다.

컨테이너 빌드를 기다립니다.

그러면 창이 다시 로드되지만 컨테이너가 아직 존재하지 않으므로 VS Code에서 컨테이너를 생성하고 샘플 리포지토리를 격리된 컨테이너 볼륨에 복제합니다. 이 작업에는 시간이 걸릴 수 있으며 진행률 알림이 상태 업데이트를 제공합니다. 다행히 컨테이너가 이미 존재하므로 다음 번에 폴더를 열 때는 이 단계가 필요하지 않습니다.

컨테이너가 빌드된 후 VS Code는 자동으로 컨테이너에 연결하고 로컬 파일 시스템의 프로젝트 폴더를 컨테이너에 매핑합니다.

컨테이너 확인

컨테이너가 실행되고 연결되면 상태 표시줄 왼쪽 하단에서 원격 컨텍스트가 변경되었음을 확인할 수 있습니다.

환경 확인

컨테이너에서 개발할 때 좋은 점 중 하나는 로컬 개발 환경에 영향을 주지 않고 애플리케이션에 필요한 특정 버전의 종속성을 사용할 수 있다는 것입니다.

이 튜토리얼의 특정 컨테이너에는 Node.js v18이 설치되어 있습니다. 새 터미널 터미널 > 새 터미널(⌃⇧` (Windows, Linux Ctrl+Shift+`))을 열고 다음을 입력하여 확인할 수 있습니다.

node --version; npm --version

다음과 같은 버전이 표시되어야 합니다.

애플리케이션 실행

이제 F5를 누르면 컨테이너 내부에서 애플리케이션이 실행됩니다. 프로세스가 시작되면 https://:3000으로 이동하면 간단한 Node.js 서버가 실행되는 것을 볼 수 있습니다!

컨테이너 연결 종료

컨테이너에서 세션을 종료하고 파일 > 원격 연결 닫기를 선택하여 VS Code를 로컬에서 다시 실행할 수 있습니다.

작동 방식

다음 섹션에서는 Dev Containers 확장 프로그램이 컨테이너를 설정하고 구성하는 방법에 대해 더 자세히 설명합니다.

Dev Containers 확장 프로그램은 .devcontainer 폴더의 파일, 즉 devcontainer.json 및 선택적 Dockerfile 또는 docker-compose.yml을 사용하여 dev container를 생성합니다.

지금까지 살펴본 예제에서 프로젝트에는 devcontainer.json이 포함된 .devcontainer 폴더가 있습니다. devcontainer.json은 mcr.microsoft.com/devcontainers/javascript-node:0-18 이미지를 사용합니다. 이 이미지는 devcontainers/images 리포지토리에서 더 자세히 살펴볼 수 있습니다.

먼저, 제공된 Dockerfile 또는 이미지 이름(이 예제에서는 mcr.microsoft.com/devcontainers/javascript-node:0-18)에서 이미지를 빌드합니다. 그런 다음 devcontainer.json의 일부 설정을 사용하여 컨테이너를 생성하고 시작합니다. 마지막으로 Visual Studio Code 환경이 devcontainer.json의 설정에 따라 다시 설치되고 구성됩니다. 예를 들어, 이 예제의 dev container는 streetsidesoftware.code-spell-checker 확장 프로그램을 설치합니다.

참고: 기본 이미지에 포함된 내용에 따라 컨테이너에 추가 구성이 이미 추가됩니다. 예를 들어 위에서 streetsidesoftware.code-spell-checker 확장 프로그램을 볼 수 있으며, 컨테이너에는 mcr.microsoft.com/devcontainers/typescript-node의 일부이기 때문에 "dbaeumer.vscode-eslint"도 포함됩니다. 이는 devcontainer.json을 사용하여 미리 빌드할 때 자동으로 수행되며, 미리 빌드 섹션에서 자세히 알아볼 수 있습니다.

이 모든 작업이 완료되면 Visual Studio Code의 로컬 복사본이 새 dev container 내에서 실행되는 Visual Studio Code Server에 연결됩니다.

devcontainer.json

devcontainer.json은 기본적으로 dev container가 빌드되고 시작되는 방식을 결정하는 구성 파일입니다.

//devcontainer.json
{
  "name": "Node.js",

  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  },

  // "forwardPorts": [3000],

  "portsAttributes": {
    "3000": {
      "label": "Hello Remote World",
      "onAutoForward": "notify"
    }
  },

  "postCreateCommand": "yarn install"

  // "remoteUser": "root"
}

위 예제는 튜토리얼에서 사용한 vscode-remote-try-node 리포지토리에서 발췌한 것입니다.

devcontainer.json 옵션의 전체 목록을 검토할 수 있습니다.

축하합니다.

축하합니다! 이 튜토리얼을 성공적으로 완료했습니다!

지금까지 dev container를 사용하여 수행할 수 있는 작업에 대한 간략한 개요를 살펴보았습니다. 다음 단계로, 로컬 컴퓨터의 기존 폴더를 컨테이너에서 여는 방법 또는 GitHub 리포지토리 또는 PR을 컨테이너에서 여는 방법을 살펴보는 것을 권장합니다.

다른 원격 개발 확장 프로그램을 확인해 보세요.

• 원격 - SSH
• WSL

또는 원격 개발 확장 팩을 설치하여 모두 가져올 수 있습니다.

문제 해결

Docker 컨텍스트 확인

새로운 Docker 설치를 사용하지 않고 Dev Containers: Try a Dev Container Sample... 샘플이 현재 컨텍스트에 문제가 발생하는 경우 Docker 컨텍스트를 확인해야 합니다. 새 설치에는 'default' 컨텍스트가 있으며 이를 현재 컨텍스트로 다시 설정할 수 있습니다.

# Displays the list of contexts, '*' denotes the current context
docker context list

# Switches the list to the 'default' context
docker context use default