vscode를 웹에서 사용해보자!

서론

Microsoft Visual Studio Code 는 모두가 사랑하는 코드에디터다.

사실 나는 vscode가 무겁다는 이유로 별로 선호하지는 않지만, 아마 대부분은 좋아할 것이다. 참고로 필자는 Sublime Text를 좋아한다. vscode에 비해 매우 가볍다. 거짓말 좀 보태면 메모장 수준.

vscode는 일렉트론 기반이라서 용량도 짱 크다. 다른 코드에디터에 비해 무거운 원인이다. 그러나 바로 이 점때문에 재미있는 트릭을 가능케한다. 이론상 웹에서도 굴릴 수 있는 것이다.

그리고 실제로 이를 구현한 오픈소스 프로젝트가 있는데, 이름하여 code-server 이다.

본론

오라클 프리 티어는 강력한 서버 하나와 안 강력한 서버 두 개를 무료로 제공하고 있다. 시험 삼아 별로 안 강력한 서버에서 code-server를 돌려 보기로 했다.

code-server를 실행하기 위한 최소 요구 사항은 2 CPU cores, 1GB RAM인데, 테스트할 서버 사양과 정확하게 일치한다. 다르게 말하면 간신히 돌아가는 수준이다.

우분투 22.04 LTS 환경에서 진행했다.

패키지 다운로드

sudo apt update

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

실행

code-server

서버 재시작시 자동으로 시작되게 하려면 다음 명령어를 입력해 등록해야 한다고 한다. 테스트해 보지는 않았다.

sudo systemctl start code-server@$USER

sudo systemctl enable --now code-server@$USER

IP 주소 변경

위의 과정까지 진행해도 코드 에디터에 접속할 수는 없다. 추가적인 IP 설정과 포트 개방을 해야 된다.

~/.config/code-server/config.yaml을 다음과 같이 수정한다.

bind-addr: 0.0.0.0:8080
auth: password
password: 원하는 비밀번호
cert: false

방화벽 설정

우분투에서 방화벽 관련 설정은 iptables명령어를 통해 이루어진다. 기본적인 사용법은 아래와 같다.

현재 정책 확인(+줄번호 +자세한 내용)

sudo iptables -nL --line-numbers --verbose

tcp 22번 포트 NEW state 수신 허용 정책 추가

sudo iptables -A INPUT -p tcp --dport 22 -m state --state NEW -j ACCEPT

tcp 80번 포트 NEW state 수신 허용 정책을 6번째에 삽입

앞쪽에 위치한 정책이 우선도가 더 높으므로, 거부 정책 뒤에 오는 허용 정책은 의미가 없다. 이럴 때는 삽입 옵션을 이용할 수 있다.

sudo iptables -I INPUT 6 -p tcp --dport 80 -m state --state NEW -j ACCEPT

7번째 수신 정책 삭제

sudo iptables -D INPUT 7

참고로 서버 재부팅시 위 설정 사항은 초기화된다. 저장하기 위해서는 추가 작업이 필요하다. 물론 나는 귀찮아서 안 했다.

아무튼 8080 포트를 열어 주자. 아래 명령어를 사용하면 되겠다.

sudo iptables -I INPUT 6 -p tcp --dport 8080 -m state --state NEW -j ACCEPT

이중 방화벽 설정

oracle 가상 인스턴스 서비스 자체에도 방화벽 기능이 있다. 따라서 여기에서도 포트 설정을 해 줘야 한다.

인스턴스 > 인스턴스 세부정보 > 서브넷 > 보안 목록 > 수신 규칙 추가

메뉴에서 설정할 수 있으나 귀찮은 관계로 관련 링크를 첨부한다.

https://kibua20.tistory.com/124

결과

크롬에서 접속한 모습이다. 신기방기

익스텐션 사용하기

code-server 는 Microsoft 에서 직접 관리하지 않는 오픈소스 프로젝트이므로, 정책에 의해 기존의 익스텐션 서비스를 이용하지 못한다. 대신 Open VSX Registry 에 등록된 익스텐션을 제공하는데, vscode 익스텐션의 부분집합 쯤 된다.

그러나 이것으로 만족할 수 있겠는가! 인간의 욕심은 끝이 없는 법. 약관 때문에 서비스를 제공하지 않는다 뿐이지 코드 베이스는 같으므로 따로 설치하는 방법이 있다. 그렇고 말고.

설치 방법

Vscode 마켓플레이스에서 원하는 익스텐션을 검색한 뒤 Download Extension을 눌러 *.vsix 파일을 다운로드한다.

아래 명령어를 입력한다.

code-server --install-extension extension_file.vsix

끝!

여담

놀고 있는 서버가 아까워 재미 삼아 해 본 건데, 생각보다 쓸만하다…!?

https 설정 작업 등이 남아있는데 이건 귀찮아서 다음에 하는 걸로 하자.