Visual Studio Code를 이용한 원격 개발 환경 구축

vscode_logo

Visual Studio Code#

Visual Studio Code란?#

Micrsoft에서 개발한 텍스트 에디터. 주로 vscode라고 줄여 부른다.

왜 vscode를 사용하는가?#

Visual Studio Code 자체는 단순한 텍스트 편집기이지만, vscode의 강점은 방대한 양의 확장 프로그램을 지원한다는 것이다.

단순한 Syntax Coloring을 가능하게 하는 확장 프로그램부터, Pylance, C/C++과 같은 강력한 브라우징 및 InteliSense 기능을 통해 개발을 돕는 확장 프로그램도 있고, Docker, Dev Container 및 WSL처럼 가상 환경에서의 개발을 네이티브에서처럼 쉽게 할 수 있도록 하는 확장 프로그램과, Remote - SSH처럼 원격 서버에서의 개발을 쉽게 해 주는 확장 프로그램도 있다.

또한, Source Control 기능이 내장되어 있어서 Git과의 연동성이 매우 우수하다. 확장 프로그램 몇 개만 추가로 설치하면 터미널에 명령어를 입력할 필요 없이 마우스로만 웬만한 Git 조작이 모두 가능할 정도이다.

vscode와 IDE#

vscode는 강력한 개발 환경이지만, 통합 개발 환경(IDE)은 아니다. 다양한 확장 프로그램들과 내장 터미널까지 갖추고 있어 거의 IDE를 사용하는 감각으로 사용할 수 있긴 하지만, 빌더가 내장되어 있지 않아 vscode에서 프로젝트를 빌드하려면 결국 별도의 컴파일 환경을 구축해야 한다. 예를 들어, C/C++의 경우 gcc 혹은 MinGW, Python의 경우 파이썬 인터프리터를 별도로 설치해야 한다.

vscode 설치#

Windows#

winget install -i Microsoft.VisualStudioCode

winget을 사용할 수 없다면, Visual Studio Code 공식 홈페이지에서 설치 파일을 다운로드받아 설치한다.

Linux#

공식 홈페이지에서 .deb 파일 다운로드 후 아래 명령어 입력

sudo apt install ./<file>.deb  # <file>에는 다운로드 받은 .deb 파일 이름 입력

또는, 스냅 스토어 이용

sudo snap install code

원격 개발 환경 구축#

SSH#

Secure Shell(SSH)는 네트워크 상의 다른 컴퓨터에 로그인하거나 원격 시스템에서 명령을 실행하고 다른 시스템으로 파일을 복사할 수 있도록 해주는 응용 프로그램 또는 그 프로토콜을 가리킨다. SSH를 통해 진행되는 모든 통신은 암호화되어 안전하게 보호되며, 패킷이 노출된다고 해도 그 내용을 알아볼 수 없다. 이처럼 강력한 보안을 지원하는 SSH는 telnet 등 기존의 안전하지 않은 원격 셸 접속 프로토콜을 대체하기 위해 설계되었다.

SSH의 기본 포트 번호는 22번이다.

기본 기능은 telnet과 같이 호스트 셸에 대한 원격 접속의 지원이지만, 하위 기능으로 FTP와 비슷하게 파일 전송이 가능한 sftp와, GUI 프로그램을 클라이언트에서 원격으로 실행할 수 있게 하는 X11 Display Forwarding이 가능하다.

SSH로 서버에 접속하기 위한 명령어는 아래와 같다.

ssh <username>@<host address>            # <username>은 서버의 계정 이름, <host address>는 서버의 IP 주소 혹은 도메인 네임이다.
ssh <host address>                       # 로컬 컴퓨터의 계정 이름과 서버의 계정 이름이 같을 경우 username을 입력하지 않아도 된다.
ssh <username>@<host address> -p <port>  # ssh 서버의 포트 번호가 기본 포트인 22번이 아닐 경우

vscode의 SSH Extension 사용하기#

SSH로 접속한 환경은 기본적으로 원격 호스트의 셸 환경이기 때문에, 모든 작업을 CLI 환경 위에서 해야 한다. 이는 CLI 환경이 익숙하지 않은 사람이라면 엄두도 나지 않는 작업이며, CLI 환경에 익숙해서 vim 등의 텍스트 에디터로 작업이 가능하다고 해도 상당히 불편하고 번거롭다.

그래서 우리는 Visual Studio Code에 Remote - SSH 확장 프로그램을 설치하여 원격 개발을 로컬에서 하는 것처럼 편리하게 할 수 있도록 설정할 것이다.

먼저, vscode의 extension에 'remote' 를 검색하면, 'Remote Development' 확장 프로그램을 찾을 수 있다. 해당 확장 프로그램을 설치해 준다.

remote_ext

open_remote

화면 왼쪽 아래의 표시된 버튼을 누르고, Connect to Host...를 클릭한뒤 Add new SSH hosts...를 클릭한다.

ssh를 연결할 때 입력하는 명령어를 그대로 입력한 뒤 Enter를 누른다.

ssh <username>@<host address> -p <port>

sshconfig

그러면 위와 같이 SSH 설정을 어디에 저장할 것인지를 묻는 창이 표시된다. 사용자 폴더 내의 .ssh/config 폴더를 선택해 주면 된다. Windows 라면 C:\Users\<Username>\.ssh\config 이고, Linux라면 /home/<Username>/.ssh/config 이다.
위 사진에서는 맨 위 옵션을 클릭하면 된다.

그러면 오른쪽 아래에 'Host Added!' 라고 되어 있는 작은 창이 표시된다. Connect 버튼을 누르고 서버 접속 비밀번호를 입력하면 바로 원격 접속이 가능하다.

welcome

Welcome 창에서 Open Folder를 눌러 작업 공간 폴더를 열고, 작업을 시작할 수 있다.

이제 로컬 컴퓨터에 호스트 서버에 대한 정보가 기록되었으니, 다음 번에 서버에 접속할 때에는 Connect to Host...에서 이전에 등록했던 서버를 선택해 주면 바로 연결이 가능하다.