最近になって Gitpod を知りました。
知ったきっかけは VS Code オンライン版の code-server を VPS などで自前で構築している人たちの記事を読んだことでした。
code-server は Digital Ocean の Droplet を使ってワンクリックでデプロイできるようになっていますが、ホスティングサービスは見当たりません*1。必要時にだけ利用できるセキュアな環境を構築するのは結構手間暇がかかるのでプロバイダーに任せたいと思いました。
VS Code ベースのオンライン IDE である Theia というのがあります。
Theia 自体をホスティングしているのが Gitpod です。 1ヶ月100時間まで無料で使えます(公開リポジトリのみ)。たまに個人開発で使う程度なら十分でしょう。
ちなみに Theia は Eclipse Che 7 でも使われていました。
Gitpod には Chrome 拡張が提供されていています。
この拡張をインストールすると GitHub リポジトリの Clone or download の右側に Gitpod ボタンが追加されるのでこれをポチっとするだけで、専用のワークスペースに展開してくれます。ラク過ぎてクラクラします。
ワークスペースにはちょっと前の世代の VS Code が再現されています。コード補完やターミナルなども問題なく使えます。
エディタの設定はアカウント共通のようですが、.theia/setting.json にワークスペース毎の設定を書くこともできます。
Java / Go / Python / C / C++ / Rust などの環境はインテグレートされているため、そのまま開発に入れる感じですが、Vue など特定フレームワーク用の VS Code 拡張は未導入なため vue ファイルのシンタックスハイライトなどが効いてません。
現時点では VS Code のように Marketplace を検索して拡張を追加することはできませんが、Marketplace をブラウザで開いて、Download Extension リンクから vsix 形式のファイルを取得してアップロードすればインストールができます。
Vue 用の拡張 vetur の vsix 形式のファイルをドラッグ＆ドロップしてアップロード・インストールしてみました。
ちゃんと有効化されました。
シンタックスハイライトも効いてます。
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 も使えます。
VS Code は OS 機能との連携も重要で、ターミナルで使う CLI や Git CUI の Tig なども使いたくなります。NPM / pip / go module など言語のパッケージ管理システムでインストールするものはいいのですが、そうでないものはイメージのビルドプロセスに組み込むしかありません。
Gitpod は文字通り Kubernetes クラスターに配備される Pod なのでコンテナイメージのカスタマイズも可能です。
先ほどの .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 してワークスペースを作り直すとイメージビルドが始まります。
エラーがなければビルドが終わりワークスペースが起動します。ターミナルで tig もちゃんと起動します。
2回目以降はビルドしたイメージが使われるので、通常のワークスペースと同じ時間で起動します。プロジェクト毎にイメージをビルドするのが面倒な場合、Docker Hub にイメージを置いて使うとよいでしょう*3。あるいは代替となる VS Code 拡張を探すのもありかもしれません。
2020.2.22 追記
最近のリリースで、brew によるパッケージ追加機能が実装されました。ワンショットでツールを追加して使うことができます。
-- 追記終わり
ちなみに .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 でもちゃんと使えたということも記しておきます。
