Code Server

처음 코드 서버를 만들었던 건 아마도 3년쯤 전의 일이다. 맥미니만 있던 탓에 밖에서 개발하는 게 쉽지 않았고, 아이패드로 언제 어디서든 개발을 하고 싶었던 끝에 찾아낸 해결책이었다. 다행히 집에는 Synology NAS가 있었고, Docker를 통해 어렵지 않게 코드 서버를 만들 수 있었다. 문제는 당시의 내가 개발자 해보겠다고 까분지 얼마 안 되었을 때라는 것이었다. 프론트엔드 개발자였던 나는 shell 환경과 Docker 모두 잘 알지 못했고, 나의 코드 서버는 겨우 포트포워딩만 해놓은 수준이었다.

이제는 다르다! 많은 것이 달라졌고 지난 3년 동안 나는 꽤 많이 성장했다. 그래서 그 기념이라고 하기는 뭣하지만, 코드 서버 올리는 방법을 다시 한 번 정리해보고자 한다.

Synology NAS에 코드 서버 올리기

예전에는 이름이 Docker Station이었던 거 같은데, 언젠가부터 Synology의 도커 관련 패키지 이름이 Container Manager로 바뀌었다. 이걸 설치하고 레지스트리에서 linuxserver/code-server 를 다운받아 실행시키면 아래와 같은 화면을 볼 수 있다. 나는 컨테이너 이름으로 code-server로 했고, CPU 우선 순위는 높음, 메모리는 가능한 많이 줬다.

그리고 나서는 포트 설정을 해야한다. 나는 기본적으로 노드 위에서 작업하는 사람이라 3000번이나 3001번 정도 열어두면 큰 문제는 없다.

여기서 말하는 볼륨 설정은 Docker Volume이다. 나는 /docker/code-server 와 .config 를 연결했다.

변수 설정은 DockerFile에서 이제 도커 실행시킬 때 받아다가 쓰기 위해 필요한 것들이다. 나는 늘 아래와 같이 다섯 개의 변수를 추가적으로 할당한다.

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

이렇게 하고서, 내부 포트랑 외부 포트랑 연결될 수 있도록 공유기나 라우터(사실 같은 말이긴 한데)에서 포트포워딩 해주면 끝이다.

이것 저것 설치

예전에는 nodejs랑 npm만 설치해도 좋았는데, 요즘은 설치할 게 많다. pnpm도 설치해야 하고, bun도 설치해야 한다. 코덱스를 멀쩡하게 쓰려면 opencode랑 oh-my-opencode도 설치해야 한다. 나는 아래의 명령어를 복사해서 한 번에 붙여넣고 돌려버리는 편이다.

// CURL 설치
sudo apt-get install -y curl

// nodejs 설치
cd ~
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh 
sudo apt-get install nodejs -y

// npm 설치
sudo apt-get install build-essential

// pnpm 설치
export SHELL=/bin/sh
curl -fsSL https://get.pnpm.io/install.sh | ENV=/dev/null SHELL=/bin/sh sh -
echo 'export PNPM_HOME="/config/.local/share/pnpm"' >> ~/.bashrc
echo 'export PATH="$PNPM_HOME:$PATH"' >> ~/.bashrc

// bun 설치
sudo apt-get install -y unzip
curl -fsSL https://bun.sh/install | bash
echo 'export BUN_INSTALL="$HOME/.bun"' >> ~/.bashrc
echo 'export PATH="$BUN_INSTALL/bin:$PATH"' >> ~/.bashrc

// opencode 설치
curl -fsSL https://opencode.ai/install | bash
echo 'export PATH="/config/.opencode/bin:$PATH"' >> ~/.bashrc

// oh-my-opencode 설치
bun x oh-my-opencode install

source ~/.bashrc

글꼴 변경

코드 서버의 기본 글꼴은 시력에 영향을 주는 것이 분명하다. 몇 분만 보고 있어도 시신경이 퇴화하는 것이 느껴진다. 그런 까닭에 커스텀 폰트를 넣어준다. 나는 MapleMono를 주력으로 사용하지만 기분에 따라서는 JetBrainsMono가 쓰고싶어질 때도 있어서 둘 다 넣어준다.

// 폰트 저장 위치
sudo mkdir -p /app/code-server/lib/vscode/out/vs/code/browser/workbench/fonts

// 폰트 옮기기 (synology 쪽으로 넣어서)
sudo cp ~/workspace/JetBrainsMonoNL-Regular.ttf /app/code-server/lib/vscode/out/vs/code/browser/workbench/fonts/
sudo cp ~/workspace/MapleMono-NF-Regular.ttf /app/code-server/lib/vscode/out/vs/code/browser/workbench/fonts/

sudo apt install -y vim
sudo vim /app/code-server/lib/vscode/out/vs/code/browser/workbench/workbench.html

XML

<style>
@font-face {
  font-family: 'JetBrains Mono NL';
  src: url('/static/out/vs/code/browser/workbench/fonts/JetBrainsMonoNL-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Maple Mono NF';
  src: url('/static/out/vs/code/browser/workbench/fonts/MapleMono-NF-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
</style>

JSON

{
  "editor.fontFamily": "'Maple Mono NF', 'JetBrains Mono NL', monospace",
  "editor.fontLigatures": true
}

결과물

이제 아이패드를 통해 vscode와 유사한 개발환경을 구축할 수 있게 되었고, opencode와 omo를 통해 언제든 OpenAI의 강력한 모델과 함께 코드를 짤 수 있게 되었다.

Code Server

Synology NAS에 코드 서버 올리기

이것 저것 설치

글꼴 변경

결과물

더 읽어보기

Git Worktree

Steiger

pnpm과 terborepo로 시작하는 모노레포

Pandas

너만의 월남쌈을 싸

Trie 자료구조

Streams API 부록 2. 왜 이미지는 위에서 아래로 나타날까

Streams API 부록 1. HTTP 다운로드 진행률은 어떻게 계산될까

댓글