Visual Studio Code로 원격 SSH

2019년 7월 25일 Sana Ajani 작성, @sana_ajani

Remote - SSH: 쉽고 부드러우며 (로컬처럼)

놓치셨을까 봐 알려드리는데, Visual Studio Code에서 최근 원격 개발 확장 기능을 출시했습니다. 원격 확장 기능을 사용하면 컨테이너, 원격 머신 또는 가상 머신(VM), 혹은 Windows Subsystem for Linux(WSL)를 대상으로 개발하면서도 VS Code의 모든 기능 세트를 개발 환경으로 사용할 수 있습니다.

무제한: 로컬 머신에 구애받지 않습니다

점점 더 많은 개발자들이 대규모 복잡한 프로젝트를 다루면서 특수 개발 VM이나 일반 노트북보다 더 많은 저장 공간 또는 컴퓨팅 성능을 제공하는 서버를 사용해야 합니다.

하지만 이러한 종류의 개발에는 여러 가지 어려움이 따릅니다.

• 원격 액세스 소프트웨어(VNC 등)를 사용하면 UI가 더 이상 로컬이 아니기 때문에 편집 시 지연이 발생할 가능성이 높습니다.
• 원격 데스크톱 프로토콜(RDP)을 사용하는 경우 여러 연결을 관리하기 어려울 수 있습니다.
• 원격 파일 시스템을 마운트하고 대량 작업을 실행하는 것이 느릴 수 있습니다.
• 원격 및 로컬 환경을 동기화하는 것은 번거롭고, 한 곳에서는 작동하지만 다른 곳에서는 작동하지 않는 문제에 자주 직면하게 됩니다.
• SSH와 Vim을 사용하여 원격으로 파일을 편집하는 것은 익숙한 코딩 편집기의 편안함에서 벗어나는 것을 의미합니다.

도구를 포기하지 않고 로컬 머신의 물리적 제약을 벗어날 수 있다면 좋지 않을까요? 이제 Remote - SSH 확장 기능의 마법이 등장합니다.

Linux를 사용한 원격 개발

Linux VM이 SSH를 지원하는 한, 로컬 호스트, 온프레미스, Azure 또는 기타 클라우드 어디에나 호스팅할 수 있습니다. Windows, macOS 또는 Linux 클라이언트에서도 사용할 수 있습니다.

참고: macOS 및 Windows SSH 호스트는 아직 지원되지 않습니다.

이 블로그 게시물에서는 Windows 클라이언트를 사용하고 Azure의 Linux VM을 대상으로 합니다.

시작하기

시작하려면 다음을 수행해야 합니다.

1. OpenSSH 호환 SSH 클라이언트를 설치합니다 (PuTTY는 지원되지 않습니다).
2. Visual Studio Code를 설치합니다.
3. Azure 구독이 있어야 합니다 (Azure 구독이 없는 경우, 시작하기 전에 무료 계정을 만드세요).

VM 생성

기존 Linux 가상 머신이 없는 경우 Azure 포털을 통해 새 VM을 만들 수 있습니다. Azure 포털에서 "가상 머신"을 검색하고 추가를 선택합니다. 여기서 Azure 구독을 선택하고 기존에 없는 경우 새 리소스 그룹을 만들 수 있습니다.

이제 VM의 이름, 크기, 기본 이미지와 같은 세부 정보를 지정할 수 있습니다. 이 예에서는 Ubuntu Server 18.04 LTS를 선택하지만, 다른 Linux 배포판의 최신 버전을 선택하고 지원되는 SSH 서버를 확인할 수 있습니다.

SSH 설정

VM에는 SSH 공개/개인 키 쌍 또는 사용자 이름 및 암호를 포함한 여러 인증 방법이 있습니다. 연결할 때마다 암호를 입력할 필요가 없으므로 키 기반 인증을 사용하는 것이 좋습니다. Windows에서 PuttyGen을 사용하여 이미 키를 생성한 경우 재사용할 수 있습니다.

SSH 키 쌍이 없는 경우 bash 셸 또는 명령 프롬프트를 열고 다음을 입력합니다.

ssh-keygen -t ed25519

이렇게 하면 SSH 키가 생성됩니다. 기본 위치에 키를 저장하려면 다음 프롬프트에서 Enter 키를 누릅니다.

그런 다음 보안 암호를 입력하라는 메시지가 표시되지만 비워 둘 수 있습니다.

VM에 SSH 키 추가

이전 단계에서 SSH 키 쌍을 생성했습니다. 공개 키를 VM 설정에 붙여넣기 위해 id_ed25519.pub의 내용을 복사합니다. 또한 VM이 인바운드 SSH 트래픽을 수락하도록 허용해야 합니다.

Azure VM을 사용하는 멋진 기능 중 하나는 자동 종료 기능입니다 (솔직히 우리 모두 VM을 끄는 것을 잊어버리니까요…). 관리 탭으로 이동하면 매일 VM을 종료할 시간을 설정할 수 있습니다.

검토 및 만들기를 선택하면 Azure가 VM을 배포합니다!

Remote - SSH로 연결

SSH 호스트를 만드는 방법을 다루었으니, 이제 연결해 보겠습니다!

VS Code의 Remote - SSH 확장 기능을 사용하면 VS Code 내에서 SSH를 사용하여 원격 머신 또는 VM에 연결할 수 있습니다. 아직 Remote - SSH 확장 기능을 설치하지 않았다면 확장 기능 보기(Ctrl + Shift + X)에서 "remote ssh"를 검색할 수 있습니다.

상태 표시줄의 왼쪽 하단에 표시기가 표시됩니다. 이 표시기는 VS Code가 어떤 컨텍스트(로컬 또는 원격)에서 실행 중인지 알려줍니다. 표시기를 클릭하면 원격 확장 기능 명령 목록이 표시됩니다.

Remote-SSH: Connect to Host 명령을 선택하고 다음과 같은 형식으로 VM의 연결 정보를 입력하여 호스트에 연결합니다: user@hostname.

user는 VM에 SSH 공개 키를 추가할 때 설정한 사용자 이름입니다. hostname의 경우 Azure 포털로 돌아가서 생성한 VM의 개요 창에서 공용 IP 주소를 복사합니다.

연결 정보 텍스트 상자에서 사용자 및 호스트 이름을 설정합니다.

VS Code는 이제 새 창(인스턴스)을 엽니다. 그런 다음 "VS Code Server"가 SSH 호스트에서 초기화 중이라는 알림이 표시됩니다. VS Code Server가 원격 호스트에 설치되면 확장 프로그램을 실행하고 로컬 VS Code 인스턴스와 통신할 수 있습니다.

상태 표시줄의 표시기를 보면 VM에 연결되었음을 알 수 있습니다. 이제 VM의 호스트 이름이 표시됩니다!

Remote - SSH 확장 기능은 활동 표시줄에 새 아이콘을 제공하며, 이를 클릭하면 SSH 탐색기가 열립니다. 여기서 SSH 연결을 구성할 수 있습니다. 예를 들어, 가장 자주 연결하는 호스트를 저장하고 사용자 이름과 호스트 이름을 입력하는 대신 여기서 액세스할 수 있습니다.

SSH 호스트에 연결되면 원격 머신의 파일과 상호 작용하고 폴더를 열 수 있습니다. 통합 터미널을 열면 *Windows에서* bash 셸 내에서 작업하고 있음을 알 수 있습니다. 잠깐, 이미 VM에 연결되었나요? 너무 쉬웠습니다. 그것이 요점입니다. 이러한 확장 기능은 원격 개발을 쉽고 부드럽고… 글쎄, 원격처럼 느껴지지 않게 만듭니다. 😃

bash 셸을 사용하여 VM의 파일 시스템을 탐색할 수 있습니다. mkdir demo로 "demo"라는 새 폴더를 만들고 파일 > 폴더 열기를 사용하여 원격 홈 디렉토리의 폴더를 탐색하고 열 수 있습니다.

원격 SSH 호스트에 확장 프로그램을 특정하여 설치할 수도 있습니다. 테마나 스니펫과 같이 UI에 영향을 미치는 확장 프로그램은 로컬에 설치되며 나머지 확장 프로그램은 원격 SSH 호스트에 설치해야 합니다. 확장 기능 보기를 열면 로컬 머신의 확장 프로그램과 원격 호스트의 확장 프로그램이라는 두 개의 섹션이 있음을 알 수 있습니다. 다른 클라이언트에서 원격 머신에 SSH로 접속하더라도 원격 확장 프로그램 및 설정은 동일하게 유지됩니다. 확장 프로그램을 설치하러 가면 VS Code가 올바른 컨텍스트에 자동으로 설치합니다.

Hello World

VM에 기본 "Hello World" Python 앱을 배포해 보겠습니다. Flask라는 인기 있는 Python 웹 프레임워크를 사용할 것입니다. bash 셸에서 다음 명령을 실행합니다.

sudo apt install python3-flask

이전에 만든 "Demo" 폴더에서 새 파일(Ctrl + N)을 `app.py`라는 이름으로 만들고 기본 Hello world Flask 애플리케이션을 넣습니다.

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello Remote World! :)"

if __name__ == "__main__":
    app.run()

VS Code가 파일 언어를 Python으로 인식하면, 원격 머신에 설치되어 있지 않은 경우 Microsoft Python 확장을 권장하는 알림이 표시됩니다.

설치를 선택하고 VS Code를 다시 로드하면 원격 머신에서 VS Code의 IntelliSense 및 색상 구분이 표시되기 시작합니다.

앱을 실행하려면 F5를 누르고 Flask 디버그 구성을 선택합니다. Python 디버그 콘솔에서 앱이 localhost의 5000번 포트에서 실행되고 있음을 볼 수 있습니다. 그러나 localhost는 현재 로컬 머신이 아닌 원격 서버를 참조합니다. 로컬 머신에서 웹 앱을 탐색하려면 포트 포워딩이라는 또 다른 기능을 활용해야 합니다.

공개적으로 노출되지 않을 수 있는 원격 머신의 포트에 액세스하려면 로컬 머신의 포트와 서버 간의 연결 또는 터널을 설정해야 합니다. 앱이 계속 실행 중인 상태에서 SSH 탐색기를 열고 포트 포워딩 보기를 찾습니다. 포트 포워딩 링크를 클릭하고 5000번 포트를 포워딩하려는 의도를 표시합니다.

연결 이름을 "browser"로 지정합니다.

서버는 이제 5000번 포트의 트래픽을 로컬 머신으로 포워딩합니다. https://:5000으로 이동하면 실행 중인 웹 앱을 볼 수 있습니다.

이제 진짜 질문은… 원격 머신에서 VS Code로 디버깅할 수 있을까요? 네! 앱이 계속 실행 중인 상태에서 "Hello Remote World" 문자열을 반환하는 줄에 중단점을 설정하고 디버깅 컨트롤에서 다시 시작 버튼을 선택합니다. 브라우저에서 페이지를 새로 고치면 중단점에 도달합니다! 편집, 디버깅, 모든 설정 및 확장 기능을 포함하여 동일한 VS Code 환경을 얻고 있습니다. 😊

로컬 개발을 위해 로컬 머신으로 다시 전환하려면 파일 > 원격 연결 닫기를 사용하여 원격 연결을 닫습니다.

Remote - SSH 확장 기능을 사용하면 VS Code의 생산성 기능과 확장 프로그램을 모두 원격 머신에서 VM을 대상으로 작업할 수 있습니다. 코드가 어디에 호스팅되든 VS Code에서 알고 사랑하는 완전한 개발 환경을 얻을 수 있습니다.

VS Code 원격에 대해 더 알고 싶다면 원격 개발 발표 블로그 게시물을 읽어보세요. 다른 원격 확장 기능인 Dev Containers 및 WSL도 사용해 보고 전체 원격 개발 설명서를 읽어보세요.

행복한 원격 코딩,

Sana Ajani, VS Code 프로그램 관리자 @sana_ajani