Check out the latest news from Firebase at Cloud Next 2025. Learn more.

このページは Cloud Translation API によって翻訳されました。

Firebase Studio ワークスペースをカスタマイズする

Firebase Studio を使用すると、次の内容を記述する単一の .idx/dev.nix 構成ファイルを定義することで、プロジェクト固有のニーズに合わせてワークスペースを調整できます。

コンパイラやその他のバイナリなど、（ターミナルからなど）実行する必要があるシステムツール。
インストールが必要な拡張機能（プログラミング言語のサポートなど）。
アプリのプレビューの表示方法（ウェブサーバーを実行するコマンドなど）。
ワークスペースで実行されているローカルサーバーが使用できるグローバル 環境変数。

使用可能なオプションの詳細については、dev.nix リファレンスをご覧ください。

Nix と Firebase Studio

Firebase Studio は Nix を使用して、各ワークスペースの環境構成を定義します。具体的には、Firebase Studio は以下を使用します。

ワークスペース環境を記述する Nix プログラミング言語。Nix は関数型プログラミング言語です。dev.nix ファイルで定義できる属性とパッケージライブラリは、Nix 属性セット構文に従います。
ワークスペースで使用可能なシステムツールを管理する Nix パッケージマネージャー。これは、APT（apt と apt-get）、Homebrew（brew）、dpkg などの OS 固有のパッケージマネージャーに似ています。

Nix 環境は再現可能で宣言的であるため、Firebase Studio のコンテキストでは、Git リポジトリの一部として Nix 構成ファイルを共有し、プロジェクトで作業するすべてのユーザーが同じ環境構成を持つようにできます。

基本的な例

次の例は、プレビューを有効にする基本的な環境構成を示しています。

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

システムツールを追加する

クラウドサービスのコンパイラや CLI プログラムなどのシステムツールをワークスペースに追加するには、Nix パッケージレジストリで一意のパッケージ ID を見つけ、dev.nix ファイルの packages オブジェクトに追加します。接頭辞は「pkgs.」にします。

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

これは、APT（apt と apt-get）、Homebrew（brew）、dpkg などの OS 固有のパッケージマネージャーを使用してシステムパッケージをインストールする場合とは異なります。必要なシステムパッケージを明示的に記述することで、Firebase Studio ワークスペースを簡単に共有して再現できます。

ローカルノードバイナリを使用する

ローカルマシンの場合と同様に、ローカルにインストールされたノードパッケージに関連するバイナリ（package.json で定義されたパッケージなど）は、npx コマンドで呼び出すことで、ターミナルパネルで実行できます。

さらに便利な点として、node_modules フォルダがあるディレクトリ（ウェブプロジェクトのルートディレクトリなど）にいる場合は、npx 接頭辞なしでローカルにインストールされたバイナリを直接呼び出すことができます。

`gcloud` コンポーネントを追加する

すべての Firebase Studio ワークスペースで、Google Cloud 用の gcloud CLI のデフォルト構成を使用できます。

追加のコンポーネントが必要な場合は、dev.nix ファイルに追加できます。

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

IDE 拡張機能を追加する

OpenVSX 拡張機能レジストリを使用して Firebase Studio に拡張機能をインストールするには、次の 2 つの方法があります。

Firebase Studio の [拡張機能] パネルを使用して、拡張機能を検出してインストールします。このアプローチは、次のようなユーザー固有の拡張機能に最適です。
- カスタムのカラーテーマ
- エディタエミュレーション（VSCodeVim など）
dev.nix ファイルに拡張機能を追加する。これらの拡張機能は、ワークスペース構成を共有するときに自動的にインストールされます。このアプローチは、次のようなプロジェクト固有の拡張機能に最適です。
- プログラミング言語拡張機能（言語固有のデバッガなど）
- プロジェクトで使用されているクラウドサービスの公式拡張機能
- コードフォーマッタ

後者のアプローチでは、完全修飾拡張 ID（<publisher>.<id> 形式）を見つけて idx.extensions オブジェクトに追加することで、IDE 拡張機能を dev.nix ファイルに含めることができます。

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

共通サービスを追加する

Firebase Studio では、開発中に必要となる一般的なサービスのセットアップと構成も簡素化されています。たとえば、次のようなサービスがあります。

コンテナ
- Docker（services.docker.*）
メッセージ
- Pub/Sub エミュレータ（services.pubsub.*）
データベース
- MySQL（services.mysql.*）
- Postgres（services.postgres.*）
- Redis（services.redis.*）
- Spanner（services.spanner.*）

ワークスペースでこれらのサービスを有効にする方法については、dev.nix リファレンスの services.* をご覧ください。

プレビューをカスタマイズする

アプリのプレビューをカスタマイズする方法については、アプリのプレビューをご覧ください。

ワークスペースアイコンを設定する

ワークスペースのカスタムアイコンを選択するには、dev.nix ファイルと同じレベルの .idx ディレクトリ内に icon.png という名前の PNG ファイルを配置します。Firebase Studio は、このアイコンを使用してダッシュボードでワークスペースを表します。

このファイルはソース管理（Git など）にチェックインできるため、Firebase Studio を使用するときに、プロジェクトで作業するすべてのユーザーがプロジェクトの同じアイコンを表示できるようになります。このファイルは Git ブランチによって異なる可能性があるため、このアイコンを使用して、ベータ版アプリワークスペースと本番環境アプリワークスペースを視覚的に区別したり、その他の目的に使用したりできます。

カスタマイズをテンプレートに変換する

環境構成を、誰でも新しいプロジェクトの構築に使用できる「スターター環境」にするには、カスタムテンプレートを作成するをご覧ください。

すべてのカスタマイズオプションを確認する

環境構成スキーマの詳細については、dev.nix リファレンスをご覧ください。

Firebase Studio ワークスペースをカスタマイズする

Nix と Firebase Studio

基本的な例

システム ツールを追加する

ローカルノード バイナリを使用する

gcloud コンポーネントを追加する