VS Code 와 Google Compute Engine을 연동해보자 (Remote SSH)

MS에서 개발한 VS Code는 간단한 UI와 다양한 편의기능으로 많은 개발자들이 사용하고 있는 코드에디터이다. 나도 VS Code를 메인으로 사용하여 개발하고 있다. GCP를 이용하다보면 Google Compute Engine (GCE) 상의 소스코드를 수정하고 싶을 때가 있다. GCP Console 에서 제공하는 웹 브라우저용 SSH로 들어가서 VIM을 사용하여 소스코드를 수정할 수도 있지만, VIM에 익숙하지 않은 사람이라면 소스코드 수정에 상당히 불편함을 겪을 때가 있다. 이 때, 좀 더 자신에게 익숙한 VS Code로 소스코드를 사용하면 훨씬 더 효율적으로 코딩을 할 수 있을 것이다. 본 블로그에서는 GCE상의 소스코드를 자신의 개발용 PC에서 VS Code로 수정할 수 있도록 SSH 원격연동하는 방법을 알아본다.

 

전제 및 준비사항

다음과 같은 사항이 미리 준비되어 있다는 가정하에 설명을 진행한다.

• Server: Google Compute Engine (GCE): Ubuntu 20.04 가정
  수정하고자 하는 소스코드가 업로드 되어 있는 Server 이다.
• Client PC: Windows 10 을 가정
  개발용 PC이다. 우리는 이 PC를 Server와 연결하여 원격으로 Server의 소스코드를 수정할 것이다.

 

SSH Key 생성하기

 

1. Client PC (자신의 원도우 환경)에서 PuTTYgen 을 준비한다. PuTTYgen 은 여기에서 다운받을 수 있다.

PuTTYgen 다운로드 ('puttygen.exe' 로 된 걸 자신의 운영체제에 맞게 다운받으면 된다)

 

2. PuTTYgen 으로 Public / Private Key 를 생성한다. 'Generate' 버튼을 클릭하면 Key 라는 넓은 공간에 진행바가 나타날 것이다. 이 때 마우스를 이리저리 움직여주면 키 생성이 진행된다. (진행바가 왜 안늘어나지하고 불안해하지말고 마우스를 이리저리 움직여주자!)

 

3. 이제 Private Key를 OpenSSH 방식으로 Export 해준다. 1) Key comment 에 자신의 GCE Linux 계정을 입력한다. 반드시 GCE 계정과 정확히 일치해야 한다! 2) Conversions > Export OpenSSH Key 를 눌러서 저장해준다. 나같은 경우는 확장자 없이 파일명을 'itspjc-openssh' 로 저장해 주었다.

 

4. Public Key를 저장해줄 차례이다. 다시 한번 강조하지만 반드시 GCE의 Linux 계정명이 Key comment에 정확히 들어가야 한다. 정확히 들어가 있는지 확인해주고 Public key 내용을 복사하여 메모장 등을 통해 저장해준다. 나같은 경우는 확장자 없이 'itspjc-public' 으로 저장해 주었다.

이런 메세지가 뜬다면 본 예제에서는 passphrase는 없이 진행하므로 그냥 '예'를 눌러서 진행한다.

 

GCE에 자신의 Public Key 등록하기

1. Compute Engine > VM Instances > 자신의 GCE > VM Instance details -> Edit 로 이동하면 SSH Keys 라는 섹션이 있다. SSH Key 가 가려져 있다면 Show and Edit 을 클릭해주면 현재 해당 GCE에 등록된 SSH Key 를 전부 볼 수 있다. Add item 을 클릭해준다.

2. PuTTYgen 에서 생성한 Public Key 를 복사해서 이곳에 붙여넣어준다. (예제에서는 itspjc-public 에 복붙한 내용이다) 마지막 comment 부분이 자신의 GCE Linux 계정과 동일한지 다시 확인한다. 정상적으로 복사 붙여넣기를 했다면 왼쪽 부분의 'itspjc' 와 같이 comment 가 뜨게 된다. Save를 클릭하여 GCE에 SSH Key 등록을 완료해 준다. 

 

VS Code 세팅

1. VS Code 를 실행하여 Extensions > Remote - SSH 를 설치한다. 이미 설치한 분들은 스킵해도 된다.

2. Remote - SSH 가 잘 설치가 되었다면 왼쪽 탭에 Remote Explorer 라는 탭이 생성된다. Remote Explorer > Configure (톱니바퀴 모양 아이콘) > SSH config 파일 선택 을 한다. 보통 C:\Users\<자신의 윈도우 유저명>\.ssh\config 에 생성된다. 나도 디폴트 그대로 진행하므로 그대로 클릭해준다.

 

3. config 파일을 편집하는 창이 뜬다. 여기에 아래 내용을 추가해준다.

 

입력형식

Host 호스트명(임의지정가능)
    HostName <GCE External IP>
    User <GCE Linux 계정명>
    IdentityFile <PuTTYgen으로 생성한 Openssh 파일 경로>

 

예시

Host train-vm
    HostName 34.xxx.xxx.xxx
    User itspjc
    IdentityFile "C:\Users\Jongchan Park\.ssh\key\itspjc-openssh"

 

4. 내용을 추가하고 저장하면 왼쪽 부분에 호스트명으로 SSH 접속할 수 있는 메뉴가 생성된다. 오른쪽에 보이는 +윈도우 창을 클릭해 접속을 시도해주자. 중간에 GCE의 OS를 물어보는 창이 뜨면 'Linux' 를 선택해주면 된다. (이후로 Yes, No 를 묻는 창이 뜰수도 있는데 Yes 를 눌러서 진행해도 문제없다)

 

5. 연결에 다소 시간이 걸릴 수 있으나 정상적으로 연결이 되면 아래와 같은 화면이 뜬다. 왼쪽의 Open Folder 를 클릭해서 원하는 GCE 내부의 폴더를 선택한 후에 소스코드 편집을 시작해보자.

 

6. 실시간으로 SSH Remote 를 통해 소스코드를 편집하고 있다. 그냥 VS Code 를 쓰듯이 쓰면 되고, 코드를 편집하다가 저장하면 실시간으로 저장된다. 매우 편한 기능이 아닐 수 없다.