npm으로 code-server 설치

웹 환경에서 VS Code를 사용할 수 있는 code-server를 설치하는 스크립트를 정리하였다.

 

 

환경:

장치: 라즈베리파이(Raspberry Pi) / Model 3B

OS: Raspberry Pi OS (64 bit) Lite / Debian 계열

 

 

 

[1] 개발환경 설치

## 루트 권한이 필요하므로 앞에 sudo를 붙이거나, 루트로 전환 후에 입력한다.

apt update
apt install build-essential pkg-config python3 gcc g++ make libx11-dev libxkbfile-dev libsecret-1-dev python-is-python3

 

 

 

[2] Node.JS 설치

## !!모든 명령어에 sudo가 붙어있으므로 주의!!

## code-server는 Node.js v14 이상을 권장
## nodesource repo를 사용하여 Node.js v14를 설치하도록 한다.
## https://github.com/nodesource/distributions#deb

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs


## 이후 npm 업그레이드.

sudo npm install -g npm

 

 

 

[3] Dependency 설치

## global로 설치하기 때문에 루트 권한이 필요하다. (sudo 붙이거나, 루트에서 작업)

npm install -g yauzl \
               yazl \
               minimist \
               semver-umd \
               applicationinsights \
               @coder/node-browser \
               spdlog \
               xterm \
               xterm-headless \
               native-watchdog \
               vscode-proxy-agent \
               vscode-ripgrep \
               vscode-regexpp

 

 

 

[4] code-server 설치

## 마찬가지로 global로 설치하기 때문에 루트 권한이 필요하다.

npm install -g code-server --unsafe-perm

 

 

 

[5] 첫 실행.

이어서 6을 진행하기 위해 메시지만 확인하고, 컨트롤 + C를 눌러 종료하도록 한다.

code-server

## 실행이 완료되면 아래와 같은 메시지가 출력된다.

[2022-02-12T00:20:52.756Z] info  code-server 4.0.1 735c6da829535969ff7193c79379299e4a1cb9bc
[2022-02-12T00:20:52.768Z] info  Using user-data-dir ~/.local/share/code-server
[2022-02-12T00:20:52.919Z] info  Using config file ~/.config/code-server/config.yaml
[2022-02-12T00:20:52.920Z] info  HTTP server listening on http://127.0.0.1:8080/
[2022-02-12T00:20:52.921Z] info    - Authentication is enabled
[2022-02-12T00:20:52.922Z] info      - Using password from ~/.config/code-server/config.yaml
[2022-02-12T00:20:52.922Z] info    - Not serving HTTPS

 

 

 

[6] config 수정

## [5]에서 출력된 메시지 중 "Using config file" 뒤에 이어서 config 파일의 경로가 나온다.
## vi를 사용하던, nano를 사용하던 본인이 편한 것을 사용하면 된다.

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


## 기본 내용은 다음과 같다.

bind-addr: 127.0.0.1:8080
auth: password
password: ~~~~~~~~~~~~~~~~~~
cert: false

## 다른 PC에서 접근해야한다면 bind-addr를 수정한다.
bind-addr: 0.0.0.0:8080


## password가 복잡하므로 적절히 변경한다.
password: myvscode


## 다른 옵션은 공식 문서를 참고하여 바꾸도록 한다.
## 최종 config

bind-addr: 0.0.0.0:8080
auth: password
password: myvscode
cert: false

 

 

 

[7] 다시 code-server를 실행

code-server

## 이후 출력 메시지

[2022-02-12T00:32:44.749Z] info  code-server 4.0.1 735c6da829535969ff7193c79379299e4a1cb9bc
[2022-02-12T00:32:44.761Z] info  Using user-data-dir ~/.local/share/code-server
[2022-02-12T00:32:44.907Z] info  Using config file ~/.config/code-server/config.yaml
[2022-02-12T00:32:44.908Z] info  HTTP server listening on http://0.0.0.0:8080/
[2022-02-12T00:32:44.910Z] info    - Authentication is enabled
[2022-02-12T00:32:44.910Z] info      - Using password from ~/.config/code-server/config.yaml
[2022-02-12T00:32:44.911Z] info    - Not serving HTTPS

 

 

 

[8] 브라우저 주소 입력 란에 http://IP주소:8080 을 입력하여 접속 및 로그인

- config에서 bind-addr에 명시된 포트 번호(기본 8080)를 바꾼 경우 맞춰서 접속해준다.

- config에서 password에 명시된 비밀번호를 입력한다.

 

 

 

[9] 첫 화면 등장!

 

 

 

 

[10] 코딩을 해보고 결과를 본다.

새 파일 만들기

 

 

터미널 열기

 

 

 

 

끝!

이제 여러가지 추가 설정을 한다면 태블릿으로 야외에서 코딩이 가능해진다!

 

 

 

참고자료

code-server github 저장소

https://github.com/coder/code-server

GitHub - coder/code-server: VS Code in the browser

 

 

code-server 공식 설치 문서

https://coder.com/docs/code-server/latest/install#yarn-npm

Install - code-server v4.0.2 docs