cdr/code-serverとOCIのAlways FreeのMicroインスタンスでVS Codeを動かしてみる

# 概要

このエントリでは、Oracle Cloud Infrastructure(以下OCI)で提供されているAlways Free扱いのMicroインスタンスで、Visual Studio Code(以下VSCode)を[cdr/code-server](https://github.com/cdr/code-server)で動かし、WEBブラウザ越しにエディタを使ってみることについて扱います。

下図：動作イメージ　別エントリ[Enterprise電卓を作る Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ehw_calculator)で使っているコードをブラウザから編集

![cdr-vsc-calc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65002/4cadee30-6964-c472-8fac-0ce471b5fafe.png)


## 対象読者

- VS Codeをブラウザ越しに使ってみることに興味がある方
- ネタ的なエントリが嫌いではない方

# cdr/code-serverとは

[cdr/code-server](https://github.com/cdr/code-server)のサイトの説明を引用すると、cdr/code-serverは

> code-server is VS Code running on a remote server, accessible through the browser.

ということで、このエントリで実現したいことに使えます。

[https://coder.com/](https://coder.com/)のメンバーが開発しており、MITライセンスでGitHubに公開されています。

# インストールの前提条件の確認

## インストール方法

cdr/code-serverは、いくつかのインストール方法があり、dockerコンテナで動かす方法、自身でバイナリを展開する方法、自身でソースからビルドする方法に加えて、手元マシンからsshでリモートのインスタンス上にバイナリを展開して起動してくれる[cdr/sshcode](https://github.com/cdr/sshcode)も用意されています。

このエントリでは、自身でバイナリを展開する方法を使います。

## OSとインスタンス

- このエントリで使用するインスタンスのタイプ(shape)は、1CPU(OCPU)・1GBメモリのVM.Standard.E2.1.Microです。[OCIのshapeに関する説明サイト](https://docs.oracle.com/cd/E97706_01/Content/Compute/References/computeshapes.htm)で、各種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)

```console
$ uname -m
x86_64
```

(2)

```terminal
$ 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)

```terminal
$ 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)

```terminal
[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
```

大丈夫そうですね。ではインストールしてみます。

# インストール

[リリースの一覧](https://github.com/cdr/code-server/releases)を見ると、このエントリ執筆時点での最新版は「2.1698-vsc1.41.1」でした。

OCI上のCentOS7で、以下を実行します。

```terminal
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/

```

起動してみます。

```console
$ ./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」を押します。

![cdr-vscode-login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65002/c54739d3-7a25-66a5-f9c9-3442deb706d1.png)

数秒後、VSCodeがブラウザのなかに現れました。


![cdr-vscode-initial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65002/2b140203-a855-0791-09ef-0e217fe3643d.png)

# 少しだけ使ってみる

別エントリの[(ネタ) x ^ 3 + y ^ 3 + z ^ 3 = 42 の答えを見つけたチームがいるらしいのでJSのBigIntで確かめてみる](https://qiita.com/hrkt/items/5e8f5bcd10f74cd5047d)で使ったコード[ (https://github.com/hrkt/answer42)]を使ってみます。

VSCのターミナルでgit cloneして、メニューからフォルダを開いてみると、下図のようになります。URLの中にディレクトリ構造が表現されている感じですね。

![cdr-vscode-with-jscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65002/fac5b9e3-a198-bcb6-6ea9-5ba0eaf7c53f.png)

# おわりに

このエントリでは、cdr/code-serverとOCIのAlways FreeのMicroインスタンスでVS Codeを動かしてみることを扱いました。

使い込みはこの後ですが、ひょっとしてこれはiPadからもイケてしまうのでは、というあたりについても調べてみたいと思います。