안녕하세요. 소리입니다 👋
이번 글에서는 code-server라는 오픈소스 프로젝트를 소개하고, 설치하는 과정을 정리해볼게요.

---

웹 기반 IDE, code-server

code-server는 VSCode를 웹 기반으로 실행할 수 있도록 해주는 오픈소스 프로젝트예요.
기기마다 개발 환경을 설정할 필요 없이, 개인 서버에 설치해 놓고 웹으로 접속하도록 만들 수 있어요.
특히, 데스크톱에서 사용하던 VSCode의 거의 모든 기능을 웹 환경에서 사용할 수 있어서 부담 없이 사용할 수 있어요.

🤔 웹 기반 환경은 어떤 점에서 유리할까요?

1. 여러 기기에서 공통된 개발 환경을 사용할 수 있어요.
   장소와 기기를 옮겨 가며 작업하시나요?
   웹 기반 환경에서는 웹 접속만으로 같은 환경을 유지할 수 있어요.

2. 기기의 RAM, 배터리 등의 컴퓨팅 자원을 아낄 수 있어요.
   테스트나 컴파일이 모두 서버에서 이루어지기 때문에 작업하는 환경을 쾌적하게 만들 수 있어요.

3. 모바일 태블릿을 개발 환경으로 사용할 수 있어요.
   Android나 iPadOS에서 개발을 하기에는 생태계에 아쉬움이 많죠.
   태블릿에서 웹앱 형태로 강력한 도구들을 사용할 수 있어 한계를 벗어날 수 있어요.

🖥️ code-server 지원 환경

자세한 정보는 code-server의 Github 페이지를 참고해주세요.

code-server의 요구 조건은 다음과 같아요.

운영체제	RAM	CPU
Linux	1GB	2 vCPUs

📌 Windows에도 설치할 수 있어요!

Windows 기능 중 WSL이라는 것이 있어요.
WSL은 Windows에서 리눅스 환경을 사용할 수 있게 해주는 기능이에요.
이 기능을 통해 리눅스 환경을 만들면 code-server를 문제 없이 설치할 수 있어요.

🍓 라즈베리 파이를 서버로 사용할 수 있어요!

라즈베리 파이는 저사양·저전력·저비용을 특징으로 하는 교육 목적으로 출시된 컴퓨터예요.
만약 서버로 쓸 만한 컴퓨터가 없고, code-server로 가벼운 개발 프로젝트를 진행할 예정이라면 라즈베리 파이 사용을 추천드려요.

Docker로 code-server 구성하기

저는 code-server를 바로 설치하지 않고 Docker 컨테이너 형태로 구성했어요.

😲 도커로 구성하면 좋은 점

가장 큰 장점은 보안이에요.
code-server는 터미널 기능이 내장되어 있어, 관리가 잘 이루어지지 않으면 큰 보안 위협으로 다가올 수 있어요.
도커 컨테이너로 구성하면 프로그램이 외부 환경에 영향을 줄 수 없도록 만들 수 있어요.

또한, 관리가 간편해진다는 장점도 있어요.
서버를 옮겨야 할 때, 원래라면 일일이 프로그램을 새로 설치하고 설정해야 해요.
그러나 도커 컨테이너로 설치하면, 컨테이너를 그대로 옮기면 바로 환경 구성을 마칠 수 있어요.

🐳 도커 컨테이너 생성 준비

Docker Compose 설정 파일 작성

먼저 도커 컨테이너를 구성하는 스크립트를 작성해야 해요.
다음 Github 페이지에서 권장하는 내용을 참고했어요.

저는 아래처럼 서버에 docker-compose.yml 파일을 작성했어요.
아래 내용을 그대로 사용한다면, 저장소 연결 부분 등은 환경에 맞추어 설정하면 돼요.

# docker-compose.yml

services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    environment:
	# 필수 사항
      - PUID=1000							# 컨테이너 내부 UID: 서버 계정과 일치하게 설정
      - PGID=1000							# 컨테이너 내부 GID: 서버 계정과 일치하게 설정
      - TZ=Asia/Seoul						# 시간대
      
	# 선택 사항
      - HASHED_PASSWORD=					# code-server 비밀번호 (해시)
      - DEFAULT_WORKSPACE=/workspace		# 기본 작업 공간
      - PWA_APPNAME=code-server				# 웹앱 이름
    volumes:
      - /home/sound/workspace/:/workspace	# 컨테이너 내부 공간을 외부와 연결
    ports:
      - 8443:8443							# 포트
    restart: unless-stopped

패스워드는 해시를 권장해요.
해시로 만들면 비밀번호가 내부에 저장되지 않게 만들 수 있기 때문에 더 안전해요.
저는 argon2로 해시를 생성했어요.

# 실제 사용할 때엔 "somesalt" 부분을 난수 문자로 넣어야 함
> echo -n "사용할 비밀번호" | argon2 "somesalt" -e -id

# 생성된 해시를 위 파일에 삽입, 이때 '$' 문자는 '$$'으로 바꾸어야 함 (..2id$v.. → ..2id$$v..)
$argon2id$v=19$m=4096,t=3,p=1$c29tZXNhbHQ$qM5v2OCb81FOA5QJnauCgAtgFoVoWbINukaWDSJDa1s

📦 서버에 도커 컨테이너 올리기

⚠️ 참고해주세요!

아래 사진은 이미 도커가 설치된 Ubuntu 24.04 환경에서 촬영했어요.
사용하는 명령어의 종류나 결과는 환경에 따라 조금 다를 수 있어요.

Docker Compose 빌드

이제 작성한 docker-compose.yml 파일을 이용해 도커 컨테이너로 빌드할게요.
파일이 있는 위치에서 다음 명령어를 입력하면 빌드할 수 있어요.

> docker-compose up -d --build

방화벽 설정

드디어 code-server를 도커로 실행하는 것까지 성공했어요!
그러나 아직은 서버 외부에서 접속할 수 없습니다.
서버의 방화벽을 열어야 외부에서 접속하는 것을 막고 있기 때문이에요.

Ubuntu의 기본 방화벽은 UFW예요.
외부 접속이 가능하도록 UFW에 규칙을 추가할게요.

# docker-compose.yml 파일에 작성한 포트를 허용
> ufw allow 8443/tcp

code-server 기능 알아보기

이제 서버 외부에서 접근할 수 있어요.
웹 브라우저에 http://<서버 주소>:<포트> 형태로 주소를 입력하면 접속할 수 있어요.

code-server 접속 잘 되시나요?
이제 웹 브라우저로 접속한 후 암호를 입력하면 VSCode를 웹으로 사용할 수 있어요.

🎒 확장 기능 설치하기

좀 더 편한 사용을 위해 한국어 언어 확장 기능을 설치해볼게요.

왼쪽 Extensions에서 Korean Language Pack을 설치했어요.

설치를 완료했다면 언어를 한국어로 적용해볼게요
검색 바에 >configure display language를 검색해서 언어를 설정할 수 있어요.

다른 확장 프로그램도 비슷하게 설치할 수 있어요.

⚠️ 참고해주세요!

VSCode는 오픈 소스인 것에 반해, Microsoft의 마켓플레이스는 외부에 제공되지 않아요.
따라서 code-server에서는 Microsoft의 마켓플레이스가 아닌 Open-VSX 마켓플레이스가 제공돼요.
자세한 내용은 다음 페이지에서 확인할 수 있어요.

💾 저장소 연결 확인하기

code-server를 도커 컨테이너로 실행하면 작업 공간이 도커 내부가 돼요.
만약 컨테이너가 삭제되면 작업한 결과물도 같이 없어지죠.

docker-compose.yml의 volumes 설정을 통해 도커 내부와 외부를 연결할 수 있어요.
작업 공간을 외부와 연결해놓으면 작업 공간을 컨테이너 외부 공간을 그대로 사용할 수 있어요.

---

지금까지 code-server를 도커 컨테이너로 생성하고 실행하는 것까지 해 보았아요.

다음 글에서는 code-server를 HTTPS로 실행할 수 있도록 만들어볼게요.

✅ 지금까지 한 일

• docker-compose로 code-server 컨테이너 구성하기
• 방화벽 설정으로 외부 접속 허용하기
• 웹 브라우저에서 code-server 접속 확인하기

📋 앞으로 할 일

• TLS 인증서 적용하기
• HTTPS로 접속할 수 있도록 만들기