SSH를 통한 원격 개발

이 튜토리얼에서는 Visual Studio Code의 Remote - SSH 확장을 사용하여 Azure에서 가상 머신(VM)을 생성하고 연결하는 과정을 안내합니다. Node.js Express 웹 앱을 생성하여 소스 코드가 로컬에 있는 것처럼 VS Code에서 원격 머신을 편집하고 디버깅하는 방법을 보여줍니다.

참고: Linux VM은 로컬 호스트, 온프레미스, Azure 또는 다른 클라우드 어디에든 호스팅될 수 있습니다. 단, 선택한 Linux 배포판이 이 필수 구성 요소를 충족해야 합니다.

전제 조건

시작하려면 다음 단계를 완료해야 합니다.

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

확장 설치

Remote - SSH 확장은 SSH 호스트에 연결하는 데 사용됩니다.

Remote - SSH 확장 설치

Remote - SSH extension

원격 - SSH

Remote - SSH 확장이 설치되면 가장 왼쪽에 새 상태 표시줄 항목이 표시됩니다.

Remote Status bar item

원격 상태 표시줄 항목은 VS Code가 실행 중인 컨텍스트(로컬 또는 원격)를 빠르게 보여주며, 해당 항목을 클릭하면 Remote - SSH 명령이 표시됩니다.

Remote - SSH commands

가상 머신 생성

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

참고: 이 튜토리얼에서는 Azure를 사용하지만, Linux VM은 Linux 배포판이 이 필수 구성 요소를 충족하는 한 어디에나 호스팅될 수 있습니다.

Create a virtual machine

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

Virtual machine instance details

SSH 설정

VM에 로그인하는 방법에는 SSH 공개/개인 키 쌍 또는 사용자 이름 및 암호를 포함한 여러 가지 인증 방법이 있습니다. 키 기반 인증 사용을 권장합니다(사용자 이름/암호를 사용하는 경우 확장에서 자격 증명을 두 번 이상 입력하라는 메시지가 표시됩니다). Windows를 사용 중이고 PuttyGen을 사용하여 키를 이미 생성한 경우 재사용할 수 있습니다.

SSH 키 생성

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

ssh-keygen -t ed25519

이렇게 하면 SSH 키가 생성됩니다. 다음 프롬프트에서 Enter를 눌러 키를 기본 위치(사용자 디렉터리 아래의 .ssh라는 폴더)에 저장합니다.

ssh-keygen output

그런 다음 보안 암호를 입력하라는 메시지가 표시되지만, 비워 둘 수 있습니다. 이제 공개 SSH 키가 포함된 id_ed25519.pub 파일이 있어야 합니다.

참고: Ed25519 알고리즘을 지원하지 않는 레거시 시스템을 사용하는 경우 대신 rsa를 사용할 수 있습니다: ssh-keygen -t rsa -b 4096.

VM에 SSH 키 추가

이전 단계에서 SSH 키 쌍을 생성했습니다. SSH 공개 키 원본에 대한 드롭다운에서 기존 공개 키 사용을 선택하여 방금 생성한 공개 키를 사용할 수 있도록 합니다. id_ed25519.pub 파일의 전체 내용을 SSH 공개 키에 복사하여 VM 설정에 붙여넣습니다. 또한 선택한 포트 허용을 선택하고 인바운드 포트 선택 드롭다운 목록에서 SSH(22)를 선택하여 VM이 인바운드 SSH 트래픽을 수락하도록 허용해야 합니다.

Add SSH public key to VM

자동 종료

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

Virtual machine auto-shutdown

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

배포가 완료되면(몇 분 정도 걸릴 수 있음) 가상 머신에 대한 새 리소스 보기로 이동합니다.

SSH로 연결

이제 SSH 호스트를 생성했으므로 연결해 보겠습니다!

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

Remote extension commands

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

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

Virtual machine public IP address

Remote - SSH에서 연결하기 전에 명령 프롬프트에서 ssh user@hostname을 사용하여 VM에 연결할 수 있는지 확인할 수 있습니다.

참고: ssh: connect to host <host ip> port 22: Connection timed out 오류가 발생하는 경우 VM의 네트워킹 탭에서 NRMS-Rule-106을 삭제해야 할 수 있습니다.

Virtual machine list of NRMS rules

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

Set user and host name

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

Initializing VS Code Server

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

SSH indicator in Status bar

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

Remote button on Activity bar

SSH 호스트에 연결되면 원격 머신의 파일과 폴더를 상호 작용할 수 있습니다. 통합 터미널(⌃` (Windows, Linux Ctrl+`))을 열면 Windows에 있는 동안 bash 셸 내에서 작업 중임을 알 수 있습니다.

Checking uname in the terminal

bash 셸을 사용하여 VM의 파일 시스템을 탐색할 수 있습니다. 또한 파일 > 폴더 열기를 사용하여 원격 홈 디렉터리의 폴더를 탐색하고 열 수 있습니다.

Remote open folder

Node.js 애플리케이션 생성

이 단계에서는 간단한 Node.js 애플리케이션을 생성합니다. 애플리케이션 생성기를 사용하여 터미널에서 애플리케이션의 구조를 빠르게 잡습니다.

Node.js 및 npm 설치

통합 터미널(⌃` (Windows, Linux Ctrl+`))에서 Linux VM의 패키지를 업데이트한 다음 npm(Node.js 패키지 관리자)이 포함된 Node.js를 설치합니다.

sudo apt-get update
curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

다음 명령을 실행하여 설치를 확인할 수 있습니다.

node --version
npm --version

Express 생성기 설치

Express는 Node.js 애플리케이션을 빌드하고 실행하는 인기 있는 프레임워크입니다. Express Generator 도구를 사용하여 새 Express 애플리케이션을 생성(만들기)할 수 있습니다. Express Generator는 npm 모듈로 제공되며 npm 명령줄 도구를 사용하여 설치됩니다.

sudo npm install -g express-generator

-g 스위치는 Express Generator를 컴퓨터에 전역적으로 설치하므로 어디서든 실행할 수 있습니다.

새 애플리케이션 생성

이제 다음 명령을 실행하여 myExpressApp이라는 새 Express 애플리케이션을 만들 수 있습니다.

express myExpressApp --view pug

--view pug 매개변수는 생성기에게 pug 템플릿 엔진을 사용하도록 지시합니다.

애플리케이션의 모든 종속성을 설치하려면 새 폴더로 이동하여 npm install을 실행합니다.

cd myExpressApp
npm install

애플리케이션 실행

마지막으로 애플리케이션이 실행되는지 확인합니다. 터미널에서 npm start 명령을 사용하여 애플리케이션을 시작하여 서버를 실행합니다.

npm start

Express 앱은 기본적으로 https://:3000에서 실행됩니다. 웹 앱이 가상 머신에서 실행 중이므로 로컬 브라우저의 localhost:3000에서는 아무것도 보이지 않습니다.

포트 포워딩

로컬 머신에서 웹 앱을 브라우징할 수 있도록 포트 포워딩이라는 다른 기능을 활용할 수 있습니다.

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

Enter the port to forward