📖
ブラウザ上でcode-server(VSCodeライクなもの)を動かす
少し前にこれ系の話題がよく挙がっていましたが、MicrosoftがCodeSpacesを展開しはじめてからあまり挙がらなくなった気がします。久しぶりに調べ直してみたら、かなり簡単に同様の環境を自前で構築できるようになっていました。
構築方法
ここのGetting Startedに従って構築します。方法が3つ挙げられていて、中でも3番目がものすごく簡単でした。
3. Use our one-click buttons and guides to deploy code-server to a popular cloud provider ⚡
3のリンク先を開いてみると、VPSやPaaSなどデプロイ先候補が挙げられています。その中でも、Railwayというサービスにデプロイするのがおすすめです。無料かつ動作が高速です。
- code-serverをデプロイするためにGithubにリポジトリが新規作成されます。
- 開く対象のリポジトリの指定が必須になっていますので、予めご用意ください。
- パスワードも入力必須となっています。これはデプロイしたcode-serverにログインするためのものです。
拡張機能のインストール
ガイドにある通り、Dockerfileに記述します。
画面をいじっているとわかるのですが、拡張機能はVSCode用のMarketPlaceとは別のものを使うようです。画面からもインストールできたように見えたのですが、有効になりませんでした。あと、再デプロイしたら消えてしまうからDockerfileに書くのだと思います。
Language server
私はElmの拡張機能をインストールしてみたのですが、Language serverが動いてくれませんでした。別途Language serverをインストールするようにDockerfileに記述し、code-serverの画面からterminalを開いてelm-language-serverコマンドでLanguage serverを起動してブラウザをリロードしたら動くようになりました。しかし最初しばらくはうまく動かなかったりするので、明確な方法が確立できていません。
私のDockerfile
デフォルトの内容に加えて以下の内容を記述しました。
RUN code-server --install-extension Elmtooling.elm-ls-vscode
RUN sudo curl -fsSL https://deb.nodesource.com/setup_15.x | sudo bash -
RUN sudo apt-get install -y nodejs
# Install node packages
RUN sudo npm install -g elm elm-test elm-format
RUN sudo npm install -g @elm-tooling/elm-language-server
Discussion