VS Code local/remote container 개발환경
Atom 에디터의 remote-ftp extension이 너무 편해서 그 전에 원격으로 작업할 일이 있으면 vscode 보다 atom을 사용했었는데 2019년 5월에 vscode에도 괜찮은 원격 패키지가 나왔습니다.
이 글 에서는 vscode에서 remote development extension을 설치하는 방법과, Local 에서 실행되는 docker container에 접속하는 방법, 원격 EC2에 접속하는 방법을 다룹니다.
1. Remote Development Extension 설치
vscode의 Extensions 버튼을 클릭 후, remote development 를 검색 후 install 합니다.
위와 같이 검색이 안 될경우 아래 링크를 클릭합니다.
링크에 접속 후, 아래와 같이 install을 클릭하면 vscode에서 해당 extension을 볼 수 있습니다. vscode에서 install을 누르면 됩니다.
2. Local 컨테이너 접속
제 로컬 환경에 아래와 같이 node 라는 이름의 컨테이너가 실행되고 있습니다.
vscode 에서 F1을 클릭후 remote-container를 검색합니다.
Attach to Running Container를 클릭합니다. 그러면 아래와 같이 실행중인 container가 보입니다.
node를 선택하면 새로운 vscode가 켜질겁니다. 아래 화면처럼 open folder를 클릭합니다.
open folder를 클릭 후 아래와 같이 경로를 선택할 수 있습니다. 이 때 선택하는 경로는 실제 container 내부의 경로입니다. 최상위 디렉토리를 클릭해보겠습니다.
클릭하면 vscode 내부에서 원격 셋팅을 위해 약간의 시간이 걸린 후 container 내부의 디렉토리 정보를 보여줍니다. 아래 1번은 실제 container 내부의 디렉토리이고 ctrl + shift + ` 버튼을 클릭하면 2번처럼 내부 터미널에 대한 리눅스 명령어를 사용할 수 있습니다.
물론 local container에서 volume 옵션으로 디렉토리를 동기화 하여 개발할 수도 있지만 위와 같은 방법으로 container 내부의 소스를 직접 변경하여 개발할 수도 있고 매번 docker exec 로 컨테이너 내부의 명령어를 입력하는 대신, vscode에서 직접 리눅스 명령어를 입력할 수 있습니다.
3. 원격 EC2 접속
원격에 접속하기 전에 ssh 키 설정을 해야 합니다. 우선 cmd 창을 열고 아래와 같이 ssh key를 생성합니다.
ssh-keygen -t rsa -b 4096 -f C:\Users\user\.ssh\id_rsa-remote-ssh
생성한 키를 scp로 EC2에 업로드합니다. 아래 예시 명령어는 C:\Users\user\.ssh\id_rsa-remote-ssh.pub 파일을 EC2 주소의 home/ubuntu 경로로 복사하겠다는 의미입니다.
scp -i [pem 파일] [EC 2로 복사할 ppk 파일] ubuntu@EC 2 주소:복사할 경로ex)
scp -i EC2_key.pem C:\Users\user\.ssh\id_rsa-remote-ssh.pub ubuntu@ec2주소입력하세요:/home/ubuntu
EC2에 ssh로 접속하여 scp로 복사한 public key를 읽어 authorized_keys 파일에 추가합니다.
cat id_rsa-remote-ssh.pub >> ~/.ssh/authorized_keysEC2 에서 필요한 ssh key 설정은 끝났으니 이제 접속합니다. F1을 누르고 명령창에서 remote-ssh connect to host를 누릅니다.
그럼 아래와 같은 화면을 볼 수 있습니다. Add New SSH Host를 클릭합니다.
EC2 정보를 입력하는 창이 나옵니다. 예시를 보여주므로 저희도 아래 창에 ssh 계정@EC2주소 -A 를 입력합니다.
EC2 주소를 입력하면 어떤 config 파일을 사용할지 묻습니다. 저는 user/.ssh/config 파일에 클릭합니다.
클릭하면 아래와 같이 config 파일이 열리면서 위에서 입력한 EC2 주소로 셋팅됩니다.
여기에 아래와 같이 ssh 비밀키 정보를 추가합니다. 위에서 EC2 서버에 id_rsa-remote-ssh.pub 파일 정보를 authorized_keys 파일에 추가했습니다. 이에 매칭되는 비밀키 정보를 IdentityFile 에 명시해줍니다.
다시 vscode에서 F1을 클릭 후 명령창에서 remote-ssh connect to host 를 클릭합니다. 그럼 우리가 추가한 EC2 정보가 보일겁니다. 이를 클릭합니다.
클릭하면 새로운 vscode 창이 뜨면서 원격을 위한 셋팅을 내부적으로 합니다. 아래 Open Folder를 누르면 원격 EC2 에서 작업할 디렉토리를 선택할 수 있습니다.
작업할 소스가 있는 디렉토리를 열어서 수정하면 바로 원격에 반영되며 Ctrl + Shift + ` 키를 누르면 원격 터미널이 열리면서 바로 원격에서 리눅스 명령어를 사용할 수 있습니다.
ssh key 설정과 관련해서 저는 .ssh 디렉토리가 생성 및 적절한 권한이 있다고 가정했습니다. 만약에 .ssh 디렉토기 없다면 생성하고 권한을 주는 정보는 공식 홈페이지에서 볼 수 있습니다.
vscode ssh key 설정 공식 홈페이지.
