vscode server cli 구축하기

일전에 vscode를 구축하는 포스트를 발행한 적이 있다. 이 방식은 vscode 서버부터 NginX까지 구축을 진행하여 완전한 섯버 형태로 구축하는 내용을 다룬다.

[Information Technology/Programming] - Code Server - 구축편

이 방식보다 더욱 편리하게 Code Server를 구축하는 방식이 vscode CLI server를 구축하는 것이다. 아마도, vscode 개발 팀에서 이야기하는 vscode의 발전 방향에서 지난 구축 방식은 Remote - SSH, Tunnels에 해당하고, 이번 포스팅은 Remote - SSH, Tunnels + Dev Containers 방식에 해당하는 것으로 추측한다.

vscode's feature

Prepare

• 우분투 리눅스 시스템(WSL도 가능)

Installation

Download

vscode server 설치는 매우 단순하다. MS에서 제공하는 code cli를 다운로드한다.

ubuntu@ip-172-31-13-104:~$ curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   133  100   133    0     0    115      0  0:00:01  0:00:01 --:--:--   115
100 6852k  100 6852k    0     0  4594k      0  0:00:01  0:00:01 --:--:-- 25.0M

다운로드가 되었다면 압축을 해제하는데 해제 위치를 /usr/local/bin에 구성한다.

ubuntu@ip-172-31-13-104:~$ sudo tar xvzf vscode_cli.tar.gz  -C /usr/local/bin/
code

Execution & Configuration

이제 로컬에 vscode-server 명령으로 추가적인 구성 없이 vscode server를 실행할 수 있다. 첫 실행은 라이선스 동의와 인증에 관한 설정 그리고 tunnel 키를 설정한다. 라이선스 동의는 자동으로 yes로 설정되어 있어 엔터를 눌러 동의한다.

ubuntu@ip-172-31-13-104:~$ code tunnel

VS Code Server

*
* By using the software, you agree to the
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*

✔ Do you accept the terms in the License Agreement · yes

다음 장치 인증이다. 장치 인증은 github를 이용한다. github의 device 인증은 사용자 기기를 인증하는 것으로 인증한 기기가 github에 로그인된 상태로 사용자 기기 인증을 진행하는 방식으로 인증하는 구성이다. 다음과 같이 인증 코드를 출력되면 https://github.com/login/device에 방문한다.

To grant access to the server, please log into https://github.com/login/device and use code 1AE0-305C

방문한 사이트에 인증 코드를 입력하고 continue를 누른다.

github.com/login/device에 인증 코드 입력

다음 이미지처럼 github에 로그인된 사용자의 정보가 출력되며 이 연동을 허용하겠는지, vscode가 github의 어떤 데이터에 접근할 것인지를 보여주며, 정보가 맞는지 확인했으면 Authorize Visual-Studio-Code를 선택한다.

정보 확인 및 인증

인증이 완료되면 다음과 같은 화면으로 설정이 완료된다.

인증 완료

이제 vscode server가 설치되는 시스템에 설치하는 시스템이 어떤 이름으로 불리길 원하는지 작성하는 prompt가 실행된다. 이 구성은 우리가 직접 구축한 웹 서버에 접근해서 vscode를 이용하는 것이 아닌 MS 클라우드 시스템에 접근했을 때 터널링 구성이 되면서 우리가 구축한 vscode에 접근할 때 우리 시스템으로 접근하는 터널링을 식별하는 키로 사용된다.

✔ What would you like to call this machine? · hakawati-code

터널링 구성이 완료되며 vscode server가 운영 중인 채 도메인을 보여준다. 해당 사이트에 방문하면 vscode를 사용할 수 있다.

✔ What would you like to call this machine? · hakawati-code
[2023-07-02 02:04:19] info Creating tunnel with the name: hakawati-code

Open this link in your browser https://vscode.dev/tunnel/hakawati-code

URL 방문시 보여지는 첫 화면

허용 버튼을 클릭하면 github 인증이 되어야만 해당 도메인에 접근했을 시 내 code server에 접근할 수 있도록 자동으로 설정이 구성되며, 설정이 완료되었다면 언제 어디서든 동일한 코딩 환경을 이용할 수 있다.

 

마지막으로 code tunnel 명령으로 서비스가 시작되는데, 이는 원격 터미널로 연결했거나 로컬 쉘이 종료되는 순간 서비스도 함께 종료된다. 따라서 systemd를 이용해 백그라운드에서 서비스가 실행되도록 구성한다. 먼저 systemd 서비스 파일을 생성한다.

ubuntu@ip-172-31-13-104:~$ sudo vim /lib/systemd/system/code.service

다음과 같이 정보를 기입하는데 가장 중요한 것은 code server 설정 정보가 사용자 홈 디렉터리에 위치하기에 User와 Group을 구성하는 시스템의 사용자 이름으로 구성한다.

[Unit]
Description=VSCode CLI Server

[Service]
Type=simple
User=ubuntu
Group=ubuntu
ExecStart=/usr/local/bin/code tunnel

[Install]
WantedBy=multi-user.target

새로운 systemctl 서비스가 등록되었기에 deamon을 리로드하고, 서비스를 실행한다.

ubuntu@ip-172-31-13-104:~$ sudo systemctl daemon-reload
ubuntu@ip-172-31-13-104:~$ sudo systemctl start code.service

그리고 시스템이 재부팅 되더라도 서비스가 실행되도록 설정한다.

ubuntu@ip-172-31-13-104:~$ sudo systemctl enable code.service
Created symlink /etc/systemd/system/multi-user.target.wants/code.service → /lib/systemd/system/code.service.

마지막으로 서비스가 잘 실행 중인지 status 명령으로 살펴본다.

ubuntu@ip-172-31-13-104:~$ sudo systemctl status code.service
● code.service - VSCode CLI Server
     Loaded: loaded (/lib/systemd/system/code.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2023-07-02 05:23:49 UTC; 7min ago
   Main PID: 32493 (code)
      Tasks: 37 (limit: 1141)
     Memory: 115.7M
        CPU: 16.409s
     CGroup: /system.slice/code.service
             ├─32493 /usr/local/bin/code tunnel
             ├─32543 sh /home/ubuntu/.vscode/cli/servers/Stable-695af097c7bd098fbf017ce3ac85e09bbc5dda06/server/bin/>
             ├─32547 /home/ubuntu/.vscode/cli/servers/Stable-695af097c7bd098fbf017ce3ac85e09bbc5dda06/server/node /h>
             ├─32558 /home/ubuntu/.vscode/cli/servers/Stable-695af097c7bd098fbf017ce3ac85e09bbc5dda06/server/node /h>
             └─32588 /home/ubuntu/.vscode/cli/servers/Stable-695af097c7bd098fbf017ce3ac85e09bbc5dda06/server/node /h>

Jul 02 05:23:52 ip-172-31-13-104 code[32493]: [2023-07-02 05:23:52] error [tunnels::connections::relay_tunnel_host] >
Jul 02 05:23:52 ip-172-31-13-104 code[32493]: [2023-07-02 05:23:52] info [tunnels::connections::relay_tunnel_host] O>
Jul 02 05:23:52 ip-172-31-13-104 code[32493]: [2023-07-02 05:23:52] info [tunnels::connections::relay_tunnel_host] O>
Jul 02 05:23:53 ip-172-31-13-104 code[32493]: [2023-07-02 05:23:53] info [tunnels::connections::relay_tunnel_host] O>
Jul 02 05:23:53 ip-172-31-13-104 code[32493]: [2023-07-02 05:23:53] info [tunnels::connections::relay_tunnel_host] O>
Jul 02 05:23:53 ip-172-31-13-104 code[32493]: [2023-07-02 05:23:53] info [tunnels::connections::relay_tunnel_host] O>
Jul 02 05:24:04 ip-172-31-13-104 code[32493]: [2023-07-02 05:24:04] info [tunnels::connections::relay_tunnel_host] O>
Jul 02 05:24:05 ip-172-31-13-104 code[32493]: [2023-07-02 05:24:05] info [rpc.0] Checking /home/ubuntu/.vscode/cli/s>
Jul 02 05:24:05 ip-172-31-13-104 code[32493]: [2023-07-02 05:24:05] info [rpc.0] Starting server...
Jul 02 05:24:05 ip-172-31-13-104 code[32493]: [2023-07-02 05:24:05] info [rpc.0] Server started

Review

vscode CLI는 tunneling 방식으로 구성되기에 가상머신에 우분투를 구축하고 사설 아이피에서 동일한 방식으로 구성해도 https://vscode.dev/tunnel/장치명으로 접근이 가능하다. 또한 장치명이 고유한 값이기에 도메인을 할당해서 사용하는 방향으로 활용할 수 있다. 이제 언제 어디서 어떤 컴퓨터에서든 동일한 환경에서 코드를 개발할 수 있다.