[VSCode] 아마존 AWS 서버 VSCode로 접속하는 방법

Node.js 기반으로 개발을 하게되면 개발툴이 필요합니다. 보통 VSCode를 많이 사용하고 그만큼 Extensions가 많이 있어서 편리합니다. 아무리 편리해도 그 기능들이 어디있고 어떻게 사용하는지 알지 못하면 어렵긴 마찬가지죠.

 

 

이번 포스팅은 VSCode를 이용해서 아마존 AWS 서버에 접속하는 방법입니다. SSH를 이용하는 다른 툴들도 좋지만 쉘로 접속하기보다는 개발하는 분들에게는 개발툴에서 바로 붙어서 사용하면 더 편리한 방법입니다.

---

VSCode Extensions 다운로드

먼저 VSCode를 실행해 줍니다. 만약 VSCode를 다운로드 받지 않으셨다면 아래 링크에서 다운로드하시면 됩니다.

VSCode 다운로드 : https://code.visualstudio.com/

 

▼ VSCode가 실행되었다면 좌측 하단에 Extensions라는 메뉴가 있습니다. 이 메뉴를 클릭하고 상단 검색에 'remote' 라는 글자를 입력해서 검색해줍니다.

 

VSCode Extension 검색

검색 결과 중에서 Remote-SSH 라는 검색 결과가 있습니다. 이 결과를 클릭하고 Install 버튼을 눌러서 VSCode에 원격으로 연결이 가능한 SSH 프로그램을 설치하도록 합니다.

 

설치가 완료되면 톱니바퀴 모양을 클릭해서 설정(Settings)을 하도록 합니다.

---

Remote SSH Extensions 설정

먼저 설치(Install)한 Remote SSH Extensions의 설정을 들어갑니다. 톱니바퀴를 누르시면 Extension Settings라는 메뉴가 등장하고 이를 누르시면 됩니다.

 

▼ 설정할 파일은 아래와 같이 2개의 파일입니다. 첫 번째는 원격 접속을 위해서 설정하는 VSCode의 설정파일과, 두 번째는 설정파일에서 이 키를 사용해서 접속하겠다는 설정입니다.

 

 

먼저 아마존 AWS 서버에서 다운로드 받는 키를 확인해줍니다. 키는 다운로드하게 되면 확장자가 .pem 라는 확장자를 가지고 있는 파일입니다. 

 

저의 경우 키파일의 위치를 [내 계정 폴더]\[.ssh]\ 이 곳에 넣어두었습니다. 이곳은 설정파일과 같이 놓아둘 수 있기에 편리한 점이 있습니다. 그리고 첫 번째 설정파일의 경로를 적어줍니다.

C:\Users\[내 계정]\.ssh\config

 

경로를 수정했다면 반드시 저장버튼 혹은 Ctrl+S (맥에서는 Cmd+S)를 눌러서 저장합니다.

---

두 번째로 config 파일을 생성하고 접속정보를 채워줄 예정입니다.

▼ 아래 그림과 같이 Remote 메뉴에서 SSH TARGETS에 마우스를 올리면 톱니바퀴 모양의 버튼이 활성화 됩니다. 이 버튼을 눌러주세요

 

 

▼ 버튼을 누르면 위에서 설정한 경로에 config 파일이 나타납니다. 이를 선택해 주시면 파일이 자동으로 생성됩니다.

파일의 내용은 아래과 같이 채워주세요.

Host koonsland
  HostName 접속 IP 또는 URL
  User ec2-user
  IdentityFile C:\Users\koonsland\.ssh\koonsland.pem

• Host는 VSCode에서 확인할 수 있는 구분자 역할을 합니다. 원하는 이름으로 만들어 줍니다.
• HostName은 실제 접속하고자 하는 서버의 주소를 입력합니다. 아마존 AWS 인스턴스 메뉴에 보시면 IP가 있습니다.
• User는 ec2-user로 고정압니다. 아마존 AWS 무료 서버를 사용하고 있기에 기본은 저 계정이지만 다른 계정을 사용한다면 그 계정의 접속 id를 사용하시면 됩니다.
• IdentityFile은 아마존에서 다운받은 .pem 파일의 위치를 넣어주어야 합니다.

 

이 설정이 완료되었다면 이제 접속해 보도록 하겠습니다.

---

VSCode를 이용해서 아마존 AWS 접속하기

설정을 마무리했다면 이제 실제로 접속이 되는지 확인해 보도록 하겠습니다. VSCode의 좌측 메뉴들 중에서 Remote Explorer 버튼이 있습니다. 이 메뉴를 선택합니다.

 

 

Remote Explore의 선택박스에 SSH Targets로 설정되어 있다면 위에서 설정한 config 파일의 Host 이름이 그대로 출력되는 것을 확인 하실 수 있습니다. 마우스를 올리면 오른쪽에 [Connect to Host in New Window] 라는 버튼이 나타나고 이를 선택하면 새로운 VSCode가 열리면서 Host의 운영체제를 선택하라는 버튼이 나옵니다. 저는 아마존 AWS를 Linux로 선택했기 때문에 Linux를 클릭해 주었습니다.

 

▼ 정상적으로 접속되었다면 좌측 하단에 SSH: [Host] 가 출력될 것입니다.

 

이제 [Open Folder] 버튼을 누르고 원하는 디렉토리로 이동해서 개발을 진행할 수 있습니다.

---

저의 경우는 .pem 라는 확장자를 넣어주지 않아서 계속 접속이 안되는 현상이 발생했었습니다. 작은 차이지만 기본 설정들에 무엇인가 어긋나는 경우가 발생하면 안되는 경우가 많으니 초기 셋팅이 가장 힘든 부분인것 같네요. 이상입니다.