개발자들에게 원격 서버에서의 작업은 이제 일상이 되었습니다. Visual Studio Code의 Remote – SSH 기능을 활용하면 로컬 환경에서 원격 서버의 코드를 쉽게 편집하고 관리할 수 있습니다. 이 글에서는 VSCode Remote – SSH 설정 방법을 단계별로 알아보겠습니다.
VSCode Remote – SSH 사용 장점
VSCode Remote – SSH 확장을 사용하면 원격 서버에서 VSCode의 기능을 활용하여 편리하게 코드 작성, 편집을 할 수 있습니다. 폴더 탐색기를 이용해서 쉽게 파일을 관리할 수 있고(드래그앤 드롭으로 업로드 또는 다운로드 가능) 서버에서 Docker를 사용한다면 추가 확장 프로그램을 이용해서 복잡한 명령어를 사용하지 않고 컨테이너에 접속해서 파일 수정 업/다운로드가 가능합니다.
사전 준비 사항
1. Visual Studio Code 설치하기
원격 개발을 시작하기 전, 먼저 로컬 컴퓨터에 Visual Studio Code가 설치되어 있어야 합니다. 아직 설치하지 않았다면, Visual Studio Code 다운로드 페이지에서 운영체제에 맞는 버전을 다운로드하여 설치하세요.
2. Remote Development 확장 설치하기
- VS Code를 실행합니다
- 왼쪽 사이드바에서 확장(Extensions) 아이콘을 클릭합니다
- 검색창에 “Remote Development”를 입력합니다
- Microsoft에서 제공하는 Remote Development 확장 팩을 찾아 설치합니다
이 확장 팩은 Remote – SSH, Remote – Containers, Remote – WSL 등 여러 원격 개발 도구를 포함하고 있습니다.
Remote – SSH 설정 단계
1. SSH 설정 파일 열기
- VS Code에서
F1키를 눌러 명령 팔레트를 엽니다 - “Remote-SSH: Open Configuration File”를 입력 검색하고 리스트에서 선택합니다
- 설정 파일 위치를 선택하라는 메시지가 나타나면, 기본 위치(보통
~/.ssh/config)를 선택합니다
2. SSH 구성 정보 추가하기
설정 파일에 원격 서버 정보를 다음 형식으로 추가합니다.
IdentityFile은 옵션으로 인증서를 사용해서 로그인 하는 경우 키 파일의 경로를 입력합니다. 이 항목을 제거하면 로그인 할 때 암호를 입력하는 창이 나옵니다.
Host <별칭>
HostName <서버 주소>
User <사용자 이름>
port <포트 넘버>
IdentityFile <SSH 키 파일 경로> 예를 들어, 다음과 같이 작성할 수 있습니다:
Host myserver
HostName 192.168.1.1
User myusername
Port 22
IdentityFile ~/.ssh/id_rsa 3. 원격 서버에 연결하기
- 명령 팔레트(
F1)를 열고 “Remote-SSH: Connect to Host…”를 검색해서 선택합니다 - 방금 추가한 HostName이 나타나고(서버별칭) 선택합니다.
- 창이 새로 열리면서 처음 연결인 경우 리모트 호스트의 플렛폼을 선택하라고 나오는데 보통 리눅스이기 때문에 “Linux”를 선택합니다.
- 인증서 설정을 안했으면 비밀번호 입력창이 나타납니다.
- 잠시 기다리면 VSCode 관련 설정 파일들을 서버에 설치하고 접속이 완료됩니다.
4. 연결 확인 및 작업 시작
연결이 성공적으로 이루어지면 VS Code 창의 왼쪽 하단에 연결된 서버 이름이 표시됩니다.
왼쪽 사이드 메뉴에서 첫번째 탐색기를 선택하고 “Open Folder” 누르면 SSH로 접속한 리눅스 서버의 사용자 홈 계정의 위치가 나옵니다. 원하는 위치를 선택하고 “OK”버튼 누르면 패스워드 입력창 나오고 입력해주면 탐색기에서 편리하게 파일을 선택 열고 편집할 수 있습니다.
처음 실행한 경우 폴더안에 있는 파일들을 신뢰하겠느냐고 묻는 창이 나옵니다. Yes 버튼을 누르고 넘어갑니다.
터미널 사용이 필요하다면 윗쪽 메뉴바에서 “터미널” -> “뉴 터미널”을 선택하면 새로운 터미널 창이 아래쪽에 열립니다. 이제 터미널에서 컴파일을 하거나 명령어를 사용해서 실행이 가능합니다.
VSCode Remote -SSH 인증서 로그인 설정 방법
VSCode Remote -SSH 인증서 로그인 방식은 접속시 패스워드를 입력하지 않아도 돼서 편리하고 보안에도 유리합니다.
설정방법은 client에서 ssh key 생성 -> 공개키 서버에 업로드 -> 업로드한 공개키를 ssh 로그인에 사용할 수 있도록 적용하기 입니다.
Client에서 ssh key 만들기
mac 또는 windows 에서 사용하는 명령어는 같습니다.
windows 는 CMD 창을 열고 mac은 터미널을 열어서 다음 명령어를 입력합니다.
ssh-keygen -t rsa -b 4096
진행 과정에 인증서를 저장할 위치와 별도 암호를 설정할지 묻는데 입력해도 되고 그냥 엔터치고 넘어가도 됩니다.
두 개의 파일이 생성되는데 하나는 개인키고 다른 하나는 공개키입니다. 화면에 나오는 폴더 위치로 가서 ssh 키 생성을 확인합니다.
Server에 ssh key 복사 및 적용하기
pub확장자가 공개키로 이 파일을 서버로 업로드 해줍니다. 인증서 생성 과정에서 파일 이름을 입력하지 않았으면 파일 이름은 id_rsa.pub 입니다.
위에서 VSCode Remote -SSH 연결설정을 완료했다면 드래그 앤 드롭으로 쉽게 서버로 인증서 파일을 복사할 수 있습니다.
원격 서버의 임의의 폴더로 공개키를 복사하고 원격 서버의 터미널에서 공개키를 복사한 폴더로 이동 다음 명령어를 입력합니다.
cat id_rsa.pub >> ~/.ssh/authorized_keys
인증서 로그인을 위한 정보등록이 완료되고 위에 VSCode의 ‘SSH 구성 정보 추가하기’에서 IdentityFile 항목에 Client에서 생성한 개인키의 파일경로를 입력하면 됩니다.
VSCode에서 다시 접속시도 해보면 패스워드 없이 바로 접속되는 것을 확인할 수 있습니다.
VSCode Remote -SSH 접속 오류: 무한 로딩 해결방법
VSCode Remote -SSH 연결 중 오류가 발생하는 여러가지 원인이 있는데 제가 경험했던 오류에 대한 해결방법을 적어봅니다.
Server의 SSH 설정에서 AllowTcpForwarding 을 yes로 설정
다른 SSH 접속 프로그램으로 서버에 연결하고 아래 명령어를 입력 항목을 추가해줍니다.
sudo nano /etc/ssh/sshd_config #/ect/ssh/sshd_config ... AllowTcpForwarding yes ...
입력 후 저장하고 나와서 ssh를 재시작 해줍니다.
sudo systemctl restart ssh
VSCode에서 다시 연결을 시도해봅니다.
Server에 home 폴더가 생성되어 있지 않은 경우
특정 리눅스 버전에서 기본값으로 사용자 home 폴더가 생성되지 않게 설정되어 있는데 예) debian linux 기반 openmediavault에서 사용자 홈 폴더가 활성화 되어 있지 않은경우 VSCode Remote -SSH 접속 오류가 발생한다면 사용자 home 폴더를 활성화 해주면 문제가 해결됩니다.
추가 팁
- SSH 키 인증: 비밀번호 대신 SSH 키를 사용하면 더 안전하고 편리하게 연결할 수 있습니다
- 포트 포워딩: 원격 서버에서 실행 중인 웹 서버 등에 접근하기 위해 포트 포워딩을 설정할 수 있습니다
- 확장 설치: 원격 서버에서 작업할 때 필요한 확장 프로그램을 원격 환경에 설치할 수 있습니다
마치며
Visual Studio Code의 Remote – SSH 기능은 개발자가 원격 서버에서 효율적으로 작업할 수 있게 해주는 강력한 도구입니다. 이 설정을 통해 로컬 환경의 편안함을 유지하면서도 원격 서버의 리소스를 활용할 수 있습니다.
문제가 발생하거나 더 자세한 정보가 필요하다면, Microsoft의 공식 문서를 참고하세요. 원격 개발의 효율성을 경험해 보시기 바랍니다!
