SSH 로 접속한 원격 서버의 코드들을 VSCode 에서 바로 보기

Visual Studio Code

개발 환경
- M1 Macbook (2021)
- macOS Monterey 12.3.1

 보통 원격 서버에 접속할 때, 터미널 프로그램을 사용해서 접속한다. 필자는 iTerm 을 사용해서 SSH 원격 접속을 하며, 터미널 창에서 명령어를 통해 원격 서버를 뒤적뒤적 한다. 그런데, 원격 서버에 있는 서버 코드를 수정하거나, 읽어야할 때 터미널 창은 조금 불편하다. Vi 나 Nano 가 있기는 하지만, VSCode 와 같은 에디터에 적응된 필자는 터미널에서 코드를 읽는게 불편했다. 그렇다고 원격 서버에 VSCode 를 설치해서 사용하자니, 뭔가 아깝다는 생각이 들었다. 그래서 원격 서버의 폴더나 파일들을 VSCode 에서 바로 볼 수 있고, 수정이 가능한 환경 구축이 가능하지 않을까 찾아보게 되었다. 가능한 방법들이 존재했고, 타 블로그의 내용을 따라한 과정을 본 글에 정리해둔다.

---

0. VSCode 설치

 VSCode 설치는 워낙 쉽기도 하고, 구글에 검색하면 수많은 글들을 참고할 수 있으므로 생략한다. 아래는 VSCode 공식 홈페이지 링크이다.

Visual Studio Code - Code Editing. Redefined

---

1. Remote Development 설치

 VSCode 의 좌측 메뉴 중에 "확장" 메뉴를 클릭한다. 그리고 "Remote Development" 를 검색하여 해당 확장 프로그램을 설치한다.

 "Remote Development" 외에 "Remote -SSH", "Remote - Containers", "Remote -WSL" 등 비슷해보이는 확장 프로그램들이 있지만, "Remote Development" 만 설치한다면 비슷해보이는 다른 확장 프로그램들도 자동으로 설치된다.

---

2. Remote SSH - PEM 설정

 이제 "Shift + cmd + P" 를 누르거나, "F1" 키를 눌러서 Command Palette 를 열어준다. 그리고 "Remote-SSH: Connect to Host..." 를 검색하여 선택한다.

 SSH 접속에 비밀번호나 PEM 인증이 필요 없다면, 바로 호스트를 추가해서 원격 접속하면 될 듯하다. 하지만, EC2는 기본적으로 PEM 인증 파일을 생성하기 때문에, PEM 원격 접속을 해줘야한다. 그러기 위해서는 연결하기 전에 SSH 연결 설정을 해줘야한다.

 "SSH 호스트 구성...(Configure SSH Hosts)" 메뉴를 클릭하면, 설정 파일의 경로들이 나열된다. 그 중에서 가장 첫번째에 있는 파일을 선택한다.

 그러면 해당 설정 파일이 에디터에 열릴 것이다. 필자는 한 번도 VSCode 로 원격 접속을 해본 적이 없기 때문에 가장 기본적인 파일 내용이 있다.

 이제 해당 파일에서 SSH 접속할 타겟 주소와 그에 매칭되는 PEM 파일을 명시해줄 것이다. AWS 연결에 필요한 요소는 다음과 같다.

• Host : SSH 접속시 표시될 이름. 원하는 것으로 아무거나 해도 상관 없다.
• HostName : AWS 제공해준 Public DNS 주소 (원격 서버의 전체 주소에서 "@" 뒷부분)
• User : AWS 지정한 서버의 유저명 (원격 서버의 전체 주소에서 "@" 앞부분)
• IdentityFile : 해당 서버의 PEM 경로와 파일명

 위 요소들을 적당한 값으로 채워서 SSH Config 파일에 채워준다.

 위와 같이 SSH Config 파일을 채워줬다면, "저장"을 해준다. 그러면 좌측의 "원격 탐색기" 메뉴에서 모니터 모양의 아이콘과 함께 SSH 대상 한개가 "Host" 값을 이름으로 추가 될 것이다.

---

3. SSH 원격 서버 접속

 위 과정을 거친 후에, 다시 Command Palette 를 열어주고, "Remote-SSH: Connect to Host..." 까지 선택해주면, 처음과 다르게 설정 파일에서 추가한 Host 가 목록에 떠있을 것이다.

 추가된 Host 를 클릭하면 새로운 VSCode 윈도우가 열리면서 접속이 된다.

---

4. 원격 서버의 폴더 열기

 원격 서버에 SSH 로 접속한 것은 성공한 것 같으나, VSCode 에 아무것도 나타나지 않아서 당황할 수도 있다. 이제 VSCode 로 작업할 원격 서버의 폴더를 열어주도록 한다.

 원격 접속한 VSCode 윈도우에서 좌측에 "탐색기" 메뉴로 들어가서 [폴더 열기] 버튼을 클릭한다.

 그러면 위와 같이 원격 서버의 폴더와 파일 목록을 볼 수 있다. 최초에 보여주는 목록은 터미널로 원격 서버에 접속했을 때 들어가게 되는 최초 시작 위치와 같다. 보통 "/home/[유저명]" 으로 설정되어 있을 것이다. 이제 해당 위치에서 작업하고자 하는 폴더 위치로 들어간다. 폴더로 선택하고 싶다면, 맨 위에 선택하면서 변하는 현재 위치 경로가 원하는 위치로 갔을 때 "확인" 버튼을 눌러주면 그 위치로 에디터가 열리게 된다.

---

* 참고

[VScode] VScode로 SSH를 통해 원격서버 접속하기

 

Vscode SSH 로 AWS 바로 접속하기