VSCode 원격 접속 - remote-ssh

VSCode는 기본적으로 설치된 OS에서 실행됩니다.
가상머신에서 설치하면 가상머신에서 실행되고, Windows에서 설치하면 Windows에서 실행됩니다.

로봇 프로그래밍을 하며 로봇에서 프로그래밍을 진행할 일이 잦은데, 이때는 PC에서 실행중인 VSCode를 로봇에 연결하면 로봇에 프로그램을 바로 저장하고 실행할 수 있어 편리합니다.
또한 이를 응용하면 macOS의 UTM으로 Ubuntu를 가상머신으로 만들었을 때 VSCode를 실행할 수 없는 문제(그래픽 드라이버 이슈)를 우회할 수 있습니다.

SSH라 부르는 CLI 터미널 원격 접속 프로토콜(프로그램)과 VSCode에서 공식적으로 지원하는 플러그인을 사용합니다.

작동 원리 설명

VSCode 플러그인

원리상으로는 VSCode의 화면(GUI)은 VSCode가 실행중인 PC에서 처리하고, 파일을 저장하거나 실행, 플러그인의 실행 등은 원격의 PC가 대신 실행하는 방식입니다.
다음과 같은 장점이 있습니다.

  • 파일을 저장하면 원격 PC에 저장됨
  • 우측 상단 Python 프로그램 실행 버튼을 클릭하면 원격 PC에서 프로그램이 실행됨
  • 타겟 PC에서만 사용할 수 있는 개발환경을 의존하는 플러그인을 원격으로 사용할 수 있음 (파이썬이 설치되지 않은 PC에서는 자동완성 등의 플러그인 사용 불가능, 원격 연결하면 가능함)

세팅 과정

위 설명대로라면 노트북과 로봇을 연결하는게 맞지만, 여건상 아래와 같은 환경에서 세팅 과정을 소개합니다.
편의를 위해 VSCode가 설치되는 PC를 로컬, 원격으로 연결할 PC를 타겟이라 표현하겠습니다.

  • 로컬: 파이썬과 ROS 개발환경이 설치되지 않은 노트북 PC (macOS)
  • 타겟: ROS 개발환경이 설치된 Ubuntu 24.04 VM (Parallels 가상화)
  • 목표: 로컬에서 타겟으로 VSCode 원격 연결, 파이썬 및 ROS 플러그인 활용

타겟 PC에 ssh 서버 설치

ssh서버 설치 타겟 PC에서 진행합니다!!! 로컬에 설치하는거 아니에요!!!
ssh 서버가 기본적으로 설치된 경우 어떤 설정이 되어있을지 모르기 때문에 삭제한 후 재설치합니다.
(보통 보안 문제로 ssh 연결을 무조건 막는 설정이 되어있는경우가 많음)
apt remove대신 모든 설정을 함께 삭제하는 apt purge 명령을 사용했습니다.
보통 ssh서버는 설치되어 있지 않기 때문에, 첫 명령을 입력했을 때 설치되지 않아서 무시했다는 내용이 나올 수 있습니다.

$ sudo apt purge openssh-server -y
$ sudo apt install openssh-server -y


타겟 PC IP 확인

타겟의 IP를 알아야 원격 접속이 가능합니다.
ifconfig 명령을 활용해 IP를 확인합니다.
만약 설치되지 않았다면 apt로 net-tools 패키지를 설치합니다.

$ ifconfig

왼쪽의 네트워크 인터페이스 이름(여기서는 enp0s5)은 OS에 따라, 타겟의 하드웨어 종류에 따라 다를 수 있습니다. 어떤게 IP인지 확신이 서지 않는다면 전체를 복사해 ChatGPT에 집어넣어보세요.

여기서는 사진에서 더블클릭해서 흰색으로 칠해진 10.211.55.3이 타겟 PC의 IP입니다.

로컬 → 타겟 접속 가능 여부 확인

앞서 언급했듯이, 원격 VSCode 실행에는 SSH를 사용합니다.
SSH를 통해 원격으로 접속하기 위해서는 로컬 PC와 타겟 PC가 같은 네트워크에 연결되어있어야 합니다.
여기서 같은 네트워크는 같은 Wi-Fi 처럼 같은 공유기에 연결된 경우 대부분 만족합니다. 같은 핫스팟에 연결된 경우 스마트폰의 보안 정책으로 분명히 같은 네트워크지만 서로 통신이 불가능한 경우가 있습니다.

로컬 PC에서 터미널을 켜고 ping 명령을 활용해 타겟으로 접속이 가능한지 확인해봅니다.

$ ping {타겟 PC의 IP}

위 사진처럼 별다른 오류 없이 실행된다면 ssh 연결도 가능합니다.

위 사진처럼 timeout이 나온다면 연결이 불가능한 경우입니다.
정 해결되지 않으면 질문을 남겨주세요.

로컬 PC VSCode에 remote-ssh 플러그인 설치

왼쪽 플러그인 버튼(사각형 ㄴ자 모양 3개, 삐뚤어진거 하나)을 클릭하고 remote-ssh를 검색해 설치합니다.

로컬 PC VSCode에 원격 접속 정보 설정

방금 설치한 플러그인에 타겟 PC로의 접속 정보를 입력하는 과정입니다.

좌측 탭에 새로 생긴 remote-ssh 버튼 → SSH에 마우스를 올리면 튀어나오는 톱니바퀴 버튼 → 목록 중 컴퓨터의 사용자 이름이 포함된 선택지(여기서는 제 컴퓨터의 사용자 이름인 varofla가 포함된것)를 선택

환경설정값을 입력하는 에디터가 열리며, 아래와 같은 포맷으로 입력합니다.

Host {표시할 이름; 별명}
    HostName {타겟 PC IP 주소}
    User {타겟 PC의 사용자 계정 이름}

이후 저장하면 왼쪽에 방금 추가한 내용이 나타납니다.
target-pc라고 나오죠. 위 설정에서 Host뒤에 붙는 별명이 여기서 표시하는 이름입니다.

타겟 PC 연결

빨간색으로 표시한 화살표를 클릭하면 앞서 설정한 내용대로 원격 PC에 접속을 시도합니다.

처음 연결하는 경우 “이게 니가 연결하려는 서버 맞음?” 이렇게 물어봅니다.
continue를 눌러주세요.

다음으로 타겟 PC의 패스워드를 입력합니다.

패스워드가 맞다면 타겟 PC에 VSCode를 원격으로 사용하기 위한 프로그램을 설치합니다. (오른쪽 아래 Downloading~ 참고)
타겟 PC 사양에 따라 시간이 조금 걸립니다.

접속이 정상적으로 되었다면 별다른 경고창이 나오지 않습니다.

타겟 PC에 플러그인 설치

로컬 PC에 이미 플러그인을 설치했는데, 이게 무슨 소리인가 싶을텐데요,
앞서 언급했듯이 VSCode를 타겟에 원격으로 연결하면 VSCode의 GUI만 로컬에서 실행할 뿐, 실제 동작은 타겟에서 실행되게 됩니다. 플러그인 역시 타겟에서 실행되는데, 로컬에서 설치한 플러그인이 타겟에 자동으로 설치되지 않아서 수동으로 설치하는 과정이 필요합니다.

install local extension를 검색해 나오는 화면상에 현재 선택되어있는 Remote: install local extensions in ~를 선택합니다.

로컬에 있는 플러그인 전부 설치하려 하니 전체선택 체크박스를 클릭하고 OK 버튼을 클릭합니다.

기다리면 알아서 타겟에 플러그인을 차례대로 설치합니다. 마찬가지로 사양을 타는편이니 조금 기다려주세요.

플러그인 탭의 installing 이 모두 사라지면 모두 끝난상태입니다.

Python 테스트

이제 VSCode가 타겟에 연결되어있기 때문에 VSCode의 터미널(Ctrl+j, 맥의 경우 cmd+j)도 타겟에서 실행됩니다. 따라서 홈디렉토리 아래에 디렉토리(test_directory)를 하나 만들고 열어줬습니다.

test.py 파일을 하나 만들고 프로그램을 작성, 오른쪽 상단 실행 버튼을 클릭해 파이썬 프로그램이 잘 실행되는것을 확인합니다.

ROS 테스트

마찬가지로 VSCode의 터미널에서 ros2를 sourcing하고, - source /opt ~
워크스페이스가 없어서 생성하고, - mkdir
워크스페이스로 진입한 후 빈 워크스페이스 빌드, - cd, colcon build ~
src에 진입한 후 파이썬 패키지(여기서는 이름 test_package) 생성 - cd, ros2 pkg create ~

생성한 패키지를 열어줍니다.

Python에서 노드는 패키지 이름의 폴더 아래에 생성하죠.
~/ros2_ws/src/test_package/test_package 디렉토리에 test.py 파일명의 노드를 하나 만들어줍니다. 이어서 가장 위에 import rclpy를 입력해서 rclpy의 자동완성이 잘 되는지 확인합니다.
(로컬 PC에는 ROS가 없기 때문에 rclpy 자동완성이 불가능, 타겟은 설치되어있기 때문에 가능한 모습)

간단한 talker 예제를 테스트합니다.