code-server로 어디서든 개발하기

code-server 설치하기

서론

태블릿(갤럭시 탭, 아이패드 등)에서는 코딩할 수 있는 환경이 데스크톱과 비교하면 열악합니다.

갤럭시 탭의 경우 태블릿 자체에서 리눅스를 띄울 수는 있다고 하는데 아이패드를 사용하고 있는 저는 코딩을 할 수 있는 방법이 없었습니다.

 

code-server(코드서버)를 사용하면 웹 환경에서 vscode를 사용할 수 있는데 이를 사용하여 태블릿에서 코딩하는 방법을 소개해보겠습니다.

✏️ TL;DR

• Docker를 기반으로 code-server를 설치합니다.
• PWA로 아이패드에 code-server를 설치하면 단축키를 사용할 수 있습니다.
• Docker mods를 사용해 Docker 기반의 code-server에서도 JDK, Node 등의 패키지를 설치할 수 있습니다.

🖥️ code-server 설치하기

해당 글에서는 code-server를 설치할 리눅스 서버가 있다는 가정 하에 진행합니다. code-server는 호스트 컴퓨터에 바로 설치할 수도 있지만 여기서는 Docker(docker-compose)를 함께 써서 설치해 보겠습니다. 이미지는 linuxserver/code-server 를 사용합니다.

설정해야 될 환경변수는 크게 아래와 같습니다.

• PUID, PGID : 권한 설정을 위해 필요합니다. 특별한 경우가 아니라면 1000 값으로 문제없이 사용할 수 있습니다.
• TZ : 타임존을 설정합니다.
• PASSWORD : code-server 웹 접속(사용) 시 사용할 비밀번호를 설정합니다.
• DEFAULT_WORKSPACE : 기본 workspace 경로를 바꿀 경우에만 사용합니다. 기본값은 /config/workspace 입니다.

환경변수 설정 시 PASSWORD 변수를 통해서 비밀번호를 설정할 수 있습니다. 다만, 평문값을 요구하기 때문에 code-server에서는 HASHED_PASSWORD 라는 추가적인 환경변수를 제공하고 있습니다.

 

argon2 알고리즘을 사용해서 해싱한 값을 HASHED_PASSWORD 변수로 넘겨 사용할 수 있습니다. 공식 문서에서는 아래와 같은 방법으로 소개하고 있습니다.

 

$ echo -n "thisismypassword" | npx argon2-cli -e
$ $argon2i$v=19$m=4096,t=3,p=1$wst5qhbgk2lu1ih4dmuxvg$ls1alrvdiwtvzhwnzcm1dugg+5dto3dt1d5v9xtlws4

 

Docker Secret를 사용해서도 비밀번호를 전달할 수 있습니다. 환경변수 앞에 FILE__ 접두사를 붙여서 사용하면 됩니다.

 

FILE__PASSWORD=/run/secrets/codeserver_password

 

추가로 code-server 내부 터미널에서 sudo 권한이 필요한 경우도 있습니다. 이 때는 SUDO_PASSWORD 환경변수로 루트 계정의 비밀번호를 설정해 줄 수 있고 이 역시 마찬가지로 SUDO_PASSWORD_HASH 환경변수로 암호화된 비밀번호를 전달할 수 있습니다.

 

위 내용을 종합해서 docker-compose 파일로 작성하면 아래와 같습니다.

 

# docker-compose.yaml

version: "3.1"

services:
  code-server:
    restart: unless-stopped
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Seoul
      - PASSWORD=codeserver_password
      - DEFAULT_WORKSPACE=/config/workspace
    volumes:
      - /etc/vscode:/config
    ports:
      - 8443:8443

 

이제 docker compose up -d 명령어로 컨테이너를 실행하고 서버 주소와 컨테이너를 만들 때 사용한 포트로 접속하면 됩니다. (예: http://localhost:8443)

 

code-server 접속 화면

 

이제 설정한 비밀번호를 입력하고 들어가면 네이티브 vscode 하고 동일하게 사용할 수 있습니다!

⌨️ 단축키가 작동하지 않는 문제

아이패드 기준 code-server에서 단축키를 사용하면 작동이 안 되는 문제가 있습니다. code-server는 PWA를 지원하는데 PWA으로 설치해서 사용하면 단축키를 사용할 수 있습니다.

 

PWA 설치

☕ code-server에서 JDK 사용하기

JDK뿐만 아니라 NodeJS 등 추가적인 패키지가 필요한 경우가 있습니다.

물론 리눅스에서 제공하는 패키지 매니저(apt, yum 등)로 설치하면 되지만 이 글에서는 Docker를 사용했기 때문에 컨테이너를 재시작하면 설치한 패키지가 초기화되는 문제가 있습니다.

 

linuxserver 이미지에서는 이를 해결하기 위해 Docker mods라는 기능을 제공합니다. 설치할 패키지를 환경변수로 넘겨주면 컨테이너 시작할 때 함께 설치해 주는 기능입니다.

DOCKER_MODS 환경변수를 통해 설치할 Docker mods 이미지를 전달해 주면 됩니다. (복수 전달이 가능하며 구분자는 |를 사용합니다.)

 

예를 들어 NodeJS(v14)와 Git을 설치하고 싶다면 아래와 같이 환경변수를 전달하면 됩니다.

 

DOCKER_MODS=linuxserver/mods:code-server-nodejs|linuxserver/mods:universal-git

 

또는 wget 등 이미 만들어진 패키지를 설치할 수도 있습니다. 이 때는 linuxserver/mods:universal-package-install 이미지를 사용하며 INSTALL_PACKAGES 환경변수를 사용해 설치할 패키지를 전달합니다. (이 때도 구분자는 |를 사용합니다.)

 

# wget, vim 설치
DOCKER_MODS=linuxserver/mods:universal-package-install
INSTALL_PACKAGES=wget|vim

 

이후 다시 컨테이너를 시작하면 code-server를 시작하기 전 전달해 준 패키지를 설치하는 것을 볼 수 있습니다.

 

Docker mods(JDK) 설치 로그

 

---

code-server 설치부터 기타 필요한 패키지까지 모든 준비가 끝났습니다.

이제 인터넷이 되는 환경이라면 어디서든 code-server에 접속해서 코딩이 가능합니다!

 

 

Reference:

- https://docs.linuxserver.io/images/docker-code-server/

- https://github.com/linuxserver/docker-mods