VSCode OnlineをVPSで運用して月額$5-20におさえてみる

前回、ブラウザでVS CodeがうごくVisual Studio Onlineを使ってみた という記事を書いたのですが、なんだかんだ月1万円はやや高いなーということで、Self-Hostedで安く運用する方法を試してみました。

※本記事はVisual Studio OnlineのPublic Previewをもとに書いています。
※結論としては、用途を絞ればいける＆お試しにはよいが、常用だとまだ不安定です。

そもそもVS OnlineのSelf-Hostedって？

VS Onlineのサイト にはこのようにあります。

自分のセルフホステッド環境を接続し、Visual Studio Online のメリットを利用しましょう。既存のインフラストラクチャも活用できます。しかも、すべて無料です。

当初、CoderのOSS版 のように、自前のサーバにブラウザ用フロントエンド環境をデプロイすると思っていたのですがそうではありませんでした。VS Onlineに似た仕組みでネイティブ版VS CodeをSSHでサーバに接続して動作させる方式は以前からありました。図で表すとこのような感じです。

VS OnlineのSelf Hostedも似た仕組みとなっており、似せて書くとこのような図になります。

デフォルトでは、AzureのBackendを作成・利用することができ、このインスタンスは認証も含めて自動化しています。Self-Hostedの場合VS CodeをGUIでインストールし、VS Online Extensionを入れることでVS Onlineに登録できるのです。（名称がややこしい）そのため、「無料」というのはこの図のWeb UIおよびProxy（と便宜的に書きましたが各環境との接続を管理する部分）の利用が無料ということになります。

Vultr の$5インスタンスで激安運用してみる

ということは、お試しだけにあまりお金をかけたくない場合、格安VPSを利用してSelf-Hostedを利用するとチープに運用することができそうです。ここではVultrを利用してみます。日本のVPSもひとつ試してみましたが、自分の技術力ではVNCコンソールの相性を乗りこなせなかったためこちらにしました。

SSD VPS Servers, Cloud Servers and Cloud Hosting by Vultr - Vultr.com

よくある $50もらえるプロモコードリンク着けておきます

メアドとパスワードを登録したら、お支払い情報を入力してインスタンスの登録をします。今回は、「Ubuntu 18.04 lts」「メモリ1GBの$5モデル」「シンガポールリージョン」を選択します。（後述しますが1GBは相当厳しかったので最終的に4GBにしました。）

なぜシンガポールリージョンかというと、VS CodeのWebUIがAsia - Southeastにあるからです。バックエンドのインスタンスとWeb UIは近い方がいいのではと考えました。

GUI環境をインストールする

マシンが立ち上がったら、管理画面にあるrootアカウントでとりあえずSSH接続します。まずはGUI環境を入れてVS Codeのインストールを行います。前提としてすでにAzure / VS Onlineにサインアップし、プランの登録まで完了させておいてください。

（文中の#から始まる行はコメントです。すべてrootでの初期作業想定なので先にユーザ作る場合はsudoで実行してください）

apt update
 # 1GB はきびしいのでswap file を作る　
 # 参考：https://www.vultr.com/docs/setup-swap-file-on-linux
dd if=/dev/zero of=/swapfile count=2048 bs=1M
ls / | grep swapfile
chmod 600 /swapfile
mkswap /swapfile
swapon /swapfile

 # swap file の永続利用
nano /etc/fstab

fstab の最終行に以下を追記、Ctrl+xで終了しYで保存

/swapfile   none    swap    sw    0   0

# swap確認
free -m 
# デスクトップ環境最低限インストール。10分ほど待つ。
apt install -y lubuntu-core  xdg-utils

# snapコマンドでブラウザとVSCodeをインストール
snap install chromium
snap install --classic code

# ユーザーを追加
$ adduser username
$ gpasswd -a username sudo

# 再起動
$ sudo reboot

再起動し、Vultrのコンソールを開くとこのような画面になっているので、先ほど追加したユーザでログインします。

左下のメニューをひらくとVS Codeが既にインストールされています。

VS Onlineに登録する

VS Codeを立ち上げて左側の拡張機能アイコンを押します。Online で検索するとVisual Studio Onlineがでてきます。インストールが完了すると、まずAzureのログインを促されるのでおとなしく従ってください。

スペックが厳しいので、Chromiumが立ち上がるまで20秒くらいかかります。それ以上待ってもうまくChromiumが起動しない場合、別の起動方式を提案してくるのでこちらでいけるはずです。

ログイン完了すると左下にAzureアカウントが表示されます。

ではさっそくVSOnlineに登録してみましょう。F1を押して Register で検索すると出てくるRegister Local Environmentを選択します。フォルダを選んでいない場合はフォルダを選ぶように催促されます。環境の名称を入力したら、もう一度ログインが行われます。

鬼門のログイン

ここで何度も失敗したのですが、ログインがずっと完了しない不具合がありました。xdg-openという機構を使ってvscode://のリンクでコールバックするのですが、それがどうも動かないようなのです。

そこで、ログイン完了画面まですすんだらF12ボタンでデベロッパーツールを開き、Networkタブを開いた状態で再度ログイン完了画面にある「Continue」ボタンを押します。リダイレクトリンクが赤くエラーで表示されるので、そのリンクをコピーしてterminalでxdg-openに渡してあげます。

シングルクォートでリンクを囲うことを忘れてしまうとうまくサインインできません。タイムアウトしてしまってももう一度やり直すことでうまくできるようになりました。

使ってみる

https://online.visualstudio.com/environments にアクセスすると先ほど登録した環境が「Self-Hosted Environment」と表示されています（たくさん作りすぎた図）

ここまでくればマシンさえ立ち上げておけばVS Codeの画面自体は閉じてしまっても構いません（たぶん）。左上のハンバーガーメニューからView -> terminalをひらくとVultrのコンソールにアクセスできていることが分かります。

あとはお好きに開発環境をととのえましょう！VS Codeブラウザ版の画面から、nvmをいれたりともうローカル環境のように快適に使うことができます。

npm installで死んだ

喜んだのもつかの間、1GBのインスタンスでは、npm install実行しただけでインスタンスがハングし、VSCodeもろともお亡くなりになりました。のちに4GBインスタンスを作成して実行しましたが、4GBないと快適には使えないかもですね。それでも720時間つけっぱなしで$20なので半額以下といえます。

図：npm installが終わった直後のhtopの様子（4GBインスタンス）

おまけ

(安定して動けば)スマホブラウザでも（開くだけなら）開ける。HDMI出力できるタブレットとキーボードがあればもう開発こまらないな！！！iPad ProかChrome OSのタブレットほしい！

いける、、いけるぞ、、！！！😇😇 pic.twitter.com/okgIr3chVA

— Yusuke Kawabata🐗Markdown本 (@ku_suke) November 9, 2019