본문으로 바로가기

Microsoft의 visual studio code로 자신의 로컬 컴퓨터의 파일 뿐만 아니라

원격 서버까지 워킹 디렉토리로 삼을 수 있습니다.

이 방법을 사용하면 WSL에도 쉽게 접속해서 사용할 수 있습니다.

WSL에 사용할 때는 ssh 서버를 bash에서 열어서 윈도우의 vscode를 이용해 접속하여 사용하면 됩니다.

WSL의 경우에는 ssh를 사용하지 않아도 wsl 확장이 따로 있습니다.

그러기 위해서는 원격 서버가 있을 것이고, 그 서버에 접속하고자하는 컴퓨터에는 vscode가 설치되어 있어야 합니다.

아직까지는 ssh서버는 리눅스 서버여야하고 윈도우나 맥의 ssh서버는 지원하지 않는다네요.(19.07.13.)


원격 SSH 서버 열기

먼저 원격 ssh 서버를 열어야 합니다.

우선 리눅스의 경우에는 대부분은 이미 설치가 되어 있을 것입니다.

데비안 우분투 계열이라면

sudo apt-get install openssh-server & sudo service sshd start

centOS라면

sudo yum install openssh-server && sudo systemctl start sshd.service && sudo systemctl enable sshd.service

근데 때에 따라서는 sudo service ssh start를 해야하기도 하네요.

(제 WSL이 그랬습니다.)

 

ssh를 사용하기 위해서 userid, password는 알아두어야 합니다.

우분투에서 sudo service sshd status를 사용하면 상태를 볼 수 있습니다.

active로 되어 있다면 정상적으로 작동하고 있는 것입니다.


VSCODE로 서버에 접속 및 사용하기

vscode는

https://code.visualstudio.com

에서 다운받아 설치해줍니다. 설치방법은 어렵지 않습니다.

어렵다면 여기를 참조하세요!

설치했다면 다음은 확장 프로그램을 하나 설치해야 합니다.

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

여기로 들어가서 Install을 눌러주면 금방 설치할 수 있습니다.

이렇게 잘 설치되었습니다.

설치가 끝났으면 F1을 눌러봅니다.

그 다음에 Remote-SSH: Connect to Host... 을 눌러줍니다.

그러면 이렇게 연결할 host를 적으라고 나옵니다.

ssh연결할 때 처럼 userid@host 를 입력해줍시다. host는 물론 ip도 되고 도메인도 가능합니다.

그러면 이렇게 비밀번호를 입력하라고 나옵니다.

아직 불안정한 건지 비밀번호를 뭔가 할 때마다 여러 번씩 묻기도 하네요.

이렇게 나올 때는 그냥 비밀번호를 입력하고 엔터를 쳐줍니다.

그러면 정상적으로 연결되면 왼쪽 아래에 이렇게 ssh: 라고 나오고 host가 나오게 됩니다.

Open folder...Add workspace folder... 을 눌러서 폴더를 선택하면

로컬에서 했던 것 처럼 사용할 수 있습니다. 새 파일을 만들거나 수정할 수도 있고, 디버깅 등도 가능합니다.

터미널도 열면 로컬이 아니라 원격 서버의 터미널이 열리므로 사용하면 됩니다.

빌드를 해보겠습니다. 아마 Ctrl + Shift + B가 기본 단축키일 거고 F1을 눌러서 Build를 입력해서

들어갈 수도 있습니다.

근데 빌드를 눌러보면

이런 식으로 빌드작업 구성에 알 수 없는 것들만 잔뜩 들어있습니다.

여기서 그냥 누르지 말고 오른쪽에 톱니바퀴가 있는데 톱니바퀴를 눌러주면

이런 식으로 tasks.json이 열리는데 이걸 수정해서 사용하면 됩니다.

이건 파이썬 실행용으로 tasks.json파일을 구성한 것입니다.

이제 다시 Build 작업을 실행해보면 잘 동작합니다.

 

그런데 만약에 홈디렉토리가 아니라 하위폴더를 만든 뒤에 그 폴더를

VScode 워킹디렉토리로 설정하면(폴더열기) 빌드시에 로컬에서처럼

빌드작업 구성이 나타납니다!

또 리모트 호스트에 확장 프로그램들도 설치할 수 있습니다.

이렇게 로컬과 리모트의 확장 프로그램이 따로 보입니다.


자주 사용하는 서버정보 저장해놓기​

만약 일일이 들어가는 게 귀찮다면 자주 사용하는 것들을 저장할 수 있습니다

아까 처럼 F1을 눌러서

Remote-SSH: Connect to Host... 를 누르면 이렇게 나왔는데

여기서 Configure SSH Hosts... 를 그대로 선택합니다.

원하는 설정 파일을 선택합니다.

설정파일은 이런 구조로 입력하면 됩니다.

Host는 별명 같은 거라고 보면 되고

User는 user id, Hostname은 도메인이나 ip를 입력해주면 됩니다. 저장해주고

다시 F1을 누른 다음

Remote-SSH: Connect to Host...를 선택해주면

이렇게 바로 고를 수 있습니다.

만약에 SSH key가 있다면

이렇게 마지막에 key 파일의 위치를 기록해두고 비밀번호를 치지 않고 사용할 수 있습니다!

 

또한 이렇게 등록해놓으면

왼쪽에서 마지막 모니터 모양을 누르면 원격 연결을 관리할 수 있습니다.

여기서 폴더버튼을 누르면 쉽게 열 수 있습니다.

 


SSH키 생성 및 등록하는 법

 

우선 SSH키에 대해서 간략히 설명하자면

나의 로컬 컴퓨터에 비밀키가 저장될 것이며, 서버에는 공개키를 등록할 것입니다.

그러면 ssh 연결시에 비밀키 정보를 이용해 비밀번호 없이 자동으로 인증이 되는 것입니다.

비밀키와 공개키는 항상 쌍으로 생성됩니다.

그래서 그 쌍은 나의 로컬 머신에서 생성해야 합니다. 그 다음 공개키를 서버에 등록해주면 됩니다.

자세한 내용은 여기를 참고하세요.

먼저 키를 생성하는 법에 대해서 이야기하겠습니다.

이건 macOS, Linux와 윈도우가 다른데 우선 mac과 리눅스에서 하는 법에 대해 설명하겠습니다.

ssh-keygen -t rsa

라고 입력해주면 키를 생성할 수 있습니다.

그 다음에는 키를 저장할 위치를 묻고 비밀번호를 묻습니다.

자동으로 로그인 하려면 비밀번호는 없어야 합니다. 키를 저장할 위치는 그대로 두는 편이 좋습니다.

더 자세한 옵션들이 있지만 여기서는 소개하지 않겠습니다.

결과적으로는

Your identification has been saved in /Users/psj8252/.ssh/id_rsa. Your public key has been saved in /Users/psj8252/.ssh/id_rsa.pub.

이게 중요합니다.

여기서 .pub가 붙은 게 public, 공개키 입니다.

scp라는 기능으로 저 .Pub파일을 내가 공개키를 등록할 (ssh로 접속할) 서버로 보낼 겁니다.

scp ~/.ssh/id_rsa.pub myuserid@myserver.com:id_rsa.pub

여기서 myuserid대신의 접속할 서버의 userid, myserver.com 대신에 접속할 서버의 도메인 또는 ip를 입력합니다.

정상적으로 수행됬다면 100% 라는 메세지가 뜰 겁니다.

이제 내 로컬이 아니라 그 서버에 접속합니다.

지금은 아직 키를 등록하지 않았으니 비밀번호를 이용해야겠죠?

아마 로그인을 해보고 ls 를 쳐보면 아까 전송한 파일이 생겨 있는 걸 볼 수 있을 겁니다.

그러면

cat ~/id_rsa.pub >> ~/.ssh/authorized_keys

이렇게 쳐 줍시다.

아마 아무것도 안뜰겁니다. 그러면 된 겁니다.

아까 비밀키가 ~/.ssh/id_rsa 였죠? 이제 vscode에서 위에서 설명한 config 창을 열어봅시다.

여기서 IdentityFile을 입력해주면 이제 비밀번호를 묻지 않을 것입니다.

모든 과정이 정상적이었다면 말이죠!

 

 

윈도우의 경우에는 먼저

puttygen.exe
0.66MB

을 다운받아줍시다.

실행하면

이렇게 나올 텐데 Generate를 눌러줍시다.

마우스를 움직이는 것을 가지고 랜덤하게 생성한다고 하니 마우스를 이리 저리 움직입니다.

이렇게 나올 겁니다.

우선 비밀키를 먼저 저장합시다.

Conversions에서 Export OpenSSH key를 하면 비밀키를 저장할 수 있습니다.

(리눅스 ssh서버용임)

Save private key로 하면 리눅스용으로 저장되지 않아서 이렇게 합니다.

하지만 저것도 나중에 공개키를 잃어버린다거나 하면 다시 Load해서 저장할 수도 있으니 같이 저장해둡시다.

그 다음에는 Public key for passing into OpenSSH authorized file:에 아래에

이상한 문자열들이 있죠? 그걸 통째로 복사해줍니다.

그 다음에 이 키를 등록하고 싶은 서버에 ssh로 접속해줍니다.

그 다음에 cat >> ~/.ssh/authorized_keys 를 쳐준다음에 아까 복사한 것을 붙여넣습니다.

그 다음에 엔터를 쳐서 한 줄을 띄우고 Ctrl+C를 눌러주세요.

이런 식으로 ^C가 다음 줄 맨 앞에 찍혀야 합니다. 이제 등록이 완료되었습니다.

이제 아까 Export OpenSSH key를 통해 저장한 private 키 파일의 위치를 알아내서

vscode configure에 같은 방식으로 입력하면 됩니다.

 

참조: https://code.visualstudio.com/docs/remote/ssh


댓글을 달아 주세요

  1. ㅁㄴㅇㄹ 2019.08.06 09:57

    접속할 때 기본 포트가 22가 아닌 다른 포트를 사용하고자 하면 어떻게 해야할까요.
    192.1.100.300:23, 192.1.100.300 -p 23 모두 되지가 않네요.

    • Sueredis 2019.08.07 22:55 신고

      Remote-SSH: Connect to host를 누른 뒤에 원래 ip를 입력하는 부분에서 ssh://192.1.100.300:23 으로 바꾸시면 custom 포트로 접속할 수 있습니다.

  2. 지나가는 코린이 2019.10.23 22:36

    오우 감사합니다

  3. 감사합니다!ㅎㅎ 2020.06.15 15:11

    (200615)
    Remote - SSH - Work with source code in any location by opening folders on a remote machine/VM using SSH. Supports x86_64, ARMv7l (AArch32), and ARMv8l (AArch64) glibc-based Linux, Windows 10/Server (1803+), and macOS 10.14+ (Mojave) SSH hosts.

    윈10도 되는것 같아요 이제!!