Visual Studio Code에 Docker 연동하기

수업을 들을 때 Docker를 사용하여 실습을 진행했는데, Docker를 까니까 Visual Studio Code에서 Docker 관련 알림이 뜨기에, 마침 모든 코딩을 Visual Studio로 해결하려 하던 차에 Docker도 연동해보려 한다.

 

먼저, Visual Studio Code와 Docker의 설치는 되어있다고 가정한다.

 

Visual Studio  Code의 장점은 역시 뭐니뭐니해도 확장 플러그인을 필요에 따라 적절하게 설치하여 사용할 수 있다는 점일 것이다.

 

 

 

 

1) Remote Development 설치

 

먼저 아래와 같이 Extension 탭에서 Remote Development를 install해주자.

 

Remote Development 확장 플러그인 설치

 

Remote Development는 VS Code IDE와 Local Host의 Docker 컨테이너를 연동하기 위해 필요하다.

 

 

 

 

2) Docker, Docker Explorer 설치

 

다음으로, docker를 검색하고 'Docker', 'Docker Explorer'를 설치하자.

 

docker, docker explorer 설치

 

'Docker' extension의 경우, Visual Studio Code에 위 사진 왼쪽과 같이 고래모양의 탭을 만들어준다.

'Docker Explorer' extension은 Docker Container, Docker Images, Docker Hub를 관리할 수 있게 해준다.

모두 완료되면 위 사진 왼쪽 막대에서와 같이 '원격 탐색기'와 'DOCKER'가 추가된다.

 

 

 

 

3) VS Code와 Docker 연동

 

'ctrl + shift + p' 또는 'command + shift + p'를 눌러 명령 팔레트를 열고, 아래와 같이 입력한다.

 

remote-containers: attach to Running Container

 

 

엔터를 누른 후, trust하는지에 대한 창이 뜨는데, Got It을 눌러주면, 아래와 같이 현재 실행중인 Container 목록이 뜬다.

 

실행중인 Container 목록 클릭

 

클릭하면 새로운 창에서 VS Code가 실행된다. 여기서 'File → Open Folder'를 클릭하고, Docker를 통해 생성한 디렉토리를 선택해준 후 'ok'를 눌러 진행한다.