By Kesus Kim

컨테이너를 이용하여 프로젝트 단위에서 문제 없이 설정할 수 있는 궁극의 개발 환경 설정 가이드

필요 소프트웨어

  • Docker Desktop
    • Windows 10 Pro 이상 : Hyper-V 기반 동작
    • 그 이외의 Windows : VirtualBox 기반 동작
    • Mac OS X : LxC 기반 동작
    • Linux : 테스트 필요
  • VSCode
    • Remote Development Extension 설치

      /images/ulti-devenv-setup/Untitled.png

Windows 10 Home 사용자라면, 다음을 참고하면 Hyper-V 를 설치할 수 있는 것으로 보임. (확인 필요)

윈도우10 Home Hyper-V 설치 및 활성화

Getting Started

필요 소프트웨어가 다 설치되었다면, VS Code 를 키고 다음 단계를 따르면 된다.

  1. VS Code 시작

  2. 하단 버튼 클릭 후 Remote-Containers: Clone Repository in Container Volume… 클릭

호스트 내에 존재하는 디렉토리 혹은 VSCode Workspace 로 작업할 경우 Remote-Containers: Open Folder / Workspace in Container… 를 선택해주자.

  1. 작업할 프로젝트의 Repository Git URL 을 기재

  2. 생성할 Volume 설정.

  • Create a unique volume: 해당 프로젝트만을 위한 독립적인 공간.
  • Create a new volume: 다른 프로젝트에서도 사용할 수 있는 공유 공간.

우리는 이 프로젝트를 위한 독립적인 공간을 만들기 위해 ‘Create a unique volume’ 을 클릭해주자.

다른 프로젝트도 접근해야할 공간을 만들어야 한다면 ‘Create a new volume’ 을 클릭해주면 된다.

사진 상에서 vsc-remote-sample 이라는 Volume 은 이전에 만들어진 공유 공간이다.

  1. 제대로 설정이 되었다면 프로젝트가 열린다.

Minor Tips

이미지, 폰트 등의 파일 삽입

Windows File Explorer 에서 파일을 컨테이너 안으로 주입할 수도 있다. ( VS Code 의 막강한 기능 덕분에…)

가령 다음과 같이 perl.jpg 을 프로젝트 내의 img 로 넣고 싶다고 하자.

그냥 이미지를 마우스로 끌어서 드래그앤드랍으로 넣으면 된다.

Deeper Inspection

잘 살펴보면, 프로젝트 내에 .devcontainer 라는 디렉토리가 존재함을 볼 수 있다. (셋업이 안되어 있을 경우 Windows 에서는 Ctrl + Shift + P, Mac OS 에서는 Command + Shift + P 를 눌러서 Command Pallete 을 띄운 후 Remote-Containers: Add Development Container Configuration Files… 을 눌러서 추가해주자.)

대략 내용을 살펴보면, 해당 개발 환경을 정의하는 Dockerfile 과, VS Code 에서 사용하기 위한 JSON 파일로 이루어져있음을 알 수 있다.

JSON (devcontainer.json) 의 각 필드의 내용은 다음과 같다.

devcontainer.json specification

Name Description
name 컨테이너 이름
build 컨테이너 빌드 ( docker build ) 시 사용될 설정
build.dockerfile Dockerfile 명
build.args docker build —build-arg 로 포함되는 arguments. Dockerfile 내의 ARG.
runArgs 빌드 된 컨테이너가 docker run 으로 실행될 때 사용되는 설정
settings .vscode/settings.json 로 사용될, VS Code 가 참조하는 에디터 설정값
extensions 해당 프로젝트 내에 같이 설치될 VS Code Extension
forwardPorts 해당 프로젝트 내에서 사용될 Port. VS Code 는 이 설정 값을 기준으로 localhost 로 어떤 포트를 포트 포워딩 할지를 참고함.
(적어주지 않아도, 동작은 하니 문제 없음)
postCreateCommand 컨테이너가 생성된 후 실행되는 커맨드
remoteUser 컨테이너 내의 사용자 명

관련한 더욱 자세한 내용은 https://code.visualstudio.com/docs/remote/containers#_getting-started 을 살펴보면 된다.