Theia (VS Code ベース Web IDE) as a Service の Gitpod を使う

最近になって Gitpod を知りました。

www.gitpod.io

知ったきっかけは VS Code オンライン版の code-server を VPS などで自前で構築している人たちの記事を読んだことでした。

github.com

code-server は Digital Ocean の Droplet を使ってワンクリックでデプロイできるようになっていますが、ホスティングサービスは見当たりません*1。必要時にだけ利用できるセキュアな環境を構築するのは結構手間暇がかかるのでプロバイダーに任せたいと思いました。

VS Code ベースのオンライン IDE である Theia というのがあります。

theia-ide.org

Theia 自体をホスティングしているのが Gitpod です。 1ヶ月100時間まで無料で使えます(公開リポジトリのみ)。たまに個人開発で使う程度なら十分でしょう。

www.gitpod.io

ちなみに Theia は Eclipse Che 7 でも使われていました。

blog.kondoumh.com

Gitpod には Chrome 拡張が提供されていています。

chrome.google.com

この拡張をインストールすると GitHub リポジトリの Clone or download の右側に Gitpod ボタンが追加されるのでこれをポチっとするだけで、専用のワークスペースに展開してくれます。ラク過ぎてクラクラします。

f:id:kondoumh:20191020222609p:plain

ワークスペースにはちょっと前の世代の VS Code が再現されています。コード補完やターミナルなども問題なく使えます。

f:id:kondoumh:20191022021504p:plain

エディタの設定はアカウント共通のようですが、.theia/setting.json にワークスペース毎の設定を書くこともできます。

Java / Go / Python / C / C++ / Rust などの環境はインテグレートされているため、そのまま開発に入れる感じですが、Vue など特定フレームワーク用の VS Code 拡張は未導入なため vue ファイルのシンタックスハイライトなどが効いてません。

f:id:kondoumh:20191020232429p:plain

現時点では VS Code のように Marketplace を検索して拡張を追加することはできませんが、Marketplace をブラウザで開いて、Download Extension リンクから vsix 形式のファイルを取得してアップロードすればインストールができます。

f:id:kondoumh:20191020232554p:plain

Vue 用の拡張 vetur の vsix 形式のファイルをドラッグ&ドロップしてアップロード・インストールしてみました。

f:id:kondoumh:20191020232451p:plain

ちゃんと有効化されました。

f:id:kondoumh:20191020232507p:plain

シンタックスハイライトも効いてます。

f:id:kondoumh:20191020232525p:plain

VS Code 拡張を追加すると、プロジェクトルートに .gitpod.yml が追加され以下のような情報が出力されていました。

vscode:
  extensions:
    - octref.vetur@0.22.4:F5isQXjXpm5hcM6ONMslcA==

このファイルをコミットしておけば、新たにワークスペースを作り直した時も拡張がインストールされるのでしょう。

ところで、Vue などの Web アプリはターミナルで $ npm run serve で起動してプレビューすることができます*2

初期状態では、プレビューのブラウザに Invalid Host header というエラーが出てしまいます。そこで、vue.config.js に devServer の設定を追加します。

module.exports = {
    :
  devServer: {
    disableHostCheck: true
  }
}

これで正常にレンダリングされるようになりました。別ウィンドウに出せば、Chrome の DevTools も使えます。

f:id:kondoumh:20191022023059p:plain

VS Code は OS 機能との連携も重要で、ターミナルで使う CLI や Git CUI の Tig なども使いたくなります。NPM / pip / go module など言語のパッケージ管理システムでインストールするものはいいのですが、そうでないものはイメージのビルドプロセスに組み込むしかありません。

Gitpod は文字通り Kubernetes クラスターに配備される Pod なのでコンテナイメージのカスタマイズも可能です。

Gitpod - Docker Image

先ほどの .gitpod.yml に public なイメージを指定するか、独自 Dockerfile を指定することができます。

image:
  file: .gitpod.dockerfile

.gitpod.dockerfile では apt-get で Tig をインストールするよう記述してみました。

FROM gitpod/workspace-full:latest

USER root

RUN apt-get update && \
    apt-get install tig

これをリポジトリに commit / push してワークスペースを作り直すとイメージビルドが始まります。

f:id:kondoumh:20191022013641p:plain

エラーがなければビルドが終わりワークスペースが起動します。ターミナルで tig もちゃんと起動します。

f:id:kondoumh:20191022014402p:plain

2回目以降はビルドしたイメージが使われるので、通常のワークスペースと同じ時間で起動します。プロジェクト毎にイメージをビルドするのが面倒な場合、Docker Hub にイメージを置いて使うとよいでしょう*3。あるいは代替となる VS Code 拡張を探すのもありかもしれません。

ちなみに .gitpod.yml には、コンテナ起動時に実行したい task を登録しておくことができます。Gitpod で起動された環境のタイムゾーンは UTC になっており、git commit した時のタイムスタンプが日本とはずれたりします。そこで以下のようにタイムゾーンを設定するコマンドを実行するようにしてみました。

tasks:
  - command: export TZ="Asia/Tokyo"

以上、ざっくり GItpod を使ってみました。拡張がワークスペース単位だったりしてデスクトップで最新の VS Code を使っている感じとはちょっと違いますが、Eclipse Che や CodeSandbox よりも VS Code 成分高めだし、このレベルの開発環境がほぼ制限なく利用できるというのはすごいです。

現時点では PWA に対応していないのでデスクトップアプリのように使うには Electron などを使うことになります。あと、iPadOS の Safari でもちゃんと使えたということも記しておきます。

f:id:kondoumh:20191022102359p:plain

*1:以前は Coder.com でホスティングされていた模様です。

*2:ローカルサーバーを起動した時にポートを expose するかというポップアップが出ます。

*3:イメージのメンテナンスが必要になりますが。