概要
このエントリでは、Oracle Cloud Infrastructure(以下OCI)で提供されているAlways Free扱いのMicroインスタンスで、Visual Studio Code(以下VSCode)をcdr/code-serverで動かし、WEBブラウザ越しにエディタを使ってみることについて扱います。
下図：動作イメージ 別エントリEnterprise電卓を作る Advent Calendar 2019で使っているコードをブラウザから編集
対象読者
- VS Codeをブラウザ越しに使ってみることに興味がある方
- ネタ的なエントリが嫌いではない方
cdr/code-serverとは
cdr/code-serverのサイトの説明を引用すると、cdr/code-serverは
code-server is VS Code running on a remote server, accessible through the browser.
ということで、このエントリで実現したいことに使えます。
https://coder.com/のメンバーが開発しており、MITライセンスでGitHubに公開されています。
インストールの前提条件の確認
インストール方法
cdr/code-serverは、いくつかのインストール方法があり、dockerコンテナで動かす方法、自身でバイナリを展開する方法、自身でソースからビルドする方法に加えて、手元マシンからsshでリモートのインスタンス上にバイナリを展開して起動してくれるcdr/sshcodeも用意されています。
このエントリでは、自身でバイナリを展開する方法を使います。
OSとインスタンス
- このエントリで使用するインスタンスのタイプ(shape)は、1CPU(OCPU)・1GBメモリのVM.Standard.E2.1.Microです。OCIのshapeに関する説明サイトで、各種shapeのスペックが確認できます。
- OSは、OCIでのインスタンスの起動オプションで選べるOSイメージより「CentOS7」を選択しています。
cdr/code-serverのサイトの条件を見ながら前提を確認します。
| 条件 | 状態 |
|---|---|
| 64-bit host. | OK(1) |
| At least 1GB of RAM. | OK(2) |
| 2 cores or more are recommended (1 core works but not optimally). | OK(OCPUは、Xeonの物理コア1CPU相当を指す単位であり、中のOSからは2コア見えます) |
| Secure connection over HTTPS or localhost (required for service workers). | OK(3) |
| For Linux: GLIBC 2.17 or later and GLIBCXX 3.4.15 or later. | OK(4) |
| Docker (for Docker versions of code-server). | OK(5) |
(1)
$ uname -m
x86_64
(2)
$ free
total used free shared buff/cache available
Mem: 1011448 280704 278524 15956 452220 694868
Swap: 8388604 38144 8350460
(3)
このエントリでは、このような構成で接続します。sshでポート転送します。
[LocalPC] --- ssh --- [OCI]
(例) ssh -i keys/id_rsa_oci -L8080:127.0.0.1:8080 opc@xxx.xxx.xxx.xxx```
(4)
$ ldd --version
ldd (GNU libc) 2.17
Copyright (C) 2012 Free Software Foundation, Inc.
This is free software; see the source for copying conditions. There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Written by Roland McGrath and Ulrich Drepper.
(5)
[opc@instance-20200117-1627 ~]$ objdump -p /usr/lib64/libstdc++.so.6 | grep GLIBCXX_3.4.15
17 0x00 0x0297f865 GLIBCXX_3.4.15
GLIBCXX_3.4.15
大丈夫そうですね。ではインストールしてみます。
インストール
リリースの一覧を見ると、このエントリ執筆時点での最新版は「2.1698-vsc1.41.1」でした。
OCI上のCentOS7で、以下を実行します。
mkdir vscode
cd vscode
curl -L -O https://github.com/cdr/code-server/releases/download/2.1698/code-server2.1698-vsc1.41.1-linux-x86_64.tar.gz
tar zxvf code-server2.1698-vsc1.41.1-linux-x86_64.tar.gz
cd code-server2.1698-vsc1.41.1-linux-x86_64/
起動してみます。
$ ./code-server
info Server listening on http://localhost:8080
info - Password is （注：ここにパスワード用のランダムな文字列が生成されます）
info - To use your own password, set the PASSWORD environment variable
info - To disable use `--auth none`
info - Not serving HTTPS
ブラウザで「http://localhost:8080」にアクセスすると、ログインフォームが現れます。上記で表示されているパスワードを入力して「Enter IDE」を押します。
数秒後、VSCodeがブラウザのなかに現れました。
少しだけ使ってみる
別エントリの(ネタ) x ^ 3 + y ^ 3 + z ^ 3 = 42 の答えを見つけたチームがいるらしいのでJSのBigIntで確かめてみるで使ったコード[ (https://github.com/hrkt/answer42)]を使ってみます。
VSCのターミナルでgit cloneして、メニューからフォルダを開いてみると、下図のようになります。URLの中にディレクトリ構造が表現されている感じですね。
おわりに
このエントリでは、cdr/code-serverとOCIのAlways FreeのMicroインスタンスでVS Codeを動かしてみることを扱いました。
使い込みはこの後ですが、ひょっとしてこれはiPadからもイケてしまうのでは、というあたりについても調べてみたいと思います。