[ Visual Studio Code ]
최근 SW 개발用 에디터는 "Visual Studio Code"가 거의 시장을 평정한 것 같다.
이름이 저렇다고 해서
예전의 Visual Studio를 생각하면 안된다.
주위의 일부 고인물(^^)들이
VSCode가 Visual Studio의 최신판일줄 알고선
C나 C++ 개발이 아니라는 이유로
VSCode를 멀리하는데... ^^
VSCode는 그냥 똑똑한 에디터이다.
Extension(Plugin)이 엄청나게 많이 제공되는
Coding할 때 아주 많이 유용한...
음... 사실 에디터로 부르기 보다는
IDE (Integrated Development Environment)라고
부르는 것이 더 맞는 것 같다.
한국말로는 통합개발환경 ?!
[ Remote IDE / Cloud IDE ]
일반적으로 이러한 IDE는 Local PC에 설치를 하고
GitHub와 같은 형상관리 도구와 연계를 해서 소스코드를 내려받고
Local에 구축한 빌드환경에서 빌드를 해보는 것이
일반적인 개발 환경일 것이다.
그런데, 아래와 같은 상황에서는 환경 구축에 애로사항이 좀 있을 수 있다.
노트북이 없고 데스크탑밖에 없는데,
여기저기 이동(출장)을 다니며 코딩을 해야하는 경우
내가 지금 개발하고 있는 것을
다른 개발자와 같이 보면서 리뷰를 하고 싶은 경우
내 데스크탑은 Windows인데
빌드 환경으로 Linux 환경이 필요한 경우
전혀 다른 빌드 환경의 개발을
동시에 2개 이상을 해야하는 경우
빌드 환경 구축이 까다로운데
여러 명이 같이 개발을 하는 경우
심지어 초짜 개발자가 계속 투입되는 경우
이럴 때 사용할 수 있는 여러가지 방법 中
최근 내가 관심을 갖고 있는 것은 Remote IDE/Cloud IDE 이다.
빌드 환경을 포함한 VSCode를
웹 인터페이스로 제공을 해주는 것이다.
대표적으로는 얼마전에 살펴봤던
Goorm IDE
[ Visual Studio Codespaces ]
MS에서는 이러한 요구를 해결하기 위해서
"Visual Studio Online"
이라는 서비스를 제공했었고,
지금은
"Visual Studio Codespaces"
라는 이름으로 변경해서 서비스하고 있다.
방금 한 번 해봤는데... Azure DevOps랑 연계되어 있어서
그냥 편하게 막 쓰기엔 좀 귀찮았다.
하지만... 멋지다!
[ Own Remote IDE ]
뭐 지금까지 기본적인 배경 사항들에 대해서 알아봤다.
하지만, 지금 내가 하고 싶은 것은
내가 지금 사용하고 있는 Local 환경 (PC 또는 Server)에서
나만의 VSCode를 웹으로 띄우고 싶은 것이다.
나만 이런 생각을 하는 것이 아니기에...
훌륭한 분들이 먼저 그 길을 걸었다!!!
Coder라는 회사에서
관련 솔루션을 Opensource로 오픈했다.
( https://github.com/cdr/code-server )
회사에서 오픈한 프로젝트라서 그런지
운영도 활발히 잘되고
문서화도 깔끔하다.
"code-server"를 이용하면
지금 내 데스크탑을 VSCode Server로 사용할 수가 있는 것이다.
[ code-server 설치하기 ]
쓸만한 성능을 보이기 위해서는
1 GB RAM
2 cores
정도의 스펙이 필요하다고 한다.
참고!!!
Local PC 또는 서버에 바로 설치할 수도 있고,
AWS 또는 GCP에 설치할 수도 있다고 한다.
참고!!!
설치하는 방법은 다양하게 제공된다.
1. curl 을 통해 install.sh를 실행하는 방법
2. 배포판에 따라 설치파일을 이용해 설치하는 방법
3. Docker를 이용하는 방법
[ 1. install.sh ]
"curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run"
설치가 잘 될지 한 번 가볍게 테스트 해보고
❯ curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
Ubuntu 18.04.5 LTS
Installing v3.4.1 deb package from GitHub releases.
+ mkdir -p ~/.cache/code-server
+ curl -#fL -o ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete -C - https://github.com/cdr/code-server/releases/download/v3.4.1/code-server_3.4.1_amd64.deb
+ mv ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete ~/.cache/code-server/code-server_3.4.1_amd64.deb
+ sudo dpkg -i ~/.cache/code-server/code-server_3.4.1_amd64.deb
To have systemd start code-server now and restart on boot:
systemctl --user enable --now code-server
Or, if you don't want/need a background service you can run:
code-server
"curl -fsSL https://code-server.dev/install.sh | sh"
실제로 설치를 진행하자
❯ curl -fsSL https://code-server.dev/install.sh | sh
Ubuntu 18.04.5 LTS
Installing v3.4.1 deb package from GitHub releases.
+ mkdir -p ~/.cache/code-server
+ curl -#fL -o ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete -C - https://github.com/cdr/code-server/releases/download/v3.4.1/code-server_3.4.1_amd64.deb
######################################################################## 100.0%##O=# #
+ mv ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete ~/.cache/code-server/code-server_3.4.1_amd64.deb
+ sudo dpkg -i ~/.cache/code-server/code-server_3.4.1_amd64.deb
[sudo] xxx의 암호:
Selecting previously unselected package code-server.
(데이터베이스 읽는중 ...현재 175469개의 파일과 디렉터리가 설치되어 있습니다.)
Preparing to unpack .../code-server_3.4.1_amd64.deb ...
Unpacking code-server (3.4.1) ...
code-server (3.4.1) 설정하는 중입니다 ...
To have systemd start code-server now and restart on boot:
systemctl --user enable --now code-server
Or, if you don't want/need a background service you can run:
code-server
부팅할 때 자동으로 실행되도록하기 위해서는 다음의 명령어를 실행하면 된다.
"systemctl --user enable --now code-server"
❯ systemctl --user enable --now code-server
Created symlink /home/xxx/.config/systemd/user/default.target.wants/code-server.service → /usr/lib/systemd/user/code-server.service.
이제 웹브라우저로 확인해보자.
"http://127.0.0.1:8080"
패스워드는 위 화면에서 알려주는 것 처럼
아래 경로에 가면 알 수 있다.
"~/.config/code-server/config.yaml"
❯ cat ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: 0f8015b4dbd5db86079f739a
cert: false
저기있는 패스워드를 입력하면 된다.
나온다 !!!
우와~~~~~ ^^
[ 2. 배포판에 따른 설치 ]
install.sh 파일 내용을 보면
다른 배포판에 대해서도 알아볼 수 있을 것이다.
여기에선 Ubuntu에서의 내용만~^^
일단 파일을 내려 받자
> wget https://github.com/cdr/code-server/releases/download/v3.4.1/code-server_3.4.1_amd64.deb
이제는 설치를 하면 된다.
> sudo dpkg -i code-server_3.4.1_amd64.deb
[sudo] chani의 암호:
Selecting previously unselected package code-server.
(데이터베이스 읽는중 ...현재 175469개의 파일과 디렉터리가 설치되어 있습니다.)
Preparing to unpack code-server_3.4.1_amd64.deb ...
Unpacking code-server (3.4.1) ...
code-server (3.4.1) 설정하는 중입니다 ...
부팅할 때 자동 실행을 위해서...
❯ systemctl --user enable --now code-server
Created symlink /home/xxx/.config/systemd/user/default.target.wants/code-server.service → /usr/lib/systemd/user/code-server.service.
나머지는 위의 내용과 같다.
[ 3. Docker ]
docker가 먼저 설치되어 있어야 한다.
> sudo apt -y install docker.io
사용자 계정 권한으로 docker를 실행할 수 있도록 하자.
> sudo usermod -aG docker $USER
권한이 적용될 수 있도록
로그아웃/로그인 또는 재부팅을 하도록 하자.
그리고... 이제 docker를 실행하자 !!!
> docker run -it -p 127.0.0.1:8080:8080 \
-v "$PWD:/home/coder/project" \
-u "$(id -u):$(id -g)" \
codercom/code-server:latest
info Wrote default config file to ~/.config/code-server/config.yaml
info Using config file ~/.config/code-server/config.yaml
info Using user-data-dir ~/.local/share/code-server
info code-server 3.4.1 48f7c2724827e526eeaa6c2c151c520f48a61259
info HTTP server listening on http://0.0.0.0:8080
info - Using password from ~/.config/code-server/config.yaml
info - To disable use `--auth none`
info - Not serving HTTPS
웹으로 접속하면 된다.
"http://127.0.0.1:8080"
어?! 그런데, 패스워드는 어떻게 확인하지 ?!
docker container 안으로 들어가서 확인해보자.
docker 실행을 하고 있는 터미널 말고
터미널 하나 더 띄워서 실행하면 된다.
❯ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
235751eb3ebb codercom/code-server:latest "dumb-init fixuid -q…" 4 minutes ago Up 4 minutes 127.0.0.1:8080->8080/tcp dreamy_haibt
❯ docker exec -it 23575 /bin/bash
coder@235751eb3ebb:~$ ls -al
total 32
drwxr-xr-x 1 coder coder 4096 Aug 12 14:55 .
drwxr-xr-x 1 root root 4096 Jun 4 10:59 ..
-rw-r--r-- 1 coder coder 220 Jun 4 10:59 .bash_logout
-rw-r--r-- 1 coder coder 3526 Jun 4 10:59 .bashrc
drwxr-xr-x 3 coder coder 4096 Aug 12 14:55 .config
-rw-r--r-- 1 coder coder 807 Jun 4 10:59 .profile
drwxr-xr-x 2 coder coder 4096 Aug 12 14:55 project
coder@235751eb3ebb:~$ cat ./.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: 665b7519d76a99e5bbcccac2
cert: false
우앙~ 힘들다!
일단 여기서 끊고 가겠다.
여력이 되면 추가로 꾸미는 것들 계속 해보겠다.
'Development Tools > IDE' 카테고리의 다른 글
| Web-IDE, Cloud-IDE (0) | 2021.11.03 |
|---|---|
| Remote VSCode Docker Image 만들기 (2) | 2021.07.28 |
| Visual Studio Code - ZSH & Font (VSCode ZSH Font) (0) | 2020.08.15 |
| Visual Studio Code for Python (VSCode Python 개발환경 만들기) (3) | 2020.08.14 |