Code Server

결과물부터 보여주는 패기

벌써 4년 넘는 시간 동안 NAS를 써왔다. 5만원짜리 타오나스를 집어와서는 집에 굴러다니는 적당한 하드 하나 넣어서 쓰기 시작한 게 최초의 기억이다. 이후로 18테라 가까이 증설했지만, raid 문제로 실제 용량은 11테라에 불과(?)하다. 그마저도 절반을 채우지 못했다. NAS가 '서버'라는 것은 알지만, 일반 사용자의 입장에서는 집에 두고 다닐 수 있는 외장 하드 정도의 취급이었다.

 

그러다가 프론트엔드 과정을 밟기 시작했고, 밖에 돌아다닐 일이 많아지면서 맥미니로는 대응할 수 없는 상황이 자주 발생했다. 큰 돈을 쓰고 싶지는 않았지만, 노트북 자체는 필요했다. 일단 동생의 Gram 노트북에다가 강제로 맥을 설치하는 방법으로 돈을 아껴보고자 했다. 하지만 미봉책은 해결책이 될 수 없다.

012

체험, 마개조의 현장!

아무래도 macOS를 지원하지 않는 하드웨어인데다가, 운영체제 자체를 중간에 맥으로 속이고 있다보니 시도 때도 없이 오류가 발생하였다. 어딘가 뻑날 때마다 재부팅하면서 버틸 수는 있었다. 하지만 어느 시점이 되니까 그냥 그러고 싶지 않아졌다. 나는 선택을 해야했다. 그 전에 이것저것 좀 알아보았다.

 

주목했던 것은 클라우드 컴퓨팅을 통한 원격 코딩이었다. 웹 버전의 vs code를 사용하는 방법이 존재했고, github의 리포지토리에서 즉시  vs code를 호출하여 작업하는 것도 가능해보였다. 그러나 react 등을 사용하려면 nodejs와 npm이 필요하다. 당시에 나는 웹 버전의 vs code에서 터미널을 이용할 수 없을 거라 생각했다. 그래서 결국 맥북에어를 구매하게 되었다.

 

그런데 얼마 전에 github에서 놀다가 한 가지 재미있는 서비스를 발견했다. github codespace였는데, 이를 사용하면 github 쪽에서 클라우드 컴퓨터를 통해 리눅스 위에서 vs code를 돌리는 것과 같은 환경을 제공해준다는 것이었다. 2000 action minute/month 라는 독특한 단위로 제공되는 무료 사용 시간과, 추가적인 성능과 저장 공간을 제공하는 유료 사용 시간 등의 옵션이 존재했다.

문득 그런 생각이 들었다. 내 책상 밑에서 하루종일 돌아가고 있는 5만원짜리 타오나스도 결국에는 리눅스 기반으로 돌아가는 '서버'라는 생각이. 이걸 이용하면 github에서 제공하는 codespace 서비스와 똑같은 환경을 무제한으로 구성할 수 있을 것 같았다. 구글에 검색해보니 'code server'라는 용어와 함께 docker를 사용해서 이러한 환경을 구축하는 방법이 아주 자세하게 소개되어있었다. 내가 못할 수준은 아닌 것 같았다.

다섯 시간 가량의 지난한 삽질의 시작이었다.

 

 

Docker로 code-server 설치

docker의 레지스트리 탭에서 code-server라는 키워드로 검색해보면 여러 가지가 나오는데, 여기서 linuxserver/code-server를 더블클릭하여 다운받으면 된다. 도중에 태그를 선택하라고 나오는데 이게 버전을 선택하는 거라 latest로 해주면 된다.

config 파일이 저장될 폴더도 미리 만들어두어야 하는데, 나는 docker -> code-server -> config 경로에 생성해두었다.

다운로드가 끝나면 이미지 탭에 linuxserver/code-server가 있을 텐데, 이걸 더블 클릭하면 위와 같이 컨테이너를 생성할 수 있다. 컨테이너 이름은 원하는 대로 설정하고, 고급 설정을 눌러준다.

01

1. 볼륨 설정 : 여기서 폴더 추가를 누르고 아까 만들었던 config 폴더를 추가해준다. 마운트 경로는 /config로 해주었다.
2. 포트 설정 : 자동으로 두면 자동으로 포트를 정해주는데, 나는 컨테이너 포트와 로컬 포트가 일치해야 나중에 포트포워딩 할 때 편해서 일치시켜주었다.
3. 환경 변수 설정 : 아래와 같은 변수들을 추가로 설정해주자

변수	값
TZ	Asia/Seoul
PUID	1000
PGID	1000
PASSWORD	코드 서버에 접근할 때 비밀번호
SUDO_PASSWORD	리눅스 root 비밀번호

 

이러고 적용을 눌러주면 컨테이너가 생성된다.

 

 

컨테이너에서 nodejs + npm 설치

컨테이너에 생성된 이미지를 더블 클릭하면 이런 창이 뜨는데, 마지막에 터미널 항목에 들어가서 '생성'을 누르면 리눅스 명령어를 입력할 수 있도록 bash 터미널이 생성된다. 어쨌든 이것도 서버다보니 맥이나 윈도우에서 하던 것처럼 Node.js 홈페이지 들어가서 설치 파일을 다운받는 방식으로는 안되다보니 터미널 명령어를 통해 설치해주어야 한다.

 

CURL 설치

node.js를 설치하기 위해서는 우선 커맨드라인툴 부터 설치해주어야 한다. CURL은 서버와 통신할 수 있는 커맨드 명령어 툴이자 웹개발에 매우 많이 사용되고 있는 무료 오픈소스다.

sudo apt-get install -y curl

 

PPA를 이용한 node.js 설치

PPA를 이용하면 원하는 node 버전을 쉽게 설치할 수 있다. 먼저 PPA 패키지에 엑세스하기 위해 PPA를 설치해야 한다. 홈 디렉토리로 진입해 가장 최신 버전인 20버전을 설치해보자. 앞으로 나올 명령어는 모두 한 줄 씩 순서대로 실행해주어야 한다.

cd ~
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh

sudo 권한으로 PPA를 추가하고 업데이트한다.

sudo bash nodesource_setup.sh 
sudo apt-get install nodejs -y

PPA를 이용해 node.js를 설치하면 npm도 자동으로 함께 설치된다. 하지만 npm이 제대로 동작하기 위해서는 build-essential 패키지를 추가적으로 설치해주어야 한다.

sudo apt-get install build-essential

그러면 이렇게 깔─끔하게 node와 npm이 설치된 것을 확인할 수 있다.

 

 

포트포워딩을 통해 외부 포트를 열어주면 이렇게 정해진 포트 넘버를 통해 코드 서버에 접근할 수 있다. PASSWORD로 설정해주었던 비밀번호를 입력하면 맨처음 보여준 사진과 같이 웹 환경에서 vs code를 사용할 수 있다.

몇 가지 vs code extension은 사용할 수 없는 것 같지만, 그런 것들만 제외한다면 (터미널도 진짜 리눅스 환경의 bash로 작동하는 등) 컴퓨터에서 vs code를 사용하는 경험과 완전히 같다고 말할 수 있을 거 같다.

NAS의 장점이라면 '어디서든 어떤 환경에서든 동일한 사용성을 보장한다'는 데 있을텐데, 이것은 서버로 올려놓은 vs code에도 해당되는 이야기이다. 이제 아이패드 사파리에서나 갤럭시 s10의 DeX 모드에서나 모두 동일한 vs code 서버에 접속해서 똑같은 방식으로 코드를 작업할 수 있는 것이다!

심지어는 아이폰에서도 접속할 수 있어, 지하철에서 정말 급할 때 어떻게든 코드 작업을 할 수 있을 것 같다.

 

 

해결하지 못한 문제

이렇게 이것저것 하고 프로젝트도 건드려보고 있는데, next.js 프로젝트에서 npm run dev를 해도 서버 내부의 localhost에 접속할 방법을 모르겠다. 코드 서버 내부에서는 proxy로 우회하는 방식으로 localhost를 제공해주고 있는 것 같은데, 아무리 시도해봐도 404가 뜬다. 이것만 해결하면 내 아이패드는 무적의 코딩 머신이 될 수 있을 텐데 아쉬운 일이다.