본문 바로가기

이것저것 컴퓨터로 한 것들

VS Code Remote 사용하기 - SSH 방식

전문 블로거(?)가 아니라고 생각하고 매번 즉흥적으로 글을 적다보니 포스팅 양식이 매번 제 멋대로네요. 조만간 글을 포스팅 하는 방식에 대해서 조금 고민을 해봐야 할거 같습니다. 폰트라던지 이미지 크기, 이미지 편집 방식을 조금 통일하는 방안을 조금 더 고민 하겠습니다.

VS Code 원격 코딩하기

VS Code Remote 확장 기능을 이용해서 원격 서버에 SSH 방식으로 접속한 다음 코딩을 할 수 있습니다. 이제 VS Code 만 간신히 돌아갈 만한 가벼운 노트북만 들고 다니면서 별도로 구축한 서버에 접속해서 코딩을 할 수 있습니다.

저는 오래전부터 이런 개발환경을 가지고 싶었는데, 이제 자유롭게 할 수 있게 되었습니다. 아마도 이런 원격 개발 환경을 구축하고 싶으신 분들도 있었을 거라고 생각하는데요. 이런 복잡한 설정이 필요한 개발 도구를 마구 뿌리는 최근 MS 행보가 참 멋진 것 같습니다.

#0 준비 사항

VS Code Remote 확장을 이용해 SSH 접속하여 원격 코딩 하는 절차는 대략적으로 다음과 같습니다.

  • Client에 VS Code Remote 확장 설치
  • Open ssh 접속을 위한 Key 파일 및 접속 설정(ssh_config 파일 등 수정)
  • 서버에 Open SSH를 통하여 접속
  • VS Code를 통하여 개발

문제는 Open ssh 접속을 위한 Key 파일 및 접속 설정(ssh_config 파일 등)에 대한 부분을 모두 한번 포스팅 하기도 어렵고, 각 서버마다 설정이 다르기 때문에 혹시 기초적인 설정 보다 더 많은 SSH 설정이 필요하면 ssh 설정에 대한 글을 참고 하시는것이 좋을것 같습니다.

#1 서버 준비

Remote ssh 개발 서버는 리눅스만 지원합니다 공식 홈페이지 64비트 버전으로 Ubuntu 14.04 이상, Debian 8 이상 CeontOS / RHEL 7 이상의 버전이 필요하다고 하네요.

당연히 서버에는 SSH Server(sshd) 가 작동되고 있어야 합니다.

#2 클라이언트 VS Code 에 Remote 확장 설치

VS Code 확장 마켓 플레스에 보면 Remote 확장은 WSL, Container(Docker), SSH 3가지 확장이 있습니다. SSH 확장 혹은  3가지 확장을 동시에 설치 하는 Remote Development를 설치 해도 됩니다.

#3 클라이언트에 OpenSSH 추가 기능 설치

윈도우 키 클릭 후 '선택적 기능'를 입력해 선택적 기능 메뉴를 선택합니다.

선택적 기능 중 OpenSSH 클라이언트를 설치 합니다. 아마 많은 분들이 이미 설치 되어 있을 수도 있습니다.

#4 ssh Key 파일 생성 및 키 교환

VS Code Remote 확장은 ssh key 인증만 지원하기 때문에 ssh key를 생성하고, 서버에 등록해야 합니다. 혹시 이 부분이 잘되지 않으시면 댓글을 남겨주시거나, 다른 ssh key 생성 및 등록 글을 참고 하시는게 좋을거 같습니다.

터미널 창에서 다음과 같이 ssh key 파일을 생성합니다. 유저 홈 디렉터리 .ssh 폴더에 ssh key 파일이 생성됩니다.

ssh-keygen -t rsa -b 4096

passphrase는 사용하지 않을 생각이기 때문에(VS Code에서 지원하는지 모르겠네요) 아무것도 안누르고 그냥 엔터를 두번 눌렀습니다.

이제 생성 된 ssh public key(/.ssh/id_rsa.pub)  파일을 서버 ~/.ssh/authorized_key 파일에 추가 하면됩니다. 방법은 여러가지가 있습니다만, 전 공식 문서에 있는 방법 그대로 따라서 했습니다.

공식문서에는 scp 라는 Secure copy protocol을 이용합니다.

scp  <유저홈디렉터리패스>/.ssh/id_rsa.pub  서버계정명@서버주소

유저 홈 디렉터리 패스 등 몇가지는 각자 마다 다르기 때문에 이 부분은 상황에 맞게 수정해주시면 될거 같습니다. 이렇게 키 파일을 서버 홈 디렉토리에 임시로 업로드 합니다.

다음은 서버에 ssh 로 접속하여 다음과 같이 입력해 방금 전 업로드한 key를 authorized_key에 추가 합니다.

mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat ~/tmp.pub >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys && rm -f ~/tmp.pub

#5 ssh host 설정

이제 config 파일을 이용해서 ssh 접속을 미리 설정해주면 됩니다. config 파일을 이용해서 ssh 접속 설정 외에도 다른 방식이 더 있습니다. 필요하시면 공식 문서를 확인해 주시는 것이 좋을것 같습니다.

VS Code를 실행한 다음 <Ctrl>+<Shift>+<P> 혹은 <F1> 키를 이용하여 명령 팔레트를 실행한 다음 remote라고 입력하여 'Remote-ssh Connect to Host...'를 실행합니다. 

그 다음 'Configure SSH Hosts...'를 선택하면 이제  ssh 접속을 설정할 수 있는 다양한 방법이 나타납니다. 전 우선 config 파일을 이용해서 ssh 접속을 설정하려고 합니다.

VS Code 에디트 창에  config 파일을 수정할 수 있도록 나타 납니다.

'alias' 부분에 SSH 접속 관련 이름을 써주시고, 'hostname'에는 서버의 주소 User에는 리눅스 계정명을 적어주시면 됩니다.

이 부분은 ssh_config 파일의 문법과 동일하기 때문에 자세한 부분은 다른 인터넷 검색이 필요할 수 있습니다.

#6 VS Code Remote 사용

이제 다시 명령 팔레트를 이용해서 'Remote-ssh Connect to Host...' 를 선택하면 위에서 설정한 ssh 설정 명이 나타나고 다시 선택해서 서버에 접속하면 SSH 를 이용해서 코드 에디팅을 할 수 있습니다.

왼쪽 아래를 보면 Remote 를 이용해 SSH 접속해서 원격 코딩을 하는 것이 확인됩니다.

#7 마치며

간단하게 Remote를 이용해서 SSH 원격 코딩하는 방식에 대해서 포스팅 했습니다. 혹시라도 잘못된 설명이나 이상이 있으시면 댓글남겨주세요.

다음에는 원격 코딩에 필요한 설정 및 확장에 대한 포스팅을 하도록 하겠습니다.

  • insiro 2019.07.24 23:22 댓글주소 수정/삭제 댓글쓰기

    제가 ssh 접근하는과정이
    ssh 로 한번 접근한뒤
    ssh -p 2222 id@localhost 로 다시 접근해야하는데
    이런겨웅 어찌해야하는지 알려주실수있나요

    • 정확한 접근 과정을 설명해주시면 좋을거 같습니다.

      특정 서버에 접속한 다음 다시 같은서버에 ssh 접속을 한다는건가요?

  • xxmega 2019.07.29 11:40 댓글주소 수정/삭제 댓글쓰기

    저는 사이트그라운드 호스팅을 사용하고 있는데요~ authorized_key 에 대한 권한이 없다고 나오네요, 호스팅환경에서는 사용을 못하나요? 서버의 환경에서만 사용 가능한거죠?