2025-01-31 • 11 min read

code-server 설치와 vsix

셀프호스팅

아이패드 환경에서 백준 문제풀이를 위해 환경을 구축합니다.

아이패드 프로를 구매한 이후로, 별로 프로답지 못한 운영체제의 여러 제약사항에 구속되어 꽤나 불편함을 느끼고 있는 요즘입니다.

대표적으로는

파일시스템에 접근할 권한이 주어지지 않아 resilio sync 같은 검증된 파일 싱크 솔루션을 사용할 수 없는것도 그러하며,

Apple M1이라는 압도적인 성능의 프로세서를 해봐야 리듬게임 정도에밖에 사용할 곳이 없다는 사실도 그리 달갑지만은 않습니다.

아이패드용 스마트키보드 폴리오를 구매하며 키보드의 높은 생산성을 활용해볼 곳이 없을까 고심하다가, 서버의 자원을 일부 활용하는 형태로나마 아이패드에서 간단한 개발, 백준 문제해결을 가능하게 하는 환경을 구축하고자 마음먹었습니다.

목표

제가 구축하고자 하는 알고리즘 문제해결 환경은 아래와 같습니다

vscode를 사용한 소스코드 작성
baekjoonhub를 사용해 문제 해결시 repository에 자동 커밋
cph를 사용해 테스트케이스를 빠르게 실행
competitive companion을 사용해 cph에 데이터를 전달

이 4가지 요구사항은 현재 맥북에서 사용하고 있는 백준 문제해결 환경 셋업과도 동일하며,

이 환경을 아이패드에서도 사용할 수 있게끔 해보도록 하겠습니다.

vscode를 아이패드에서 사용하기

여기부터가 큰 문제입니다. vscode는 아이패드-native 한 앱이 아닙니다.

애초에 아이패드 자체가 소스코드 작성용으로는 설계되지 않았다는 양, 거의 모든 종류의 ide를 지원하지 않습니다.

전문가의 작업용 기기를 표방하는 플랫폼인 만큼, 추후 개발자에 대한 지원이 보다 충실해졌으면 좋겠습니다만 당장은 우회해서 사용해보도록 합시다.

개인 서버를 가지고 있는 분들의 경우 한번쯤 들어보셨을지도 모르겠습니다. docker container 형태로 vscode를 띄워서 웹에 접속해 사용할 수 있게 해줍니다. 이는 vscode가 태생적으로 Electron 기반의 웹앱이기 때문입니다.

저는 개인 서버를 보유하고 있기에, 개인 서버에 docker-compose로 배포했습니다.

docker compose 배포

docker-compose.yml 파일은 아래와 같습니다.

version: "3"
services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    environment:
      - PUID=0
      - PGID=0
      - TZ=Asia/Seoul
      - PASSWORD=${PASSWORD}
      - SUDO_PASSWORD=${PASSWORD}
      - PROXY_DOMAIN=${URL}
      - DEFAULT_WORKSPACE=/config/workspace
    volumes:
      - code-server:/config
    ports:
      - 8443:8443
      - 27121:27121
    restart: unless-stopped

volumes:
  code-server:
    driver_opts:
      type: nfs
      o: "addr=192.168.10.2,vers=4.1,rw"
      device: ":/volume1/01_Docker/code-server"

NFS를 사용해 스토리지 서버에 붙어 파일을 공유하고 있습니다.

향후 확장 관련 셋업을 할때 스토리지 공간에 접근해야 하니 설정해두면 좋습니다.

27121번 포트는 후술하도록 하고, 8443번 포트가 vscode 접속을 위한 포트입니다.

띄워진 code-server 인스턴스의 모습입니다. 환경변수로 넘겨준 비밀번호를 사용해 로그인합니다.

다른 환경 테스트를 위해 잡다한 파일이 있으나, 처음에는 아무것도 없을 것입니다.

vscode와 본질적으로 동일한 환경이기 때문에, 자유롭게 활용해주시면 됩니다.

터미널 접근

괄목할 만한 부분으로는 상단바에서 Terminal에 접근할 수 있는데, debian 계열의 이미지를 사용한 듯 하여서

apt 명령어를 사용할 수 있습니다.

보다 복잡한 의존성의 경우 apt로 설치하여서 개발 환경을 자유롭게 설정해주시면 되겠습니다.

저는 g++을 설치하여 C++ 파일을 컴파일 하기 위해 사용하도록 하겠습니다.

apt update
apt install g++

설치 후에 code-runner 확장을 설치하고 간단히 실행시켜 봅니다.

bits/stdc++ 헤더를 포함하여 정상적으로 실행되는 모습을 확인할 수 있습니다.

포트 개방

또한 포트에 대해서도 편리한 기능을 제공하는데, 도커 배포시에 PROXY_DOMAIN으로 리버스프록시를 걸 것이라는 걸 명시해준 경우 특히 유용합니다.

어떤 프로세스가 어느 포트를 점유하고 있는지 쉽게 확인할 수 있습니다

또한, 서브도메인을 자동으로 열어서 해당 포트를 docker상에서 내보내지 않고도 접속할 수 있게 해줍니다.

이는 웹서버 개발시에 특히 유용한 기능입니다.

본래 저는 웹서버를 개발할 예정은 없습니다만, vite로 간단한 웹서버를 하나 띄워보겠습니다.

apt install npm
npm create vite@latest
cd [project-name]
npm install
npm run dev

npm run dev로 서버를 띄워주자 마자 가용 가능한 포트로 5173번이 추가되었습니다.

바로 옆의 Forwarded Address를 통해 접속해봅니다.

어떤 포트를 사용할지 모르니 *.domain 주소에 대한 와일드카드 ssl 발급이나, 서버 설정을 살짝 건드리는 등의 추가적인 설정이 필요할 수 있습니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
    allowedHosts: ["5173.code.koder.page"],
  }
})