개발을 위한 자체호스팅 IDE Code-Server 구축하기

 

안녕하세요. 달소입니다.

 

이전에 Code-Server라고 vscode를 웹환경에서 개발할 수 있게 도와주는 툴을 소개해드린적이 있는데요.

매번 docker로만 구축하다가 새로 서버를 또 구성하는김에 로컬에서 돌릴 수 있게 구성해볼 예정입니다.

 

Code-Server에 대해서 알려주세요

Code-Server

 

Code-Server는 브라우저에서 직접 코드를 편집하고 디버깅할 수 있는 오픈소스 IDE입니다. Visual Studio Code의 온라인 버전으로, VS Code와 동일한 편집기, 디버거, 터미널을 제공합니다.

 

주요 특징:

 

  • 브라우저 기반: 웹 브라우저에서 어디서든 코드를 편집할 수 있습니다.
  • VS Code 환경: VS Code IDE와 동일한 편집기, 디버거, 터미널을 제공합니다.
  • 코드 완성 및 리팩토링: 코드 완성, 리팩토링, 디버깅과 같은 VS Code의 기능을 활용할 수 있습니다.
  • 원격 개발: 원격 컴퓨터 또는 서버에서 코드를 편집할 수 있습니다.
  • 컨테이너 지원: Docker와 같은 컨테이너에서 코드를 실행할 수 있습니다.
  • 확장성: VS Code와 호환되는 확장 기능을 설치하여 기능을 확장할 수 있습니다.

 

사용 사례:

 

Code-Server는 다음과 같은 다양한 용도로 사용할 수 있습니다.

 

  • 원격 팀 협업: 다른 개발자와 코드베이스를 공유하고 함께 편집할 수 있습니다.
  • 초보자 친화적 개발 환경: 새로운 개발자에게 코드 편집과 디버깅의 기본 사항을 소개하는 데 사용할 수 있습니다.
  • 클라우드 기반 개발: 클라우드 컴퓨팅 플랫폼에서 코드를 편집하고 디버깅할 수 있습니다.
  • 컨테이너 기반 개발: 컨테이너화된 애플리케이션을 개발하고 디버깅할 수 있습니다.

 

설치 및 사용:

 

Code-Server는 다양한 플랫폼(Windows, macOS, Linux)에 설치할 수 있습니다. 자세한 설치 지침은 공식 웹사이트에서 확인할 수 있습니다.

 

설치가 완료되면 웹 브라우저에서 Code-Server에 액세스하고 로컬 파일이나 원격 리포지토리에서 코드를 열 수 있습니다.

 

장점:

 

  • 편리함: 브라우저에서 어디서든 코드를 편집할 수 있는 편리함을 제공합니다.
  • 효율성: VS Code의 강력한 편집 기능을 활용하여 개발 효율성을 향상시킵니다.
  • 협업: 원격 팀 협업을 용이하게 합니다.
  • 확장성: 확장 기능을 사용하여 기능을 확장할 수 있습니다.

 

단점:

 

  • 인터넷 연결 의존: 인터넷 연결이 필요하며 느린 연결은 성능에 영향을 미칠 수 있습니다.
  • 직접 컴퓨터 액세스 제한: 원격 컴퓨터에서 코드를 편집할 때 로컬 파일 시스템에 직접 액세스할 수 없습니다.
  • 보안 고려 사항: 원격 컴퓨터에 대한 액세스를 제어하는 것이 중요합니다.

 

 

image.png.jpg

 

설치하기

제 설치환경은 Ubuntu 24.04 Server OS 입니다.

 

쉘에서 아래 스크립트를 입력해주세요.

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

 

 

image.png.jpg

금방 설치가 완료됩니다.

 

image.png.jpg

 

아래명령어를 통해 재부팅 되었을때 서비스가 자동으로 올라오도록 설정할 수 있습니다.

sudo systemctl enable --now code-server@$USER

 

그리고 code-server 명령어로 실행시켜주세요.

아직은 로컬host에서만 접근이 되어 바인드 ip를 변경시켜줘야합니다.

 

image.png.jpg

 

변경 전  sudo systemctl stop code-server@$USER.service 명령어로 서비스를 잠시 중지시켜주세요.
 

vi ~/.config/code-server/config.yaml

 

 

여기서 bind-addr 을 0.0.0.0:8080 으로 바꿔주시고 password를 미리 복사해놓아주세요.

인증을 없애시려면 auth에서 none으로 해주시면됩니다.

image.png.jpg

  

그리고 다시 code-server를 실행시키면 아래처럼 0.0.0.0:8080으로 나옵니다.

 

 

image.png.jpg

 

이경오 foreground에서 실행되는데 백그라운드에서 실행시키려면 아래 명령어로 실행해주세요.

 

systemctl start code-server@$USER.service

 

이제 ip:8080으로 접속하시면 아래처럼 잘 나오시는걸 확인하실 수 있습니다.

 

 

image.png.jpg

 

기본적인 사용방법 자체는 vs code와 거의 유사합니다.

여러가지 플러그인을 지원하기도 하구요.

 

image.png.jpg

 

서버에서 개발하면 요렇게 할 수도 있고

해당 서버를 중개서버로 사용해서 다른 서버들을 연결할수도있습니다.

 

image.png.jpg