Как настроить рабочую область в Firebase Studio

Firebase Studio позволяет вам адаптировать рабочее пространство к уникальным потребностям вашего проекта, определив один файл конфигурации .idx/dev.nix , который описывает:

  • Системные инструменты , которые вам необходимо запускать (например, из Терминала), такие как компиляторы или другие двоичные файлы.
  • Расширения, которые вам необходимо установить (например, поддержка языков программирования).
  • Как должны выглядеть предварительные версии вашего приложения (например, команды для запуска вашего веб-сервера).
  • Глобальные переменные среды доступны локальным серверам, работающим в вашем рабочем пространстве.

Полное описание доступных возможностей см. в справочнике dev.nix

Добавив файл .idx/mcp.json (для Gemini в Firebase ) или .gemini/settings.json (для Gemini CLI ) в свой проект, вы также можете подключаться к серверам Model Context Protocol (MCP), включая сервер Firebase MCP .

Nix и Firebase Studio

Firebase Studio использует Nix для определения конфигурации среды для каждого рабочего пространства. В частности, Firebase Studio использует:

  • Язык программирования Nix для описания рабочих сред. Nix — это функциональный язык программирования. Атрибуты и библиотеки пакетов, которые можно определить в файле dev.nix , соответствуют синтаксису набора атрибутов Nix .

  • Менеджер пакетов Nix для управления системными инструментами, доступными в вашем рабочем пространстве. Он аналогичен менеджерам пакетов для различных ОС, таким как APT ( apt и apt-get ), Homebrew ( brew ) и dpkg .

Поскольку среды Nix являются воспроизводимыми и декларативными, в контексте Firebase Studio это означает, что вы можете поделиться своим файлом конфигурации Nix как частью своего репозитория Git, чтобы гарантировать, что все, кто работает над вашим проектом, будут иметь одинаковую конфигурацию среды.

Простой пример

В следующем примере показана базовая конфигурация среды, включающая предварительный просмотр:

{ 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 и добавьте его в объект packages файла dev.nix с префиксом `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 . Декларативное описание необходимых системных пакетов упрощает совместное использование и воспроизведение рабочих пространств Firebase Studio .

Использовать двоичные файлы локального узла

Как и на локальной машине, двоичные файлы, связанные с локально установленными пакетами узлов (например, пакеты, определенные в package.json ), можно запускать на панели терминала, вызывая их с помощью команды npx .

Для дополнительного удобства, если вы находитесь в каталоге с папкой node_modules (например, в корневом каталоге веб-проекта), локально установленные двоичные файлы можно вызывать напрямую, без префикса npx .

Добавить компоненты gcloud

Конфигурация gcloud CLI для Google Cloud по умолчанию доступна для всех рабочих пространств Firebase Studio .

Если вам нужны дополнительные компоненты, вы можете добавить их в файл dev.nix :

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

Добавить расширения IDE

Установить расширения в Firebase Studio с помощью реестра расширений OpenVSX можно двумя способами:

  • Используйте панель «Расширения» в Firebase Studio для поиска и установки расширений. Этот подход лучше всего подходит для пользовательских расширений , таких как:

    • Пользовательские цветовые темы
    • Эмуляция редактора, например VSCodeVim

  • Добавьте расширения в файл dev.nix . Эти расширения будут установлены автоматически при публикации конфигурации рабочего пространства. Этот подход лучше всего подходит для расширений, специфичных для проекта , например:

    • Расширения языка программирования, включая отладчики для конкретных языков
    • Официальные расширения для облачных сервисов, используемых в вашем проекте
    • Форматировщики кода

Для последнего подхода вы можете включить расширения IDE в файл dev.nix , найдя полный идентификатор расширения (в форме <publisher>.<id> ) и добавив его в объект idx.extensions следующим образом:

{ 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 также предлагает упрощенную установку и настройку для распространенных служб, которые могут вам понадобиться в процессе разработки, включая:

  • Контейнеры
    • Докер ( services.docker.* )
  • Обмен сообщениями
    • Эмулятор Pub/Sub ( services.pubsub.* )
  • Базы данных
    • MySQL ( services.mysql.* )
    • Postgres ( services.postgres.* )
    • Redis ( services.redis.* )
    • Гаечный ключ ( services.spanner.* )

Подробную информацию о включении этих служб в вашем рабочем пространстве см. в разделах services.* справочника dev.nix .

Настроить предварительные просмотры

Подробную информацию о настройке предварительного просмотра приложения см. в разделе Предварительный просмотр приложения .

Установите значок своего рабочего пространства

Вы можете выбрать собственный значок для своего рабочего пространства, поместив PNG-файл с именем icon.png в каталог .idx на том же уровне, что и файл dev.nix . Firebase Studio будет использовать этот значок для представления вашего рабочего пространства на панели инструментов.

Поскольку этот файл можно зарегистрировать в системе управления версиями (например, Git), это хороший способ помочь всем, кто работает над вашим проектом, видеть один и тот же значок при использовании Firebase Studio . А поскольку файл может различаться в разных ветках Git, этот значок можно использовать для визуального различения рабочих областей бета- и продакшн-приложений, а также для других целей.

Превратите свои настройки в шаблон

Чтобы превратить конфигурацию вашей среды в «начальную среду», которую любой желающий сможет использовать для создания новых проектов, см. документацию по созданию пользовательских шаблонов .

Изучите все варианты настройки

Подробное описание схемы конфигурации среды см. в справочнике dev.nix

Загрузите ваши файлы

Чтобы загрузить файлы в виде zip-архива:

  • Щелкните правой кнопкой мыши по любому каталогу на панели проводника и выберите Zip and Download .

Чтобы загрузить все содержимое каталога вашего проекта:

  1. Выберите Файл > Открыть папку .

  2. Примите каталог по умолчанию /home/user .

  3. После загрузки файлов щёлкните правой кнопкой мыши по рабочему каталогу и выберите «Архивировать и скачать» . При использовании App Prototyping agent вашим рабочим каталогом будет studio . При использовании шаблона или загруженного проекта это будет имя вашего проекта.

  4. При появлении запроса на пересоздание среды нажмите кнопку Отмена .

  5. После завершения загрузки повторно откройте рабочий каталог из меню «Файл» , чтобы вернуться в рабочее пространство.

Используйте MCP-серверы

Серверы MCP предоставляют Gemini дополнительные инструменты и источники данных. Например, вы можете добавить сервер Firebase MCP для исследования данных в Cloud Firestore с использованием естественного языка при сборке или отладке приложения.

Предпосылки

  • Если сервер MCP требует этого, убедитесь, что у вас есть рабочая установка Node.js и npm.

Выберите совместимый MCP-сервер

Firebase Studio имеет базовую поддержку MCP-серверов, что означает, что не все MCP-серверы совместимы. При выборе MCP-сервера для добавления в рабочее пространство Firebase Studio имейте в виду следующее:

  • Поддерживается:
    • Стандартный ввод/вывод (stdio) или серверы событий, отправленных сервером (SSE)/потоковые транспортные серверы HTTP, не требующие специальных форм аутентификации
    • Инструменты, предоставляемые серверами MCP
  • В настоящее время не поддерживается:
    • Серверы, которым требуется графический пользовательский интерфейс или сеанс рабочего стола
    • Подсказки, выборки или другие ресурсы, предоставляемые серверами MCP

Добавить MCP-сервер

  1. В Проводнике (Ctrl+Shift+E) отредактируйте или создайте файл конфигурации MCP.

    • Gemini в чате Firebase использует .idx/mcp.json .

    • Gemini CLI использует .gemini/settings.json .

    Если файл ещё не существует, создайте его, щёлкнув правой кнопкой мыши по родительскому каталогу и выбрав «Новый файл» . Создайте или отредактируйте оба файла, чтобы использовать сервер MCP в Gemini в Firebase и Gemini CLI .

  2. Добавьте конфигурацию сервера в содержимое файла. Например, чтобы добавить сервер Firebase MCP, введите:

    {
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}

    Этот файл конфигурации указывает Gemini , какой MCP-сервер использовать. В этом примере мы добавили один сервер с именем firebase , который будет использовать команду npx для установки и запуска firebase-tools@latest . Для других MCP-серверов требуются другие конфигурации, но они соответствуют тому же общему формату .

  3. В терминале ( Shift+Ctrl+C ) выполните все необходимые команды для завершения установки. Например, чтобы использовать сервер Firebase MCP, введите следующую команду для входа в свою учётную запись:

    firebase login --no-localhost

    Следуйте инструкциям в терминале, чтобы авторизовать сеанс. Для некоторых инструментов требуется подключенный проект Firebase. Вы можете использовать сервер Firebase MCP для создания проекта или выполнить следующую команду для инициализации проекта Firebase:

    firebase init

    Это создаст файл firebase.json в корневом каталоге.

  4. Перестройте свое рабочее пространство, чтобы завершить настройку:

    1. Откройте палитру команд ( Shift+Ctrl+P ).

    2. Войдите в Firebase Studio: перестройте среду .

Используйте инструменты MCP

После установки сервера MCP, который вы хотите использовать, предоставляемые им инструменты или данные будут доступны в:

  • Gemini CLI
  • Gemini в чате Firebase при использовании режима агента и режимов агента (автоматического запуска)
  • App Prototyping agent

Например, если вы добавите сервер Firebase MCP, вы можете попросить Gemini загрузить конфигурацию SDK для текущего проекта, извлечь данные, хранящиеся в Cloud Firestore и Realtime Database , помочь вам настроить службы Firebase и многое другое .

Устранение неполадок серверов MCP

Если сервер MCP не работает должным образом, откройте логи Gemini и проверьте наличие ошибок:

  1. В окне «Выход» ( Shift+Ctrl+U ) щелкните раскрывающееся меню и выберите Gemini .

  2. Проверьте наличие сообщений, начинающихся с тега [MCPManager] . Эти журналы содержат информацию о настроенных серверах MCP, а также сообщения об ошибках. Используйте эту информацию для устранения неполадок в вашей конфигурации. После успешного подключения сервера MCP вы увидите список добавленных им инструментов.

Попробуйте перестроить рабочее пространство, если сервер MCP не устанавливается или не подключается:

  1. Откройте палитру команд ( Shift+Ctrl+P ).

  2. Войдите в Firebase Studio: перестройте среду .

  3. Дождитесь восстановления вашего рабочего пространства, а затем снова попробуйте использовать выбранный вами сервер MCP.

Если сервер MCP подключается, но Gemini не использует предоставляемые им инструменты:

Следующие шаги