🎒
Firebase Studio + DevPod + RooCode + Gemini 2.5 Flashで開発環境のモダン化

2025/06/14に公開
 はじめにhttps://zenn.dev/tkithrta/articles/9d4bd94d1f7f49
皆さんがClineに全部賭ける前に書いたProject IDX + Cline + Gemini 2.0 Flashハンズオン記事の情報が古くなってしまったので、改めてFirebase Studio + DevPod + RooCode + Gemini 2.5 FlashでDevcontainerを使用したCDE型AIコーディングエージェント（クラウド開発環境）を紹介したいと思います。
https://containers.dev/
Firebase Studio（旧Project IDX）を使っていると、以下の問題に直面します。
遅い
ワークスペースやシェルを立ち上げる時の設定を細かくカスタマイズできない
Nixを使っているため、DebianやUbuntu、Alpineのようにパッケージインストールできない
root権限がないため、suやsudoが使えない
GitHub CodespacesやGitpod、ローカル環境で同じ開発環境を再現できない
CodeSandboxやCoderの使用も検討しましたが、Devcontainerで同じ開発環境を再現したいため、Firebase Studio上でDevPodを使うことにしました。
https://devpod.sh/

https://devpod.sh/docs/what-is-devpod
Github Codespaces、JetBrains Spaces、Google Cloud Workstationsなどのホスティングサービスと比較して、DevPodには次のような利点があります:
コスト削減: DevPodは、ベア仮想マシンを使用し、未使用の仮想マシンを自動的にシャットダウンするため、同等の機能を持つ既存のサービスよりも通常5～10倍程度安くなります。
ベンダーロックインがない: DevPodはすべてのクラウドプロバイダーをサポートしているため、最も安価なクラウドプロバイダーでも、最も強力なクラウドプロバイダーでも、自分に最も適したクラウドプロバイダーを選ぶことができる。DevPodはすべてのクラウドプロバイダーをサポートしている。
ローカル開発: クラウド・プロバイダーに依存する必要は全くありません。
クロスIDEサポート: VS CodeとJetBrainsの全製品がサポートされており、その他の製品はSSHで接続できます。
クライアントのみ: サーバーバックエンドをインストールする必要がなく、DevPodはあなたのコンピューターだけで動作します。
オープンソース: DevPodは100%オープンソースで拡張可能です。プロバイダーが存在しない？自分で作ればいいのです。
豊富な機能セット: DevPodはすでにプレビルド、自動非アクティブシャットダウン、gitとdocker認証情報の同期をサポートしており、さらに多くの機能が追加される予定です。
デスクトップアプリ: DevPodには使いやすいデスクトップアプリケーションが付属しています。独自のインテグレーションを構築したい場合は、DevPodは機能豊富なCLIも提供しています。
www.DeepL.com/Translator（無料版）で翻訳しました。
もちろん、前回と変わらず今回も、以下の内容を実現することができます。
とりあえず無料でCline/RooCodeを試したい
VimやEmacsを使っているので、VS Codeをインストールしたくない
GitHubアカウントを持っていないので、GitHub Copilot(vscode-lm)が使えない
Ollama(ollama)やLiteLLM(litellm)でModelを動かせるスペックのサーバーがない
Bluetooth Keyboardを使用したiPadやiPhone、Android端末で使いたい
今回は主にDevcontainerとDevPodの設定ファイルとコマンド操作を主に解説していくため、ハンズオン形式で詳しい手順を確認したい場合は、最初に紹介した古い方の記事を最新の画面で読み替えて確認するようにしてください。

 Firebase StudioFirebase Studioはここからアクセスできます。
https://studio.firebase.google.com/
「Start coding an app」にある「New Workspace」をクリック。
Templatesで「Misc」を選んだ先にある「Empty Workspace」か、画面右上の「New Empty Workspace」ボタンをクリック。

以下のURLから作成することもできます。
https://studio.firebase.google.com/new/blank
ワークスペース名を入力したら「Create」ボタンを押します。
これがFirebase Studioのワークスペース画面です。

 DevPodDevPodはGUIで操作するデスクトップアプリだけではなくCLIもあるため、今回のようなユースケースにぴったりです。

GitとDockerが必要になるため、Firebase StudioのDockerサービスを有効にしましょう。
.idx/dev.nix
{ pkgs, ... }: {
  channel = "stable-24.05";
  packages = [
    pkgs.zip
  ];
  env = {};
  idx = {};
  services.docker.enable = true;
}
packagesの配列内にパッケージを追加しておかないとattribute pkgs of argument is not usedメッセージがいつまで経っても消えないので適当に追加しておきます。

私はzipファイルにしてワークスペースのバックアップを行うことが多いのでpkgs.zipを追加しています。

.idxディレクトリのdev.nixファイルを編集すると、設定を反映するためにFirebase Studioを再起動する「Rebuild Environment」ボタンが表示されるため、再起動したら、DevPodのバイナリをダウンロードして、パスを通します。
$ mkdir -p bin empty
$ curl -Lo bin/devpod https://github.com/loft-sh/devpod/releases/download/v0.6.15/devpod-linux-amd64
$ chmod 755 bin/devpod
$ export PATH=$PWD/bin:$PATH
続いて.devcontainer.jsonファイルを用意します。今回は新たに作成したemptyディレクトリをDevPodのワークスペースとします。
empty/.devcontainer.json
{
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
  "containerUser": "root",
  "remoteUser": "root"
}
.devcontainer.jsonファイルを用意していないとDevPod起動時に{"image": "mcr.microsoft.com/devcontainers/base:ubuntu"}と書かれた.devcontainer.jsonファイルが生成されますが、containerUserとremoteUserをrootにしないとマウントされたワークスペースディレクトリをFirebase Studio側で編集できなくなるため、必ずcontainerUserとremoteUserをrootにした.devcontainer.jsonファイルを用意するようにしましょう。
続いてFirebase Studioのターミナル上でDevPodの設定を行います。
$ devpod provider add docker
$ devpod provider set-options -o "DOCKER_HOST=$DOCKER_HOST"
$ devpod ide set-options openvscode -o VERSION=v1.99.3
$ devpod context set-options -o EXIT_AFTER_TIMEOUT=false
Dockerプロバイダを追加します。
Firebase StudioはDockerをRootlessモードで動かしているため、DevPodのDockerプロバイダに同じDOCKER_HOST環境変数を設定します。
DevPodではVS Codeに似たgitpod-io/openvscode-serverを使うことができますが、デフォルトのバージョンが古いため最新のバージョンを環境変数で設定します。
DevPodを起動したままにしないとOpen VS Codeが使えないため環境変数を設定します。
DevPodの設定を終えたらOpen VS CodeといっしょにDevPodを起動します。
$ devpod up empty --ide=openvscode
Starting vscode in browser mode at http://localhost:10800/?folder=/workspaces/emptyというログが表示されたらCtrlキーを押しながらURLをクリックしてOpen VS Codeにアクセスしましょう。
これがDevPodのワークスペース画面です。
UsageFirebase Studioのターミナル上でCtrl + Cキーを押すと起動したままになっているOpen VS Codeを停止できますが、DevPodのワークスペースは起動したままになっているので注意しましょう。
devpod list(devpod ls)コマンドで起動しているワークスペースを確認することができます。
$ devpod list
  
    NAME  |          SOURCE          | MACHINE | PROVIDER |    IDE     | LAST USED |   AGE   |  PRO   
  --------+--------------------------+---------+----------+------------+-----------+---------+--------
    empty | local:/home/user/x/empty |         | docker   | openvscode | 1m1s      | 1h1m1s  | false
devpod stop(devpod down)コマンドで起動しているワークスペースを停止することができます。
$ devpod stop empty

 RooCodeあとはOpen VSX RegistryからRooCodeをインストールしてGemini 2.5 FlashのAPIキーを設定するだけです。
https://docs.roocode.com/getting-started/installing
今回はサイドバーの拡張機能からrooveterinaryinc.roo-clineをインストールしましたが、openvscode-serverコマンドや.devcontainer.jsonファイルのcustomizations.vscode.extensionsからインストールすることもできます。
Gemini 2.5 FlashのAPIキーは以下のページから確認することができます。
https://aistudio.google.com/apikey
RooCodeの設定を終えたら、試しに適当にコードを書いてもらって、正常に動くか確認します。
今回のようにDevPod上でWebサーバーを起動した場合、8080ポートに紐づいたFirebase StudioのURLからアクセスできるようになります。

 Devcontainermcr.microsoft.com/devcontainers/base:ubuntuにはLABEL dev.containers.features="common"が付与されているため、以下シェルに記載されているパッケージがプリインストールされています。
https://github.com/devcontainers/features/blob/main/src/common-utils/main.sh
もし.devcontainer.jsonに記載されたイメージとは異なるイメージを使いたい場合は以下のようなコマンドを試します。
$ devpod up empty --ide=openvscode --devcontainer-image=mcr.microsoft.com/devcontainers/php:1-8.4-bookworm
ただLaravelのようなNode.jsも一緒に使うWebアプリケーションフレームワークだとイメージを変更するだけでは動かないので、以下のようにDevcontainerのfeatureを用意してあげます。
empty/.devcontainer.json
{
  "image": "mcr.microsoft.com/devcontainers/php:1-8.4-bookworm",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {}
  },
  "containerUser": "root",
  "remoteUser": "root"
}
また、DevPodはOpen VS Codeを使わずに起動することもできます。

起動したイメージにSSH接続すると通常のDockerと同じように使えます。
$ devpod up empty --ide=none
$ devpod ssh empty
CaddyとGiteaがあると今回のようなCDE型AIコーディングエージェントを動かすときに役立ちます。

Firebase StudioかDevPodにお好みでダウンロードしておくといいでしょう。
https://caddyserver.com/

https://about.gitea.com/
DevPodスクリプトmkdir -p bin empty
cat <<EOF > .idx/dev.nix
{ pkgs, ... }: {
  channel = "stable-24.05";
  packages = [
    pkgs.zip
  ];
  env = {};
  idx = {};
  services.docker.enable = true;
}
EOF
cat <<EOF > empty/.devcontainer.json
{
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
  "containerUser": "root",
  "remoteUser": "root"
}
EOF
curl -Lo bin/devpod https://github.com/loft-sh/devpod/releases/download/v0.6.15/devpod-linux-amd64
chmod 755 bin/devpod
export PATH=$PWD/bin:$PATH
devpod provider add docker
devpod provider set-options -o "DOCKER_HOST=$DOCKER_HOST"
devpod ide set-options openvscode -o VERSION=v1.99.3
devpod context set-options -o EXIT_AFTER_TIMEOUT=false
# DevPod起動前にFirebase Studioを再起動してdev.nixの設定を反映する
devpod up empty --ide=openvscode
Caddyスクリプトmkdir -p bin public
curl -LO https://github.com/caddyserver/caddy/releases/download/v2.10.0/caddy_2.10.0_linux_amd64.tar.gz
tar -xzf caddy_2.10.0_linux_amd64.tar.gz -C bin caddy
# 既にパスを通してあれば不要
# export PATH=$PWD/bin:$PATH
rm caddy_2.10.0_linux_amd64.tar.gz
caddy file-server -r public -l :8080 -b
Giteaスクリプトmkdir -p bin gitea
curl -LO https://dl.gitea.com/gitea/1.24.0/gitea-1.24.0-linux-amd64.xz
unxz gitea-1.24.0-linux-amd64.xz
mv gitea-1.24.0-linux-amd64 bin/gitea
chmod 755 bin/gitea
# 既にパスを通してあれば不要
# export PATH=$PWD/bin:$PATH
gitea web -w "$PWD/gitea"

 おわりに今回はFirebase Studio + DevPod + RooCode + Gemini 2.5 FlashでDevcontainerを使用したクラウド開発環境を紹介しました。

もちろんDevPod以外はそれぞれ好きなツールに置き換えることで自分のユースケースにあわせたCDE型AIコーディングエージェントにすることができますし、GitとDockerが動くローカル環境でも同じ開発環境を再現できますし、Cloudflare TunnelやTailscale Funnelを使うことでローカル環境をクラウド開発環境のように様々な環境からアクセスできるようにもなりますので、何かの参考になれば幸いです。
はじめに

Firebase Studio

DevPod

RooCode

Devcontainer

おわりに

Discussion
