Web 상에서 vscode를 사용할 수 있게 하는 오픈소스

• Code on any device with a consistent development environment
• Use cloud servers to speed up tests, compilations, downloads, and more
• Preserve battery life when you're on the go; all intensive tasks run on your server

필자가 아이패드 구매 후 개발 환경 구축을 어떻게 해야하나 (할 수는 있는 걸까) 고민하던 찰나 발견한 open source로, 개발 서버에 code-server 프로젝트를 실행하면 web 환경을 이용해 개발을 가능하게 할 수 있다. 이와 같은 시스템은 이미 github나 gitlab 등에서 많이 발견되고 있다.

설치

크게 두 가지 방법을 생각할 수 있다. 하나는 systemctl로 관리 가능하게 설치하는 법이고, 다른 하나는 docker로 관리하는 방법이다. 필자는 후자를 먼저 시도해보았으나, 개발 언어 라이브러리나 컴파일러 환경을 추가적으로 함께 올려야 한다는 점에서, 당장 사용하는 데에 첫 번째 방식이 더 편리하다고 결론 지었다.

스크립트를 사용한 설치 방법

1. If you use the install script, you can preview what occurs during the install process:

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

   [code-server]# curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
   CentOS Stream 8
   Installing v4.11.0 of the amd64 rpm package from GitHub.
   
   + mkdir -p ~/.cache/code-server
   + curl -#fL -o ~/.cache/code-server/code-server-4.11.0-amd64.rpm.incomplete -C - https://github.com/coder/code-server/releases/download/v4.11.0/code-server-4.11.0-amd64.rpm
   + mv ~/.cache/code-server/code-server-4.11.0-amd64.rpm.incomplete ~/.cache/code-server/code-server-4.11.0-amd64.rpm
   + rpm -U ~/.cache/code-server/code-server-4.11.0-amd64.rpm
   
   rpm package has been installed.
   
   To have systemd start code-server now and restart on boot:
     sudo systemctl enable --now code-server@$USER
   Or, if you don't want/need a background service you can run:
     code-server
   
   Deploy code-server for your team with Coder: https://github.com/coder/coder

2. To install, run:

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

   [code-server]# sudo systemctl enable --now code-server@$USER
   [code-server]# sudo systemctl status code-server@root.service 
   ● code-server@root.service - code-server
      Loaded: loaded (/usr/lib/systemd/system/code-server@.service; enabled; vendor preset: disabled)
      Active: active (running) since Wed 2023-03-22 10:14:22 KST; 8s ago
    Main PID: 1296611 (node)
       Tasks: 22 (limit: 204112)
      Memory: 71.1M
      CGroup: /system.slice/system-code\x2dserver.slice/code-server@root.service
              ├─1296611 /usr/lib/code-server/lib/node /usr/lib/code-server
              └─1296649 /usr/lib/code-server/lib/node /usr/lib/code-server/out/node/entry
   
    3월 22 10:14:22 m-k8s systemd[1]: Starting code-server...
    3월 22 10:14:22 m-k8s systemd[1]: Started code-server.
    3월 22 10:14:23 m-k8s code-server[1296611]: [2023-03-22T01:14:23.726Z] info  Wrote default config file to ~/.config/code-server/config.yaml
    3월 22 10:14:24 m-k8s code-server[1296611]: [2023-03-22T01:14:24.444Z] info  code-server 4.11.0 85e083580dec27ef19827ff42d3c9257d56ea7e3
    3월 22 10:14:24 m-k8s code-server[1296611]: [2023-03-22T01:14:24.446Z] info  Using user-data-dir ~/.local/share/code-server
    3월 22 10:14:24 m-k8s code-server[1296611]: [2023-03-22T01:14:24.463Z] info  Using config file ~/.config/code-server/config.yaml
    3월 22 10:14:24 m-k8s code-server[1296611]: [2023-03-22T01:14:24.464Z] info  HTTP server listening on http://127.0.0.1:8080/
    3월 22 10:14:24 m-k8s code-server[1296611]: [2023-03-22T01:14:24.464Z] info    - Authentication is enabled
    3월 22 10:14:24 m-k8s code-server[1296611]: [2023-03-22T01:14:24.464Z] info      - Using password from ~/.config/code-server/config.yaml
    3월 22 10:14:24 m-k8s code-server[1296611]: [2023-03-22T01:14:24.464Z] info    - Not serving HTTPS

   기본적으로 웹 상에서 127.0.0.1:8080 주소와, ~/.config/code-server/config.yaml 안에 있는 비밀번호를 이용해 사용 가능하다.

    [code-server]# cat ~/.config/code-server/config.yaml
    bind-addr: 127.0.0.1:8080
    auth: password
    password: $password
    cert: false

이 설정 파일의 값을 수정 후(127.0.0.1:8080→ [Your IP]:[Port]) sudo systemctl restart code-server@root.service 를 수행하면 바뀐 설정으로 구동된다.

기존 vscode와 같이 각종 확장 모듈을 사용할 수 있다는 것이 장점이고 (다만 아직 지원되지 않는 확장도 있다고 들었다 - 실제로 확장 목록창이 프로그램으로 실행했을 때와는 다르게 나온다), 터미널도 프로그램 상에서 remote-ssh 접속한 것 처럼 사용할 수 있어 편리하다.

Docker image를 이용한 설치 방법

code-server는 위의 스크립트를 이용한 설치 방법 이외에도 다양한 설치 방식을 지원하고 있다. 그 중 한 방법은 도커 이미지를 활용한 방식이다. 도커-컴포즈를 사용하거나, CLI 명령어를 사용하는 방법 둘을 모두 지원하고 있고 다음과 같은 방식으로 실행하면 잘 구동되는 것을 확인 할 수 있다.

    docker run -d \
      --name=code-server \
      -e PUID=1000 \
      -e PGID=1000 \
      -e TZ=Etc/UTC \
      -e PASSWORD=password `#optional` \
      -e HASHED_PASSWORD= `#optional` \
      -e SUDO_PASSWORD=password `#optional` \
      -e SUDO_PASSWORD_HASH= `#optional` \
      -e PROXY_DOMAIN=code-server.my.domain `#optional` \
      -e DEFAULT_WORKSPACE=/config/workspace `#optional` \
      -p 8443:8443 \
      -v /path/to/appdata/config:/config \
      --restart unless-stopped \
      lscr.io/linuxserver/code-server:latest

도커로 실행했을 때의 장점은 하나의 서버에서 여러 컨테이너를 통해 프로젝트 별로 웹 개발 서비스를 지원할 수 있다는 점이다. (github, gitlab의 경우와 근접하게 느껴진다) 단점은 처음에도 언급했듯이 라이브러리를 추가하는 방식이 조금 거슬릴 수 있다는 점이다.

python개발을 위한 code-server 설정

이 블로그에선 파이썬 개발을 위해, code-server 도커 컴포즈 파일과 도커파일을 융합해 컨테이너를 올리고 있다.

다른 블로그에서는 DOCKER_MODS를 이용해 node 14를 사용하고 있다. 아마도 이 방식이 밀고 있는 방식인듯 하다.