VSCode-server 클라우드 개발환경 구축 가이드 #Unraid

서론

브라우저에서 프로그래밍을 할 수 있도록 웹용 vscode를 만드는 가이드이다.

브라우저안이라 만만해보이지만 실제로 IDE 역할을 한다.

코드 편집, 컴파일, 디버깅, 실행 다 가능하다.

웹에서 웹개발도 된다. 안드로이드에서 LoD를 통해 안드로이드 스튜디오를 돌리던 기분이 난다.

 

필자는 OS가 Unraid라 설치 방법이 일반 리눅스와 다르다.

도커 컨테이너로 실행하니 다른 리눅스 환경에서도 충분히 설치 가능하다.

내부 설정과 큰 틀은 비슷하므로 개인 환경에 수정해서 설치하길 바람.

 

본론

설치

컨테이너 설치

필자의 다른 게시글에서 다룬 내용이니 간단하게 넘어간다.

타 OS사용자는 도커허브 참고

1. apps에서 code server 검색

 

2. linuxserver의 배포판으로 설치한다.

 

3. 아래와 같은 화면이 보일텐데 이름과 네트워크 타입등 필요한 부분을 변경한다

 

4. PASSWORD와 SUDO_PASSWORD를 설정하고 프록시 도메인을 추가한다.

PASSWORD는 VS code 페이지 접속시 사용할 비밀번호이다.

SUDO_PASSWORD는 도커내 터미널에서 패키지 설치등 관리자 권한 사용시 사용할 비밀번호이다.

 

개발 도구 설치

이제부터가 진짜 설정이다.

도커 컨테이너를 실행하기 전에 개발에 필요한 개발킷을 설정할 수 있다.

이는 linuxserver에서 배포한 이미지에서 지원하는 기능인데 이미지별로 설정할수 있는 모드가 있다.

전체 모드 목록

바쁜 독자를 위해 알려드리자면 code-server에서 사용가능한 모드는 25개가 있다.

 

모드를 추가하는 방법은 아래와 같다.

DOCKER_MODS라는 환경변수를 만들어 linuxserver/mods:모드1| linuxserver/mods:모드2 와 같이 추가하면 된다.

필자는 파이썬, 자바(11만 지원), flutter, nodejs, 깃, 도커를 설치했다.

자바를 설치하면서 JAVA_HOME 환경변수도 같이 추가해 주었다.

설치 도구가 많다보니 컨테이너 생성시 시간이 좀 오래걸린다.
필자는 필요한 개발도구를 선택해 추가하면되겠다.

linuxserver/mods:code-server-python3|linuxserver/mods:code-server-java11|linuxserver/mods:code-server-flutter|linuxserver/mods:code-server-nodejs|linuxserver/mods:universal-git|linuxserver/mods:universal-docker-in-docker

Node.JS버전은 NODEJS_MOD_VERSION 환경변수로 지정할 수 있다.

GPU를 사용하고 싶을경우 extra parameters에 --device=/dev/dri:/dev/dri를 추가하거나

아래같이 디바이스값을 추가해도 된다.

 

세팅

C/C++

C를사용하고 싶다면 C runner와 codeLLDB 확장 프로그램을 사용하면 된다.

컴파일러는 컨테이너 이미지에 내장된 C컴파일러를 사용하므로 설치가 필요없다.

 

C/C++ Runner는 C코드를 쉽게 디버깅, 컴파일, 실행할 수 있도록 UI를 제공하는 역할을 한다.

마켓플레이스에서 c runner로 검색하면 최상단에 위치한다.

설치후에는 아래처럼 친절하게 버튼이 생긴다.

 

이때 그냥 디버깅 버튼을 누르게 된다면 아마 아래와 같은 에러가 뜰것이다.

이게 무슨소리인가 컴파일도 실행도 되는데 디버깅이 안되다니. 이름부터가 c++디버거인 디버거가 지원되지 않는단다.

걱정하지말고 별도의 디버거를 설치해준다.

마켓플레이스에 lldb로 검색하면 멋있는 용이 있는 확장기능이 있다.

위 확장을 설치후 경고에서 나온 launch.json파일을 열어 왼쪽과 같은 파일을 오른쪽과 같이 수정해주자.

type을 cppdbg에서 lldb로 바꿔주었다

저장 후 다시 실행하면..!

왈라~

아래와 같이 중단점도 잘 먹힌다.

 

이제 긴코드, 짧은코드, 좋은코드, 어려운코드 마음껏 당신의 vscode 웹에서 작업할 수 있다.

 

Java

자바? 물론 가능하다.

자바 공화국에서 자바가 안된다면 글을 쓰기 시작하지도 않았을것이다.

자바를 사용하는 방법은 간단하다.

독자가 정상적으로 DOCKER_MODS 환경변수에 자바 11 모드값을 넣었다면 컨테이너가 실행되며 자동으로 설치되었을것이다.

컨테이너가 정상적으로 켜지자 마자 터미널을 열어 java -version을 날려보면

11버전이 자리를 잡아놨다.

 

Python

AI? 웹서버? 파이썬 물론 지원한다.

파이썬 또한 JAVA와 마찬가지로 DOCKER_MODS에 모드값을 넣어 자동 설치가 완료되어있다.

보다 쉽게 사용하고싶다면 python, ipynb 같은 확장기능을 설치하여 사용하면 되겠다.

 

Live Server

웹페이지를 개발한다면 빠질수 없는 확장기능이다.

브라우저에서 웹페이지를 개발한다니. 너무 IT변태스러운 구조다.

마켓플레이스에서 live server로 검색해 확장기능을 추가한다.

확장을 설치하고 테스트용 HTML파일을 라이브서버로 돌려보자.

친절히 서버가 시작됨과 사용하는 포트를 알림으로 알려준다.

브라우저에서 열기로 페이지가 잘 뜨는지 확인해보자

이런 나의 뒤틀린 욕망을 어떻게 알았는지 모르쇠로 일관하고있다.

하지만 방법이 있다.

특정 포트를 사용하는 서비스에 접근하기 위해선 URL을 약간 바꿔주면 된다.

코드서버도메인/proxy/포트번호

위 형식으로 바꿔서 접속하면 정상적으로 페이지를 확인할 수있다.

PC에서 작업하는것만큼 편하지 않을순 있지만 아무튼 가능하긴 하다...!

 

Docker in Docker

이런! 여기까지 발을 들인 당신, 진짜 변태들의 영역에 온것을 환영한다.

도커안의 도커라니 이보다 더할순 없다.

 

컨테이너 안에서 도커를 사용하는 방법은 2가지가 있다.

1. 현재 컨테이너가 돌아가고 있는 도커 엔진에 붙어 도커를 함께 사용하기

2. 도커 내에서 도커를 설치하여 컨테이너가 동작하는 도커엔진과 격리된 별도의 도커를 사용하기

전자의 경우 호스트PC에서 사용중인 다른 컨테이너에도 접근할 수 있다는 장점이 있다.

 

본 포스트에서는 호스트의 도커 환경과 관계없이 개발, 학습용 도커를 별도로 사용하기 위해 후자를 택했다.

설치법은 간단하다. DOCKER_MODS에 추가하면 된다.

1번 방법과 2번 방법이 각기 다른 모드값을 갖고 있으므로 주의한다.

모드값을 입력하고 정상적으로 컨테이너가 부팅이 되었다면 터미널에서 바로 docker명령을 사용할 수 있다.

 

보다 쉽게 컨테이너를 관리하고 싶다면 vscode에서 제공되는 docker확장 기능을 설치하면 좋다.

 

명령어를 통해 확인해보면 기본으로 존재하는 이미지와 컨테이너를 볼 수 있다.

뒤틀린 욕망을 마음껀 분출할 수 있는 도커 놀이터, 이렇게 완성이다.

 

 

결론

생각보다 많은것이 가능한 vscode server였다.

물론 일부 확장 기능을 사용할 수 없다거나, 작업 방식이 PC보다 복잡하는등 단점도 존재한다.

그럼에도 작업 환경의 제한없이 작업이 가능하단점은 상당히 매력적이다.

서버PC의 사양만 좋다면 아톰 들어간 손바닥 만한 미니PC에서도 못할게 없겠다.

굵직한 언어들은 문제없이 지원하고 리눅스에서 돌리는 vscode라고 보면 되니 활용성도 무궁무진하다.

책상과 가방은 더 가볍게, 서버실은 더 무겁게. 홈서버에서 돌리는 vscode로 가능하다.