VSCode-server로 개발환경 만들기

Window PC에서 VS code-server를 통해 외부에서 접속 가능한 개발환경을 만드는 방법을 알아본다.

code-server란?

vs code-server는 electron 기반 오픈소스인 VS Code를 Node.js 통해 Server를 올리고 크롬 브라우져에서 직접 VS Code 에디터를 사용할 수 있도록 만들어진 오픈소스이다.

  • Code everywhere
    • Code on your Chromebook, tablet, and laptop with a consistent development environment.
    • Develop on a Linux machine and pick up from any device with a web browser.
  • Server-powered
    • Take advantage of large cloud servers to speed up tests, compilations, downloads, and more.
    • Preserve battery life when you’re on the go as all intensive tasks runs on your server.
    • Make use of a spare computer you have lying around and turn it into a full development environment.

윈도우 환경에서 우분투 환경을 만든 뒤에 VS code-server를 실행시킴으로써 언제 어디서나 Chrome 브라우져가 있는 곳이라면 내 PC환경의 VS code editor를 통해 개발할 수 있는 환경을 만들어보겠다.

1. Ubuntu에 필수 프로그램 및 code-server 설치

$ sudo apt-get update
$ sudo apt-get install build-essential net-tools
$ wget -q https://github.com/cdr/code-server/releases/download/3.4.1/code-server_3.4.1_amd64.deb  # code-server 다운로드 
$ sudo dpkg -i code-server_3.4.1_amd64.deb  # 파일 압축 풀기
$ export PASSWORD=password >> ~/.bashrc # .bashrc (로그인할 때 실행되는 개인 사용자 시작파일)에 비밀번호 저장
$ echo $PASSWORD  # 환경변수가 잘 들어갔는지 확인 (생략가능)
$ source ~/.bashrc  # .bashrc 파일의 변경사항 바로 적용
$ sudo ufw allow 8080/tcp # 8080 port 방화벽 해제

2. VS Code extensions 패키지를 설치 후, code-server 실행

$ code-server --install-extension ms-vscode.cpptools ms-vscode.cpptools formulahendry.terminal hookyqr.beautify
$ code-server

image

이제 크롬브라우져에서 http://localhost:8080에 접속하면 위와 같이 VS Code 에디터가 동작하고 에디터에 설치한 확장 패키지가 적용된 것을 볼 수 있다.

image

3. 외부에서 code-server 접근

이제 외부로부터 code-server로 연결할 수 있도록 세팅해야 한다. ifconfig에서 inet address을 확인한다.

image

다시 우분투 터미널에서 code-server를 실행한다. ifconfig를 통해 확인한 inet address 172.20.12.68을 적어준다.

$ code-server --bind-addr 172.20.12.68:8080

이제 크롬 브라우저에서 http://172.20.12.68:8080 으로 VSCode에 접속이 가능하다.

error listen EADDRINUSE: address already in use 해결 방법

위의 code-server가 비정상 적으로 종료된후에 다시 code-server를 실행할 때 port 번호가 이미 사용중이라는 에러가 뜰 떄가 있다. 그러면 켜져있는 해당 프로세스를 죽이고 다시 실행하면 된다.

image

lsof 는 list open files 의 약자로 시스템에서 열린 파일 목록을 알려주고 사용하는 프로세스, 디바이스 정보, 파일의 종류등 상세한 정보를 출력해 준다. -i 특정 포트를 사용하는 프로세스 정보를 보여준다.

$ sudo lsof -i :<port>
$ kill -9 <PID>

image