Code-server로 웹 기반 개발 환경 시작하기: 웹 브라우저에서 VScode 환경을 설정하고 실행하는 첫걸음

Ma_Seokjae·2025년 1월 3일
Code-server 시리즈dockervscode

Code-server와 Docker로 구축하는 멀티 플랫폼 개발 환경

목록 보기
1/2
post-thumbnail

"Code-server란 무엇인가?"

Code-server는 Visual Studio Code (VSCode)를 웹 브라우저에서 사용할 수 있게 해주는 서비스입니다. 즉, 로컬에 VSCode를 설치하지 않고도 인터넷만 있으면 어디서든, 어떤 기기에서든 VSCode 환경을 이용할 수 있는 강력한 도구입니다.

VSCode는 이미 개발자들 사이에서 가장 인기 있는 코드 편집기 중 하나로 자리 잡았습니다. 그러나 개발 환경을 구동하는 데 필요한 도구와 설정이 많고, 종종 개인 컴퓨터나 서버에 직접 설치해야 하다 보니, 여러 개발 환경을 관리하는 데 번거로움이 따를 수 있습니다. Code-server는 이러한 문제를 해결하며, 개발 환경을 클라우드나 원격 서버에 구축하여 언제 어디서나 접속할 수 있게 해줍니다.

Code-server를 사용하는 이유?

  • 언제 어디서나 접근 가능: Code-server는 클라우드 서버나 원격 머신에서 실행되므로, 인터넷만 있으면 어떤 디바이스에서든 개발 환경에 접근할 수 있습니다. 예를 들어, 집에서 작업하던 내용을 출근길의 노트북에서, 혹은 모바일 장치에서 이어서 작업할 수 있습니다.

  • 개발 환경의 일관성: 로컬 머신에 VSCode를 설치하고 설정하는 대신, Code-server를 통해 하나의 서버에서 설정을 공유하며 일관된 개발 환경을 유지할 수 있습니다. 팀 프로젝트에서 여러 사람이 동일한 개발 환경을 사용하게 되어 환경 차이로 인한 문제를 최소화할 수 있습니다.

  • 리소스 절약: 클라우드 기반으로 실행되기 때문에, 로컬 머신의 리소스를 절약할 수 있습니다. CPU나 메모리가 부족한 저사양의 로컬 컴퓨터에서도 서버의 성능을 활용하여 개발을 이어갈 수 있습니다.

  • 서버 기반 확장성: Code-server는 서버에서 실행되므로 필요한 리소스를 유동적으로 확장할 수 있습니다. 클라우드 서버에서 고성능 개발 환경을 구축하거나, 대규모 프로젝트에서 발생하는 리소스 수요를 손쉽게 처리할 수 있습니다.

  • 다양한 플랫폼에서 호환: Code-server는 여러 운영 체제에서 실행할 수 있습니다. 리눅스, macOS, Windows 등 다양한 플랫폼에서 손쉽게 설정하고 사용할 수 있기 때문에, 다양한 환경에서 개발 작업을 일관되게 이어갈 수 있습니다.

이처럼, Code-server는 클라우드 기반의 개발 환경을 구현하고, 언제 어디서든 작업을 이어갈 수 있도록 하며, 팀 협업과 리소스 관리 측면에서도 큰 장점을 제공합니다.

이번 실습에서는 Code-server를 설정하고, 이를 기반으로 Docker와 같은 강력한 도구들을 설치해, 더욱 효율적이고 확장성 있는 개발 환경을 만드는 방법을 배워보겠습니다.

1. Docker 이미지 다운로드

docker pull linuxserver/code-server:4.90.3

설명:

  • docker pull: Docker Hub에서 이미지를 다운로드하는 명령어입니다.
  • linuxserver/code-server:4.90.3: 다운로드하려는 Docker 이미지와 해당 태그입니다.
    • linuxserver/code-server는 브라우저에서 Visual Studio Code를 실행할 수 있는 Docker 이미지입니다.
    • 4.90.3은 사용하려는 이미지의 버전입니다.

이미지 다운로드 후, 로컬에서 사용할 수 있게 됩니다.

2. 작업 디렉토리 생성

mkdir mk_code-server

설명:

  • mkdir mk_code-server: mk_code-server라는 디렉토리를 생성합니다. 이 디렉토리는 나중에 docker run 명령어로 생성한 컨테이너의 파일을 관리하는 데 사용될 수 있습니다.

3. 디렉토리 이동

cd mk_code-server

설명:

  • cd mk_code-server: mk_code-server 디렉토리로 이동합니다. 이 디렉토리 내에서 이후 작업을 진행할 예정입니다.

4. src 디렉토리 생성

mkdir src

설명:

  • mkdir src: src라는 하위 디렉토리를 생성합니다. 이 디렉토리는 로컬 파일 시스템에서 코드 작업을 할 공간입니다.
    • 이후 이 디렉토리를 Docker 컨테이너의 /code 디렉토리와 연결하여, 로컬에서 작성한 코드를 컨테이너 내에서 사용하고 편집할 수 있습니다.

5. code-server 컨테이너 실행

docker run -d \
  --name ide \
  -p 8443:8443 \
  -e PASSWORD=password \
  -e DEFAULT_WORKSPACE=/code \
  -e PUID=0 \
  -e PGID=0 \
  -e TZ="Asia/Seoul" \
  -v ./src:/code \
  -v /var/run/docker.sock:/var/run/docker.sock \
  linuxserver/code-server:4.90.3

설명:
이 명령어는 Docker에서 code-server 컨테이너를 실행하는 명령어입니다. 각 부분을 분리하여 설명하겠습니다:

  • docker run -d: 컨테이너를 백그라운드에서 실행합니다. d는 "detached mode"를 의미하며, 실행 후 터미널로 돌아가게 합니다.

  • -name ide: 컨테이너에 ide라는 이름을 부여합니다. 이렇게 하면 나중에 컨테이너를 관리할 때 ide라는 이름으로 쉽게 참조할 수 있습니다.

  • p 8443:8443: 로컬 머신의 8443 포트를 컨테이너의 8443 포트에 연결합니다. code-server는 기본적으로 8443 포트를 사용하므로, 브라우저에서 localhost:8443으로 접근할 수 있게 됩니다.

  • e PASSWORD=password: 컨테이너 내에서 사용될 환경 변수 PASSWORD를 설정합니다. 이 비밀번호는 code-server 로그인 시 사용됩니다. password를 입력하면 로그인할 수 있습니다.

  • e DEFAULT_WORKSPACE=/code: 기본 작업 공간을 /code로 설정합니다. 이는 컨테이너 내에서 코드 파일을 저장하고 작업할 디렉토리입니다.

  • e PUID=0: 컨테이너 내 사용자 ID를 0으로 설정합니다. 이는 root 사용자로 설정하여, 시스템 파일에 대한 모든 권한을 부여하고, 로컬 파일 시스템과의 권한 충돌을 방지하기 위해 설정합니다.

  • e PGID=0: 컨테이너 내 그룹 ID를 0으로 설정합니다. 이는 root 그룹으로 설정하여, 컨테이너 내에서 발생할 수 있는 권한 문제를 피하고, 호스트 시스템과의 파일 권한 일치를 보장하기 위해 설정합니다.

  • e TZ="Asia/Seoul": 컨테이너 내 시간대(TZ)를 Asia/Seoul로 설정합니다. 이 설정을 통해 컨테이너 내에서 시간대가 올바르게 설정됩니다.

  • v ./src:/code: 로컬 디렉토리 ./src를 컨테이너 내의 /code 디렉토리에 마운트합니다. 이렇게 하면 로컬 src 디렉토리의 파일을 컨테이너 내에서 작업하고 편집할 수 있습니다.

  • v /var/run/docker.sock:/var/run/docker.sock: 로컬 시스템의 Docker 소켓을 컨테이너 내로 마운트합니다. 이를 통해 컨테이너 내에서 Docker 명령어를 실행할 수 있으며, 다른 컨테이너를 관리하거나 실행할 수 있게 됩니다.

  • linuxserver/code-server:4.90.3: 사용할 Docker 이미지의 이름과 태그입니다. 이 이미지는 code-server를 실행하는 데 사용됩니다.

알고가면 좋은 내용!

1. root 사용자로 설정하기

root@6e2432c5b5ef:/code#라는 프롬프트는 현재 컨테이너 내에서 root 사용자로 작업하고 있다는 것을 의미합니다. 이는 컨테이너 내 사용자와 그룹을 root로 설정했기 때문입니다.

  • PUID=0: 컨테이너 내 사용자 ID를 root로 설정 (0은 root의 ID).
  • PGID=0: 컨테이너 내 그룹 ID를 root로 설정 (0은 root 그룹).

2. 왜 PUID=0, PGID=0을 설정할까?

1) 파일 권한 충돌 방지

  • 컨테이너와 로컬 시스템의 파일을 공유할 때 권한 문제가 발생할 수 있습니다. 예를 들어, 로컬 시스템에서 src 디렉토리의 파일을 컨테이너에 마운트하면, 사용자 ID가 다르면 권한 문제가 생길 수 있습니다.
  • PUID=0과 PGID=0으로 설정하면 모든 파일을 root 권한으로 다루기 때문에 권한 문제 없이 파일을 자유롭게 수정할 수 있습니다.

2) 컨테이너 내에서 권한 부족 문제 방지

  • 일반 사용자로 설정하면, 컨테이너 내에서 필요한 권한이 부족해 작업이 막힐 수 있습니다. 예를 들어, docker.sock을 마운트하고 Docker 명령어를 실행하거나 시스템 파일을 수정할 때 권한이 부족할 수 있습니다.
  • root 사용자로 설정하면 모든 권한을 가진 관리자로 작업할 수 있어, 권한 부족으로 인한 오류 없이 작업을 진행할 수 있습니다.

3. root 사용자로 설정할 때의 장점

  • 파일 권한 충돌 해결: 컨테이너와 로컬 시스템 간의 파일 공유 시, 파일 권한 충돌을 방지할 수 있습니다.
  • 자유로운 작업: root 권한을 사용하면, 컨테이너 내에서 모든 작업을 자유롭게 수행할 수 있습니다. 예를 들어, 시스템 파일 수정이나 Docker 명령어 실행에 제약이 없습니다.
  • 편리한 설정: Docker에서는 기본적으로 root 사용자로 실행되는 경우가 많기 때문에, 권한을 관리자 권한으로 설정하는 것이 간편하고 일관성 있게 동작합니다.

4. 주의할 점: root 사용자 사용 시 보안 위험

  • 보안상의 위험: root 사용자로 실행하면 시스템의 모든 권한을 가지므로, 악성 코드나 잘못된 명령어 실행으로 시스템에 큰 영향을 미칠 수 있습니다.
  • 최소 권한 원칙: 보안 측면에서 최소 권한 원칙을 따르는 것이 좋습니다. 즉, 필요한 권한만 부여하는 것이 이상적이지만, 개발 환경에서는 편의성 때문에 root 권한을 사용할 수 있습니다.

5. 결론: 왜 root 사용자로 설정하는가?

PUID=0과 PGID=0을 설정하면, 컨테이너 내에서 root 권한을 사용하여 파일 권한 문제를 방지하고, 모든 작업을 자유롭게 수행할 수 있게 됩니다. 특히, 로컬 시스템과 컨테이너 간의 파일 공유나 Docker 명령어 실행에서 발생할 수 있는 권한 충돌을 방지할 수 있습니다.

보안을 고려해야 하는 경우, 최소 권한을 설정하는 것이 이상적이지만, 개발 환경에서는 편의성을 위해 root 권한을 사용할 수 있습니다.

6. 컨테이너 실행 확인

실행 후 출력된 컨테이너 ID (67e09658132af5680348b39b26fda992deab62b819c6ecc4b3f6704a3261c833)를 통해 컨테이너가 성공적으로 실행되었는지 확인할 수 있습니다. 이 ID는 나중에 컨테이너를 관리할 때 사용할 수 있습니다.

7. 브라우저에서 접속

  • 브라우저에서 http://localhost:8443에 접속합니다.

  • 로그인 화면이 나타나면, PASSWORD=password로 설정한 비밀번호를 입력하여 로그인합니다.

  • 성공적으로 로그인하면, /code 디렉토리가 기본 작업 공간으로 설정된 code-server의 웹 기반 IDE를 사용할 수 있습니다.

마지막으로 확인해야 할 것..!

docker.desktop에서 ( Containers → ide Container → Bind mounts )에서 로컬 시스템에서 만든 디렉토리와 컨테이너 내 디렉토리가 올바르게 연결되었는지 확인해야 합니다.

1) /Users/sjcaptain/Desktop/cloudwave/Docker/0103/problems/mk_code-server/src (호스트) → /code (컨테이너)

  • Source (Host): /Users/sjcaptain/Desktop/cloudwave/Docker/0103/problems/mk_code-server/src
    • 호스트의 경로입니다. 이 경로는 로컬 컴퓨터의 디렉토리로, code-server 컨테이너와 공유할 파일들이 저장되는 곳입니다.
  • Destination (Container): /code
    • 컨테이너 내에서 이 디렉토리는 DEFAULT_WORKSPACE=/code 환경 변수를 설정한 대로, code-server가 파일 작업을 할 디렉토리입니다. 이 디렉토리는 로컬의 src 디렉토리와 연결되어, 컨테이너 내에서 이 디렉토리의 파일을 편집하고 작업할 수 있습니다.

이 의미는:

  • 호스트의 src 디렉토리에서 작업한 파일이 컨테이너 내 /code로 실시간 반영됩니다. 즉, 로컬에서 파일을 추가하거나 수정하면, 컨테이너 내 /code에서도 그 내용이 바로 반영됩니다. 마찬가지로, 컨테이너 내에서 /code 디렉토리에서 작업한 내용은 로컬 시스템의 src 디렉토리에도 바로 반영됩니다.

2) /var/run/docker.sock (호스트) → /var/run/docker.sock (컨테이너)

  • Source (Host): /var/run/docker.sock
    • 호스트에서 Docker 소켓이 위치한 경로입니다. Docker 소켓은 Docker 데몬과 통신하는 파일로, Docker 명령을 실행하기 위해 필요한 중요한 파일입니다.
  • Destination (Container): /var/run/docker.sock
    • 이 경로는 컨테이너 내의 경로로, Docker 소켓을 컨테이너와 연결하여, 컨테이너 내에서도 Docker 명령어를 실행할 수 있게 해줍니다. 이 설정을 통해 code-server 내에서 Docker 명령어를 사용하거나 다른 컨테이너를 관리하는 작업이 가능해집니다.

이 의미는:

  • docker.sock을 컨테이너에 마운트함으로써, 컨테이너 내에서도 Docker를 사용할 수 있게 됩니다. 예를 들어, code-server 내에서 Docker 명령어를 실행하여 다른 컨테이너를 만들거나 관리할 수 있습니다. 이는 code-server가 다른 Docker 컨테이너를 관리하거나 Docker 명령을 실행할 수 있게 해주는 매우 중요한 설정입니다.

결론

위 명령어들을 통해 linuxserver/code-server를 Docker 컨테이너로 실행하고, 로컬 시스템의 src 디렉토리를 컨테이너 내 /code와 연결하여 코드 편집 환경을 구축할 수 있습니다. 이 실습을 통해 브라우저에서 언제든지 Visual Studio Code를 실행하고, Docker 환경에서 작업할 수 있는 환경을 쉽게 만들 수 있습니다.

profile
Ma_Seokjae
Why not change the code?
다음 포스트

Code-server로 웹 기반 개발 환경 시작하기: Docker와 Code-server의 통합으로 확장된 클라우드 IDE 구축

0개의 댓글