[code-server] 서버기반 개발환경으로 vscode를 실행하는 code-server 소개

지난시간엔 MS의 vscode.dev를 소개하는 글을 올렸었다. 브라우저에서 vscode를 사용할 수 있어 어떤 디바이스를 사용해도 소스코드를 수정하거나 확인할 수 있지만, 터미널이나 실제 코드를 디버깅하는 기능은 사용할 수 없다는 단점이 있었다.

이번시간에는 비록 MS에서 직접 개발한 것은 아니지만, 서버 비용외 별도 사용량은 없는 MIT 기반 개발환경 구축 플랫폼인 code-server를 소개한다.

 

https://github.com/cdr/code-server

GitHub - cdr/code-server: VS Code in the browser

 

이제 본격적인 구축을 진행해보자

 

1. 인스턴스 생성

code-server를 구축할 클라우드 인스턴스를 생성한다. 클라우드 서비스 업체는 여러종류가 있지만 여기선 Amazon Lightsail을 예시로 하겠다.

 

code-server의 최소요구사항은 1GB RAM, 2 CPU cores 이다. 원할한 사용을 위해 최소사양보다 높은 인스턴스 성능을 선택하도록 하자.

 

 

2. code-server 설치 및 실행

아래 명령어로 code-server를 설치하자.

curl -fsSL https://code-server.dev/install.sh | sh

서비스로 실행하기위해 systemctl 명령어로 enable 시켜준다. 해당명령어는 설치시에 `code-server@$USER` 라고 표시하는데 Lightsail 우분투에선 기본계정명이 `ubuntu` 이므로 $USER 대신 ubuntu라고 써주면 된다.

sudo systemctl enable --now code-server@ubuntu

code-server가 제대로 실행되었는지 확인을 위해 list-units 옵션으로 확인한다.

sudo systemctl list-units code-s*

 

정상적으로 실행되었다면 스크린샷과 같은 상태가 표시될 것이다. 그러나 여전히 접속은 불가능한데 이를 해결하기 위해선 몇가지 설정이 필요하다.

 

3. config.yaml 수정

vim 명령어로 `~/.config/code-server` 경로에 있는 `config.yaml` 파일을 편집해야 한다.

vim ~/.config/code-server/config.yaml

열고나면 아래와 같은 설정값이 보일 것이다.

bind-addr: 127.0.0.1:8080
auth: password
password: f****************6e85ed0
cert: false

설정값에서 `bind-addr` 의 값을 127.0.0.1:8080 에서 0.0.0.0:8080으로 바꾼 후 저장한다.

`systemctl` 명령어의 restart 옵션으로 code-server 서비스를 재실행시켜준다.

sudo systemctl restart code-server@ubuntu.service

config.yaml에 있던 password를 잘 기억해두자. 접속 정보로 사용된다.

 

4. 방화벽 설정

Lightsail 의 네트워킹 설정에서 8080 포트에 대한 TCP 프로토콜 통신접근을 허용한다.

 

5. 접속확인

이제 크롬이나 엣지같은 최신 브라우저에서 http://{인스턴스 IP주소}:8080 로 접속해보자

이전 단계에서 기억해둔 Password을 입력 후 SUBMIT 을 누르면,

나만의 VM Instance 에서 동작하는 VSCode를 확인할 수 있다.

 

해당 VSCode는 전용 Instance 내에서 동작하는 개발툴이므로 해당 인스턴스의 터미널을 이용하여 개발 언어에 대한 빌드 및 디버깅을 수행하게 된다.

 

이것으로 VSCode 서버 구축을 살펴보았다. 개인이 사용하기엔 비용의 부담이 들긴하지만 스냅샷 기능을 이용해 필요할 때만 서버를 가동하여 저렴하게 클라우드 개발환경을 이용해보는 것도 괜찮을 것 같다.