Help us understand the problem. What is going on with this article?

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でサーバに接続して動作させる方式は以前からありました。図で表すとこのような感じです。

image.png

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

vcsode挿絵2019-11-10 01.24.28.png

デフォルトでは、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にしました。)

Deploy Servers - Vultr.com - Google Chrome 2019-11-09 23.04.24.png

なぜシンガポールリージョンかというと、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のコンソールを開くとこのような画面になっているので、先ほど追加したユーザでログインします。

noVNC - SUBID 31051866 - Google Chrome 2019-11-09 00.37.41.png

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

noVNC - SUBID 31051866 - Google Chrome 2019-11-09 00.41.21.png

VS Onlineに登録する

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

noVNC - SUBID 31051866 - Google Chrome 2019-11-09 00.44.36.png

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

noVNC - SUBID 31051866 - Google Chrome 2019-11-09 00.53.22.png

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

noVNC - SUBID 31051866 - Google Chrome 2019-11-09 00.58.08.png

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

noVNC - SUBID 31051866 - Google Chrome 2019-11-09 00.59.24.png

noVNC - SUBID 31051866 - Google Chrome 2019-11-09 01.01.00.png

鬼門のログイン

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

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

noVNC - SUBID 31073054 - Google Chrome 2019-11-09 23.42.45.png

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

使ってみる

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

image.png

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

quickstart-nodejs [VS Online] - Visual Studio Code - vsonline+295e8383-cf3c-4e11-b76f-35da886a9207 - Google Chrome 2019-11-10 01.15.38.png

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

npm installで死んだ

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

noVNC - SUBID 31068725 - Google Chrome 2019-11-10 13.05.49.png
図:npm installが終わった直後のhtopの様子(4GBインスタンス)

おまけ

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

ku_suke
新規事業の立ち上げがおおいです。
https://blog.ku-suke.jp
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした