vscode の web build を netlify にデプロイする + ファイルシステムを永続化する
年末年始の時間を使って実験していたこと。
tl;dr
vscode をカスタマイズして静的サイトとしてデプロイしたい。やった。公式にない永続化層も作った。
できた。ここで試せる。 https://mizchi-vscode-playground.netlify.com/
やりたかったこと
フロントエンドにまつわるものはフロントエンドで作業を完結したい。なので vscode がブラウザで動いてほしい。
vscode をカスタマイズしたものを各自が自由にデプロイできると、様々な可能性がある。インストールの手間を省いたプログラミング教育用のツールだったり、専用の開発環境だったり、その他諸々。
問題
この用途で期待していた vscode online が使いづらかった。MS のアカウントを要求されたり、Docker コンテナの Enviroment を作ったりする必要があり、面倒だった。そもそもリモートにサーバーがある以上、応答性に難があり、使いづらい。
monaco-editor や vscode web(vscode をクローンして yarn web でビルドできる版)を読む限り、サーバーがなくともほぼフロントエンドで完結することがわかった。
やったこと
vscode を fork して web-standalon ディレクトリを切ってそこで作業している。本体のコードに手を入れてないので、本体への追従は容易なはず。
https://github.com/mizchi/vscode/pull/1 で永続化層を実装した。
というわけで、ここで試せる。 https://mizchi-vscode-playground.netlify.com/
注意: 初回起動に 3 分ぐらいかかる。二回目以降は ServiceWorker でキャッシュしてるので、10 秒ぐらい。
vscode の本家に PR を出したいが、vscode の一般的なユースケースが外れるので、出すだけ出して、こういう路線はありなのか、お伺いを立てたい。
自分で試したい人は https://github.com/mizchi/vscode/tree/master/web-standalone を参考にガチャガチャやれば動くと思う。動かなかったら PR 送ってください。
実装できたもの
課題: 今後やりたいこと
- 初期化が遅い。 理由はわかっていて、vscode は electron で起動すること前提に、細かなファイルを 1500~3000 個ほど AMD でロードする。それぞれは数kbだが、依存の依存の…深い依存があり、その深さだけネットワークを往復するので、時間がかかる。
- webpack でバンドルしようとしたが、vscode-loader はかなり特殊なローダーになっていて、webpack でそれを再現するのが困難
- 今度ブラウザに採用されるという webbundle を試せないか考えている。ネットワークを仮想化して束ねて、単一ファイルにできるので。 https://web.dev/web-bundles/
- 永続化層の実装が雑で効率的でない。とりあえず全部インメモリに乗せて、ファイル読み込みにフックしている。
- まだ各言語の補完サーバーが動いていない。ここは単に自分がエクステンション読み込みの相対パス解決をうまく動かせてないだけなので、すぐできるはず。
