본문 바로가기
서버/리눅스 서버

Visual Studio Code Server 설치하기 (codeserver)

by 도정진 ㅋㅋ잠자 2019. 11. 23.

안녕하세요? 이번에는 VSCode 환경을 Web에서 사용할 수 있는 CodeServer 를 설치하고자 합니다.


https://code.visualstudio.com/


본래 데스크톱에서 사용하는 프로그램은 상기와 같습니다.


그런데 이 부분을 웹으로 가져오는 code-server 라는 것이 있어서 설치해 보려고 합니다.


공식 배포 URL 은 아래와 같습니다.


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





1. 바이너리 받기 및 폴더 배치


깃허브의 릴리즈 부분에서 아래의 파일을 받습니다. 아직까지는 arm 용으로는 제공이 되지 않고 있습니다. arm 용으로 사용하려면 qemu로 실행을 해야할 것 같습니다. 마지막 부분에서 다뤄보도록 하겠습니다.


root@openmediavault:/opt# wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

--2019-11-23 16:31:55--  https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

Resolving github.com (github.com)... 52.78.231.108

Connecting to github.com (github.com)|52.78.231.108|:443... connected.

HTTP request sent, awaiting response... 302 Found

Location: https://github-production-release-asset-2e65be.s3.amazonaws.com/172953845/f7fc6b80-0704-11ea-9353-2802c91b69e5?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20191123%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20191123T073157Z&X-Amz-Expires=300&X-Amz-Signature=daad9ced13d6cc9570f46eafafd0fe428962e931044430b570adfda0a549edf0&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3Dcode-server2.1692-vsc1.39.2-linux-x86_64.tar.gz&response-content-type=application%2Foctet-stream [following]

--2019-11-23 16:31:57--  https://github-production-release-asset-2e65be.s3.amazonaws.com/172953845/f7fc6b80-0704-11ea-9353-2802c91b69e5?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20191123%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20191123T073157Z&X-Amz-Expires=300&X-Amz-Signature=daad9ced13d6cc9570f46eafafd0fe428962e931044430b570adfda0a549edf0&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3Dcode-server2.1692-vsc1.39.2-linux-x86_64.tar.gz&response-content-type=application%2Foctet-stream

Resolving github-production-release-asset-2e65be.s3.amazonaws.com (github-production-release-asset-2e65be.s3.amazonaws.com)... 52.216.179.3

Connecting to github-production-release-asset-2e65be.s3.amazonaws.com (github-production-release-asset-2e65be.s3.amazonaws.com)|52.216.179.3|:443... connected.

HTTP request sent, awaiting response... 200 OK

Length: 47303734 (45M) [application/octet-stream]

Saving to: ‘code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz’


           code-server2.1692-vsc1.39.2-li   4%[==>                                                                                  ]   1.92M   921KB/s   


폴더를 풀고 이름을 적절하게 바꿔줍니다.


root@openmediavault:/opt# tar xf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz 

root@openmediavault:/opt# ls

code-server2.1692-vsc1.39.2-linux-x86_64  code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz  containerd  google  scripts tvhProxy


root@openmediavault:/opt# mv code-server2.1692-vsc1.39.2-linux-x86_64 code-server

root@openmediavault:/opt# ls

code-server  code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz  containerd  google  scripts  tvhProxy

root@openmediavault:/opt#


그리고 확장설치 폴더와 기본 User 설정이 저장될 폴더를 생성합니다.


root@openmediavault:/opt/code-server# mkdir data extensions

root@openmediavault:/opt/code-server# ls

LICENSE.txt  README.md ThirdPartyNotices.txt  code-server  data  extensions





2. systemd 스크립트 작성하기


기본적으로 code-server 를 실행할 때, 아래의 옵션들을 사용합니다.


ENV : PASSWORD

웹 패스워드 설정


ENV : PATH

환경 변수 설정


OPT : --auth=password

인증 방식 설정


OPT : --extensions-dir

플러그인 저장 디렉터리


OPT : --user-data-dir

워크스페이스 설정 주엥 User 설정이 저장될 디렉터리


OPT : --locale

로케일 설정


OPT : --cert

https 로 서버 오픈, 인증서 파일 미설정시, 셀프 사인으로 서버 생성


OPT : --host

호스트 설정, 0.0.0.0 으로 설정 할 경우 모든 IP 에 바인딩 함


OPT : --port

포트 설정


상기 설정을 반영하여 스크립트를 작성해 보겠습니다.


root@openmediavault:/opt/code-server# vim /etc/systemd/system/code-server.service


[Unit]

Description=Visual Studio Code Server

 

[Service]

Environment="PASSWORD=1234"

Environment="PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/opt/code-server"

WorkingDirectory=/opt/code-server

User=root

Group=root

Type=simple

ExecStart=/opt/code-server/code-server --auth password --extensions-dir /opt/code-server/extensions --user-data-dir /opt/code-server/data --locale ko-KR --cert --host 0.0.0.0 --port 10000

Restart=always

 

[Install]

WantedBy=multi-user.target


root@openmediavault:/opt/code-server# systemctl daemon-reload
root@openmediavault:/opt/code-server# systemctl start code-server
root@openmediavault:/opt/code-server# systemctl status code-server
● code-server.service - Visual Studio Code Server
   Loaded: loaded (/etc/systemd/system/code-server.service; disabled; vendor preset: enabled)
   Active: active (running) since Sat 2019-11-23 16:41:31 KST; 4s ago
 Main PID: 29730 (code-server)
    Tasks: 23 (limit: 4915)
   Memory: 80.8M
   CGroup: /system.slice/code-server.service
           ├─29730 /opt/code-server/code-server --auth password --extensions-dir /opt/code-server/extensions --user-data-di
           └─29741 /opt/code-server/code-server --auth password --extensions-dir /opt/code-server/extensions --user-data-di

Nov 23 16:41:31 openmediavault systemd[1]: Started Visual Studio Code Server.
Nov 23 16:41:32 openmediavault code-server[29730]: info  Server listening on https://0.0.0.0:12345
Nov 23 16:41:32 openmediavault code-server[29730]: info    - Using custom password for authentication
Nov 23 16:41:32 openmediavault code-server[29730]: info    - Using generated certificate and key for HTTPS


접속이 잘 되는지 확인합니다.


https 로 생성했음으로 https://ipaddr:port 입니다.




잘 작동합니다.





3. 한글 설정하기


음.. 아쉽게도 마켓 플레이스에서 설치가 되지 않습니다. 


vscode 최신버전이 1.40 인데 code-server 에 패키징 된 버전은 1.39.2 입니다. 이 부분은 마켓플레이스에서 구버전 설치를 지원하면 상관없지만, 그렇지 않은 경우가 많아서 힘듭니다.




그럼 일단 마켓플레이스에서 Language Pack 소스를 클론해서 패키지를 빌드해서 만들어 보겠습니다.


https://github.com/Microsoft/vscode-loc


root@openmediavault:~# apt install npm

Reading package lists... Done

Building dependency tree       

Reading state information... Done

npm is already the newest version (5.8.0+ds6-4).

0 upgraded, 0 newly installed, 0 to remove and 74 not upgraded.


root@openmediavault:~# npm install -g vsce
npm WARN npm npm does not support Node.js v10.15.2
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
/usr/local/bin/vsce -> /usr/local/lib/node_modules/vsce/out/vsce
+ vsce@1.69.0
added 66 packages from 78 contributors in 7.08s

root@openmediavault:~# git clone https://github.com/Microsoft/vscode-loc
Cloning into 'vscode-loc'...
remote: Enumerating objects: 956, done.
remote: Counting objects: 100% (956/956), done.
remote: Compressing objects: 100% (592/592), done.
remote: Total 15632 (delta 620), reused 671 (delta 364), pack-reused 14676
Receiving objects: 100% (15632/15632), 21.00 MiB | 7.10 MiB/s, done.
Resolving deltas: 100% (13037/13037), done.

root@openmediavault:~# ls
chrome-remote-desktop_current_amd64.deb  guac-install.sh  vscode-loc

root@openmediavault:~# cd vscode-loc/
root@openmediavault:~/vscode-loc# ls
LICENSE.md  README.md  i18n  media
root@openmediavault:~/vscode-loc# git branch
* master

root@openmediavault:~/vscode-loc# git branch --all
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
  remotes/origin/release/1.20
  remotes/origin/release/1.21
  remotes/origin/release/1.22
  remotes/origin/release/1.23
  remotes/origin/release/1.25
  remotes/origin/release/1.26
  remotes/origin/release/1.28
  remotes/origin/release/1.29
  remotes/origin/release/1.31
  remotes/origin/release/1.32
  remotes/origin/release/1.33
  remotes/origin/release/1.34
  remotes/origin/release/1.35
  remotes/origin/release/1.36
  remotes/origin/release/1.37
  remotes/origin/release/1.38
  remotes/origin/release/1.39
  remotes/origin/release/1.40

root@openmediavault:~/vscode-loc# git checkout remotes/origin/release/1.39
Note: checking out 'remotes/origin/release/1.39'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b <new-branch-name>

HEAD is now at 2445681 Merge pull request #114 from cmendible/master

root@openmediavault:~/vscode-loc# git branch
* (HEAD detached at origin/release/1.39)
  master
root@openmediavault:~/vscode-loc# ls
LICENSE.md  README.md  i18n  media

root@openmediavault:~/vscode-loc# cd i18n/
root@openmediavault:~/vscode-loc/i18n# ls
vscode-language-pack-bg     vscode-language-pack-fr  vscode-language-pack-ko vscode-language-pack-ru
vscode-language-pack-cs     vscode-language-pack-hu  vscode-language-pack-nl vscode-language-pack-tr
vscode-language-pack-de     vscode-language-pack-id  vscode-language-pack-pl vscode-language-pack-uk
vscode-language-pack-en-GB  vscode-language-pack-it  vscode-language-pack-ps vscode-language-pack-zh-hans
vscode-language-pack-es     vscode-language-pack-ja  vscode-language-pack-pt-BR  vscode-language-pack-zh-hant

root@openmediavault:~/vscode-loc/i18n# cd vscode-language-pack-ko/
root@openmediavault:~/vscode-loc/i18n/vscode-language-pack-ko# ls
CHANGELOG.md  README.md  languagepack.png  package.json  translations  vsc-extension-quickstart.md

root@openmediavault:~/vscode-loc/i18n/vscode-language-pack-ko# vsce package
 DONE  Packaged: /root/vscode-loc/i18n/vscode-language-pack-ko/vscode-language-pack-ko-1.39.3.vsix (83 files, 195.51KB)


그리고 빌드된 vsix 파일을 아래와 같이 설치합니다.






빌드가 귀찮으신 분들은 아래의 파일을 애용하시길 바랍니다.


http://download.djjproject.com/vscode/extensions/vscode-language-pack-ko-1.39.3.vsix


이렇게 한글화가 완료 되었습니다.





4. 터미널 설정하기


기본적으로 터미널이 sh 로 되어 있습니다.


이를 bash 로 바꾸고 실행해보겠습니다.


CTRL + SHIFT + P 를 누르면 커맨드 빨레트가 열립니다. 그때 shell 이라고 입력하면 기본 쉘 선택이 가능합니다.





동일하게 기능이 지원됩니다.







5. 기타 설정은 ... 다음에..


언어 확장이나 이런 부분은 다음 글에서 뵙도록 하겠습니다.


감사합니다.




댓글0