[Docker] 웹 브라우저 기반 Private VSCode 개발 환경 구성 (Docker Compose)

by


웹 브라우저 기반 Private VSCode 개발 환경을 Docker 기반에 구성한 내용을 정리 합니다.

coder.com의 code-server(vscode) 를 이용하여 자체 개발 환경을 구성하는 테스트 하였습니다.

Code-Server 란?

코드 서버는 Microsoft가 개발한 오픈 소스 프로젝트로, 웹 브라우저를 통해 VS Code IDE를 실행할 수 있도록 하는 도구입니다. 코드 서버는 원격 개발 환경을 구축하거나, 다양한 플랫폼에서 일관된 개발 경험을 제공하는 데 매우 유용합니다.

주요 기능

  1. 원격 개발 환경: 코드 서버를 사용하면 원격 서버 또는 클라우드 인스턴스에서 개발을 할 수 있습니다. 개발 환경을 별도로 설정할 필요가 없어 편리하게 작업할 수 있습니다.
  2. 웹 기반 개발: 코드 서버를 사용하면 데스크톱 IDE 없이도 브라우저에서 코드 편집 및 디버깅이 가능합니다. 이것은 휴대성과 효율성을 높여줍니다.
  3. 다중 플랫폼 지원: 코드 서버는 Windows, macOS, Linux 및 ARM 기반 장치에서 작동하며, 거의 모든 브라우저에서 지원됩니다.
  4. 확장성: 코드 서버는 VS Code의 확장 기능을 모두 지원하므로 수많은 확장 프로그램을 사용하여 작업 흐름을 개선할 수 있습니다.

Code-Server 구성

Docker Run 명령어로 구성

docker run -it --name code-server -p 127.0.0.1:8080:8080 \
  -v "$HOME/.local:/home/coder/.local" \
  -v "$HOME/.config:/home/coder/.config" \
  -v "$PWD:/home/coder/project" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest

Docker-compose.yml

version: "3.9"
services:
  code-server:
    container_name: code-server
    image: codercom/code-server:latest
    ports:
      - "8080:8080"
    environment:
      DOCKER_USER: $USER
    volumes:
      - ./data/.local:/home/coder/.local
      - ./data/.config:/home/coder/.config
      - ./data/project:/home/coder/project
docker-compose up -d

code-server 접속

접속 URL

http://localhost:8080

접속 Password 확인

volume 설정을 하였기 때문에 docker-compose.yml 파일 경로에 data 디렉토리가 생성됩니다.

Password는 아래 config 파일에서 확인이 가능합니다.

# ./data/.config/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: <Password>
cert: false

code-server 접속

Password 는 위 파일을 수정하면 변경할 수 있겠습니다.

code-server 구성 시, Password 설정

docker-compose.yml 파일에 Password를 지정할 수 있습니다.

version: "3.9"
services:
  code-server:
    container_name: code-server
    image: codercom/code-server:latest
    ports:
      - "8080:8080"
    environment:
      - DOCKER_USER=$USER # 기존에서 변경
      - PASSWORD=test # 액세스 비밀번호 설정
      - TZ=Asia/Seoul # 타임존 설정 (옵션)
    volumes:
      - ./data/.local:/home/coder/.local
      - ./data/.config:/home/coder/.config
      - ./data/project:/home/coder/project

초기 설정한 Password로 정상 접속이 됩니다.

기타 옵션

version: "3.9"
services:
  code-server:
    container_name: code-server
    image: codercom/code-server:latest
    ports:
      - "8080:8080"
    environment:
      - DOCKER_USER=$USER
      - PASSWORD=test # 액세스 비밀번호 설정
      - TZ=Asia/Seoul # 타임존 설정 (옵션)
    volumes:
      - ./data/.local:/home/coder/.local
      - ./data/.config:/home/coder/.config
      - ./data/project:/home/coder/project
    command:
    #   - --auth none # 비밀번호 인증 비활성화 (사용 시 비밀번호를 설정해야 함)
      - --disable-telemetry # 텔레메트리 비활성화 (옵션)

추가적으로 command 옵션을 통해서 기타 옵션을 설정할 수 있습니다.

자세한 사항은 공식문서를 참고하면 되겠습니다.

마치며

코드 서버는 다양한 설정을 지원하며, 확장을 통해 개발 환경을 사용자 지정할 수 있습니다. 사용자 환경에 맞게 설정하고 필요한 확장을 설치하여 작업을 효율적으로 수행할 수 있습니다.

코드 서버는 개발자에게 새로운 개발 경험을 제공하며, 원격 개발 및 웹 기반 개발을 가능하게 합니다. 이 도구를 사용하면 다양한 플랫폼에서 일관된 개발 환경을 즐길 수 있으며, 협업 및 원격 작업을 지원합니다. 코드 서버를 시도하여 효율적인 개발을 경험해보세요!

참고 문서



Leave a Comment