關於 Firebase Studio 工作區

Firebase Studio 提供雲端式協作開發環境,可簡化使用各種架構和程式庫建構應用程式的程序。

設定 Firebase Studio 工作區後,您就能存取及共用功能齊全的彈性開發環境:Firebase Studio 工作區可透過任何裝置存取,並提供整合式工具,簡化您和團隊的開發程序。

建立工作區

Firebase Studio 中的工作區是開發環境,包含開發應用程式所需的一切工具。其中包含程式碼、程式碼編輯器 (附有與專案相關的外掛程式),以及支援應用程式開發的工具鍊。這就像在本地電腦開發環境中建立新專案一樣,但您擁有預先設定的完整電腦和作業系統,專門用於建構應用程式,在雲端瀏覽器中執行,隨時隨地都能存取。

Firebase Studio 工作區經過最佳化,可包含單一程式碼集,因此您可以將不同應用程式的環境和系統層級依附元件彼此隔離。您可以建立多個工作區,搭配不同的應用程式和架構使用。

如要建立新工作區,請按照下列步驟操作:

設定工作區

Firebase Studio 使用 Nix 為每個工作區定義環境設定。Nix 是純粹的函式套件管理工具,會為每個依附元件指派專屬 ID,這表示您的環境可以無縫包含相同依附元件的多個版本。此外,這項技術還可重現及聲明。在 Firebase Studio 的脈絡中,這表示您可以在工作區之間共用 Nix 設定檔,載入相同的環境設定。進一步瞭解 Nix + Firebase Studio

建立或編輯 .idx/dev.nix 檔案

環境設定定義在程式碼存放區的 .idx/dev.nix 檔案中。這個檔案會指定要新增至工作區的所有元件,包括:

請參閱下列 .idx/dev.nix 檔案範例,瞭解基本工作區環境設定,以便在 Firebase Studio 中啟用應用程式預覽功能:

{ 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";
      };
    };
  };
}

套用新設定

每當您新增或更新 dev.nix 設定檔時,Firebase Studio 都會在右下角顯示「重新建構環境」提示。重建環境所需的時間取決於設定所需的套件數量。

排解環境建構失敗的問題

由於設定檔是可供機器讀取的程式碼,因此可能含有錯誤。如果發生這種情況,環境可能無法建構及啟動。 Firebase Studio 會顯示啟動「復原」環境的選項。 這個工作區不包含您定義的任何設定,只會執行基本 Code OSS。您可藉此修正 dev.nix 設定檔中的錯誤,並重建環境。

後續步驟