[SSH] Remote Connection from Shell and VS Code

공식 문서: Remote Development using SSH

SSH란?

SSH(Secure Shell)는 network를 통해 다른 computer에 안전하게 접속하는 protocol이다. Local computer의 terminal에서 remote server의 command를 실행하거나 파일을 관리할 때 사용한다.

기본 접속 command는 다음과 같다.

ssh username@server-ip

예를 들어 user가 ubuntu이고 server IP가 192.168.0.10이라면 다음처럼 접속한다.

ssh ubuntu@192.168.0.10

VS Code의 Remote - SSH extension도 같은 SSH 연결을 사용한다.

VS Code에서 연결하기 전에 terminal에서 SSH 접속이 되는지 먼저 확인하는 것이 중요하다.

이미지 출처: Visual Studio Code Remote Development using SSH. Local VS Code는 SSH tunnel을 통해 remote machine의 source code, terminal, application과 연결된다.

준비할 정보

SSH로 접속하려면 다음 정보가 필요하다.

기본 SSH port는 22이다. 다른 port를 사용한다면 -p option을 붙인다.

ssh -p 2222 ubuntu@192.168.0.10

SSH client 확인

macOS, Linux terminal 또는 Windows PowerShell에서 확인한다.

ssh -V

Ubuntu에서 ssh command가 없다면 client를 설치한다.

sudo apt update
sudo apt install openssh-client

Windows에서는 Optional Features에서 OpenSSH Client를 설치할 수 있다.

Ubuntu server 준비

접속 대상 Ubuntu computer에는 SSH server가 실행 중이어야 한다.

sudo apt update
sudo apt install openssh-server
sudo systemctl enable --now ssh
sudo systemctl status ssh

ufw firewall을 사용한다면 SSH를 허용한다.

sudo ufw allow OpenSSH

Server IP는 다음 command로 확인할 수 있다.

hostname -I

Terminal에서 접속하기

Local terminal에서 다음 command를 실행한다.

ssh ubuntu@192.168.0.10

처음 접속하면 server의 host key를 신뢰할 것인지 묻는다. 접속하려는 server가 맞는지 확인한 뒤 yes를 입력한다.

Are you sure you want to continue connecting (yes/no/[fingerprint])?

그다음 remote account의 password를 입력한다. 접속에 성공하면 prompt가 remote server 기준으로 바뀐다.

ubuntu@remote-server:~$

현재 접속한 server를 확인한다.

whoami
hostname
pwd

접속을 종료한다.

exit

SSH key 설정

Password 대신 SSH key를 사용하면 반복해서 password를 입력하지 않아도 된다.

Local computer에서 key를 생성한다.

ssh-keygen -t ed25519

기본 경로를 사용하면 다음 파일이 만들어진다.

~/.ssh/id_ed25519
~/.ssh/id_ed25519.pub

Private key는 공유하지 않고 local computer에만 보관한다.

Public key를 server에 등록한다.

ssh-copy-id ubuntu@192.168.0.10

ssh-copy-id가 없다면 id_ed25519.pub의 내용을 server의 다음 파일에 추가한다.

~/.ssh/authorized_keys

Server에서 SSH directory와 파일 권한을 설정한다.

chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

등록 후 다시 접속한다.

ssh ubuntu@192.168.0.10

SSH config 작성

매번 user와 IP를 입력하지 않으려면 local computer의 ~/.ssh/config에 server를 등록한다.

Host lab-server
    HostName 192.168.0.10
    User ubuntu
    Port 22
    IdentityFile ~/.ssh/id_ed25519

각 항목의 의미는 다음과 같다.

이제 별칭만으로 접속할 수 있다.

ssh lab-server

VS Code를 열기 전에 ssh lab-server가 정상 동작하는지 확인한다.

VS Code Remote - SSH 설치

Local VS Code의 Extensions view에서 Microsoft의 Remote - SSH를 설치한다.

Extension: Remote - SSH
ID: ms-vscode-remote.remote-ssh
Publisher: Microsoft

Command line으로도 설치할 수 있다.

code --install-extension ms-vscode-remote.remote-ssh

VS Code에서 SSH 접속하기

1. Command Palette를 연다.
   • Windows/Linux: Ctrl+Shift+P
   • macOS: Cmd+Shift+P
2. Remote-SSH: Connect to Host...를 실행한다.
3. SSH config에 등록한 lab-server를 선택한다.
4. 처음 연결할 때 remote platform을 묻는다면 server OS를 선택한다.

이미지 출처: Visual Studio Code Remote Development using SSH. 등록된 host를 선택하거나 username@hostname 형식으로 직접 입력할 수 있다.

SSH config에 server를 등록하지 않았다면 다음과 같이 직접 입력할 수도 있다.

ubuntu@192.168.0.10

처음 연결하면 remote server에 VS Code Server가 설치된다. 연결이 완료되면 VS Code 왼쪽 아래에 remote host가 표시된다.

SSH: lab-server

이미지 출처: Visual Studio Code Remote Development using SSH. Remote Explorer의 SSH Targets에서 등록한 server를 선택해 접속할 수 있다.

Remote folder 열기

연결 후 remote server의 project directory를 연다.

File
  -> Open Folder...
  -> /home/ubuntu/projects/my-project

이미지 출처: Visual Studio Code Remote Development using SSH. Folder picker에는 local computer가 아니라 remote server의 directory가 표시된다.

VS Code terminal도 remote server에서 실행된다.

Terminal -> New Terminal

다음 command로 위치를 확인한다.

hostname
pwd

Remote SSH window에서 수정하는 파일과 실행하는 terminal command는 remote server를 대상으로 한다.

Remote extension 설치

Python, C/C++, Docker처럼 project를 분석하거나 실행하는 extension은 remote server 쪽에도 설치해야 할 수 있다.

Extensions view에서 필요한 extension의 다음 button을 누른다.

Install in SSH: lab-server

Theme처럼 화면에만 영향을 주는 extension은 보통 local에만 있어도 된다.

Port forwarding

Remote server에서 web application이 port 8000으로 실행 중이라고 하자.

python -m http.server 8000

VS Code의 Ports view에서 8000을 추가하면 local browser에서 접속할 수 있다.

http://localhost:8000

이미지 출처: Visual Studio Code Remote Development using SSH. Ports view에서 remote port와 연결된 local address를 확인할 수 있다.

자주 발생하는 문제

Connection timed out

ssh: connect to host 192.168.0.10 port 22: Connection timed out

다음을 확인한다.

• IP와 port가 맞는가?
• Server의 SSH service가 실행 중인가?
• Firewall이 SSH port를 허용하는가?
• Local computer에서 server network에 접근할 수 있는가?

Permission denied

Permission denied (publickey).

User 이름, private key 경로, server의 authorized_keys를 확인한다.

상세 접속 log를 출력할 수 있다.

ssh -v lab-server

Terminal은 되는데 VS Code만 안 되는 경우

먼저 terminal에서 다시 확인한다.

ssh lab-server

그다음 VS Code에서 다음 log를 확인한다.

View -> Output -> Remote - SSH

필요하면 Command Palette에서 remote VS Code Server를 종료하고 다시 연결한다.

Remote-SSH: Kill VS Code Server on Host...

전체 흐름

1. Server에 openssh-server 설치
2. Terminal에서 ssh user@server-ip 접속
3. SSH key 생성 및 public key 등록
4. ~/.ssh/config에 server 등록
5. ssh host-alias 접속 확인
6. VS Code에 Remote - SSH 설치
7. Remote-SSH: Connect to Host... 실행
8. Remote project folder 열기

정리

Shell과 VS Code Remote - SSH는 같은 SSH 설정을 사용한다. 따라서 terminal에서 접속을 먼저 확인하고, SSH key와 ~/.ssh/config를 구성한 뒤 VS Code를 연결하면 된다.

ssh lab-server

이 command가 정상 동작하면 VS Code에서는 Remote-SSH: Connect to Host...를 실행하고 같은 lab-server를 선택한다. 연결 후에는 remote folder를 열고 local project처럼 편집하고 실행할 수 있다.