Docker를 Visual Studio Code(VS Code)와 통합하면 개발 경험이 크게 향상되어 개발자가 Docker 파일을 효율적으로 생성 및 관리하고, 컨테이너와 이미지를 시각적으로 확인하고, 로그나 터미널에 쉽게 접근할 수 있습니다.이 글에서는 Docker 확장 프로그램을 통해 VS Code에서 Docker를 설정하는 방법에 대한 포괄적인 가이드를 제공합니다.
VS Code에 Docker 확장 프로그램을 설치하는 방법
Docker 확장 프로그램을 설치하기 전에 Docker와 Visual Studio Code가 모두 컴퓨터에 제대로 구성되어 있는지 확인하세요.먼저 VS Code에서 확장 프로그램 뷰를 열고 “Docker”를 검색한 후 Microsoft에서 제공하는 공식 Docker 확장 프로그램을 설치하세요.
설치가 성공적으로 완료되면 편집기의 왼쪽 하단에 Docker/컨테이너 아이콘이 나타나는데, 이는 Docker Explorer를 사용할 수 있음을 나타냅니다.
Docker Desktop과 VS Code 간 연결 설정
Docker Desktop이 실행 중이면 Docker 확장 프로그램과 VS Code가 원활하게 연결됩니다. Docker 설정에 특수 구성(예: 원격 호스트 또는 WSL 통합)이 필요한 경우를 제외하고는 일반적으로 추가 구성이 필요하지 않습니다.
연결을 확인하려면 Docker/컨테이너 아이콘을 클릭하여 Docker Explorer를 실행하세요.실행 중이거나 중지된 컨테이너, 이미지, 레지스트리, 볼륨, 네트워크 등을 확인할 수 있습니다.
VS Code에서 직접 컨테이너, 이미지 및 볼륨 관리
Docker가 VS Code에 완벽하게 통합되어 컨테이너 작업 관리가 그 어느 때보다 쉬워졌습니다.CONTAINERS 섹션에서 실행 중인 컨테이너와 중지된 컨테이너를 모두 편리하게 확인할 수 있습니다.
또한, 컨테이너를 마우스 오른쪽 버튼으로 클릭하면 클릭 한 번으로 컨테이너를 시작, 중지, 다시 시작 또는 제거할 수 있는 옵션이 제공됩니다.
새 이미지를 가져오거나, 기존 설정에서 이미지를 만들거나, 사용하지 않는 이미지를 쉽게 정리할 수도 있습니다.예를 들어, 더 이상 필요하지 않은 이미지를 삭제하려면 해당 이미지를 마우스 오른쪽 버튼으로 클릭하고 ‘ 제거’를 선택하세요.
또한, 컨테이너에 연결된 볼륨을 관리하는 것도 간단합니다.원하는 볼륨을 마우스 오른쪽 버튼으로 클릭하여 검사하거나 수정하기만 하면 됩니다.
또한 네트워크, 레지스트리, Docker 컨텍스트를 탐색하고 관리하고 도움말 및 피드백 섹션에 액세스하여 개발 워크플로를 더욱 최적화할 수 있습니다.
VS Code에서 컨테이너화된 애플리케이션 만들기 및 실행
실습 예제로, Docker 확장 프로그램의 기능을 보여주는 간단한 Node.js Express 애플리케이션을 만들어 보겠습니다.먼저 VS Code에서 프로젝트 폴더를 만들고, 폴더 안에.js라는 이름의 파일을 만들고 index.js다음 코드를 입력하세요.
const express = require("express"); const server = express(()); const PORT = 4000; server.get("/", (req, res) => { res.send("Welcome to our Express app!");}); server.listen(PORT, (() => { console.log(`App running on port ${PORT}`);});
이 기본 코드 조각은 포트 4000에서 수신 대기하는 작은 Express 앱을 구축하고, 루트 URL(/)에 접근하면 “Express 앱에 오신 것을 환영합니다!”라는 메시지로 응답합니다.이는 Dockerfile을 테스트하기 위한 기반을 마련합니다.
다음으로 Dockerfile이 필요합니다. Dockerfile을 직접 생성하고 명령어를 지정하는 대신, Docker 확장 프로그램을 사용하면 이 과정을 간소화할 수 있습니다.⇧⌘PMac에서는 Ctrl+ Shift+ 를, PWindows에서는 +를 눌러 명령 팔레트를 열고 다음 명령을 입력하세요 Add Docker files to Workspace.
제공된 옵션에서 애플리케이션 플랫폼으로 Node.js를 선택하세요.
프로젝트 루트에 있는 “package.json” 파일을 가리키세요.이 파일은 애플리케이션의 기본 구성 파일이며, Docker 확장 프로그램이 필수 Docker 관련 파일을 생성하는 데 도움을 줍니다.
다음으로, Docker가 앱을 적절히 노출할 수 있도록 앱이 활용할 포트 번호를 지정합니다.
Docker Compose 파일을 포함할지 묻는 메시지가 나타나면 예를 선택합니다.
이제 Docker 확장 프로그램은 선택에 따라 Dockerfile, “.dockerignore” 파일, “compose.yaml” 파일을 생성합니다.
Docker 이미지 생성을 진행하려면 Dockerfile을 마우스 오른쪽 버튼으로 클릭하고 이미지 빌드를 선택하거나, 명령 팔레트에서 Docker 이미지: 이미지 빌드를 실행합니다.
빌드 프로세스가 끝나면 Docker Explorer의 이미지 섹션으로 이동하여 새로 만든 프로젝트가 반영된 것을 확인하세요.
이제 이미지를 실행하려면 명령 팔레트를 열고 를 실행하거나 container images: run이미지를 마우스 오른쪽 버튼으로 클릭하고 실행 을 선택하세요.
표시된 목록에서 최신 이미지를 선택하세요.
마지막으로 Docker Explorer의 컨테이너 섹션을 확인하여 애플리케이션이 실행 중인지 확인할 수 있습니다.
앱에 액세스하려면 Docker Explorer에서 실행 중인 컨테이너를 마우스 오른쪽 버튼으로 클릭하고 브라우저에서 열기를 선택하세요.
그 결과, 이전에 지정한 포트를 통해 애플리케이션에 접근하여 컨테이너가 실제로 작동하는 모습을 볼 수 있습니다.
결론
Visual Studio Code에 Docker가 통합되어 개발 프로세스가 간소화되어 개발자는 코딩 환경에서 직접 컨테이너를 효율적으로 구성, 실행 및 제어할 수 있습니다.설정을 완료하면 Docker 파일을 생성하고, 컨테이너와 이미지를 탐색하고, 클릭 한 번으로 로그 또는 터미널 출력을 확인할 수 있습니다.이러한 통합은 애플리케이션 실행 및 테스트를 간소화할 뿐만 아니라 체계적이고 생산적인 워크플로를 유지합니다.
답글 남기기