Firebase Studio 작업공간 맞춤설정

Firebase Studio를 사용하면 다음을 설명하는 단일 .idx/dev.nix 구성 파일을 정의하여 프로젝트의 고유한 요구사항에 맞게 작업공간을 맞춤설정할 수 있습니다.

• 컴파일러나 기타 바이너리와 같이 실행(예: 터미널에서)할 수 있어야 하는 시스템 도구
• 설치해야 하는 확장 프로그램(예: 프로그래밍 언어 지원)
• 앱 미리보기가 표시되는 방식(예: 웹 서버를 실행하는 명령어)
• 작업공간에서 실행되는 로컬 서버에서 사용할 수 있는 전역 환경 변수

사용할 수 있는 기능에 대한 전체 설명은 dev.nix 참조를 확인하세요.

프로젝트에 .idx/mcp.json(Firebase의 Gemini용) 또는 .gemini/settings.json(Gemini CLI용) 파일을 추가하여 Firebase MCP 서버를 비롯한 Model Context Protocol(MCP) 서버에 연결할 수도 있습니다.

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의 컨텍스트에서 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 패키지 레지스트리에서 고유한 패키지 ID를 찾고 `pkgs. 프리픽스를 추가하여 dev.nix 파일의 packages 객체에 추가합니다.

{ 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 작업공간을 더 쉽게 공유하고 재현할 수 있습니다.

참고: channel 키는 사용할 Nix 패키지 레지스트리 채널을 지정합니다. unstable 채널을 사용하여 최신 버전의 패키지를 사용할 수 있지만 채널 이름에서 알 수 있듯이 작업공간을 시작하는 시점에 따라 환경이 빌드되지 않게 할 수 있습니다.

로컬 노드 바이너리 사용

로컬 머신에서와 마찬가지로 npx 명령어로 패키지를 호출하여 로컬에 설치된 노드 패키지와 관련된 바이너리(예: package.json에 정의된 패키지)를 터미널 패널에서 실행할 수 있습니다.

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에 확장 프로그램을 설치하는 방법에는 두 가지가 있습니다.

• Firebase Studio의 확장 프로그램 패널을 사용하여 확장 프로그램 검색 및 설치. 이 방식은 다음과 같은 사용자별 확장 프로그램에 가장 적합합니다.

  • 커스텀 색상 테마
  • 편집기 에뮬레이션(예: VSCodeVim)

• dev.nix 파일에 확장 프로그램 추가. 이러한 확장 프로그램은 작업공간 구성을 공유할 때 자동으로 설치됩니다. 이 방식은 다음과 같은 프로젝트별 확장 프로그램에 가장 적합합니다.

  • 언어별 디버거를 포함한 프로그래밍 언어 확장 프로그램
  • 프로젝트에서 사용되는 클라우드 서비스의 공식 확장 프로그램
  • 코드 형식 지정 도구

후자 방식을 사용하려면 정규화된 확장 프로그램 ID(<publisher>.<id> 형식)를 찾아 다음과 같이 idx.extensions 객체에 추가하여 dev.nix 파일에 IDE 확장 프로그램을 포함하면 됩니다.

{ 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 참조를 확인하세요.

파일 다운로드

파일을 ZIP 파일로 다운로드하려면 다음 안내를 따르세요.

• 탐색기 창에서 아무 디렉터리나 마우스 오른쪽 버튼으로 클릭하고 압축 및 다운로드를 선택합니다.

프로젝트 디렉터리의 모든 항목을 다운로드하려면 다음 안내를 따르세요.

1. 파일 > 폴더 열기를 선택합니다.

2. 기본 /home/user 디렉터리를 수락합니다.

3. 파일이 로드되면 작업 디렉터리를 마우스 오른쪽 버튼으로 클릭하고 압축 및 다운로드를 선택합니다. App Prototyping agent를 사용하는 경우 작업 디렉터리는 studio입니다. 템플릿이나 업로드된 프로젝트를 사용하는 경우에는 프로젝트 이름입니다.

4. 환경을 다시 빌드하라는 메시지가 표시되면 취소를 클릭합니다.

5. 다운로드가 완료되면 파일 메뉴에서 작업 디렉터리를 다시 열어 작업공간으로 돌아갑니다.

도움말: GitHub로 내보낼 수도 있습니다.

MCP 서버 사용

MCP 서버는 Gemini에서 사용할 수 있는 추가 도구와 데이터 소스를 제공합니다. 예를 들어 애플리케이션을 빌드하거나 디버깅하는 동안 Firebase MCP 서버를 추가하여 자연어를 사용하여 Cloud Firestore에서 데이터를 탐색할 수 있습니다.

주의: 작업공간에 MCP 서버를 추가하면 코드를 실행하고 앱을 수정할 수 있는 권한이 부여됩니다. 신뢰할 수 있는 소스의 MCP 서버만 추가하세요.

기본 요건

• MCP 서버에 필요한 경우 Node.js 및 npm이 설치되어 있고 작동하는지 확인합니다.

호환되는 MCP 서버 선택

Firebase Studio는 MCP 서버를 기본적으로 지원하므로 일부 MCP 서버는 호환되지 않습니다. Firebase Studio 작업공간에 추가할 MCP 서버를 선택할 때는 다음 사항에 유의하세요.

• 지원됨:
  • 특별한 형태의 인증이 필요하지 않은 표준 입력/출력(stdio) 또는 서버 전송 이벤트(SSE)/스트리밍 가능한 HTTP 전송 서버
  • MCP 서버에서 제공하는 도구
• 현재 지원되지 않음:
  • 그래픽 사용자 인터페이스 또는 데스크톱 세션이 필요한 서버
  • MCP 서버에서 제공하는 프롬프트, 샘플링 또는 기타 리소스

참고: .env 파일을 통해 환경 변수를 MCP 서버에 전달할 수 있습니다.

MCP 서버 추가

1. 탐색기 (Ctrl+Shift+E)에서 MCP 구성 파일을 수정하거나 만듭니다.

   • Firebase의 Gemini 채팅은 .idx/mcp.json을 사용합니다.

   • Gemini CLI는 .gemini/settings.json을 사용합니다.

   파일이 아직 없으면 상위 디렉터리를 마우스 오른쪽 버튼으로 클릭하고 새 파일을 선택하여 파일을 만듭니다. Firebase의 Gemini 및 Gemini CLI에서 MCP 서버를 사용하도록 두 파일을 모두 만들거나 수정합니다.

2. 파일의 콘텐츠에 서버 구성을 추가합니다. 예를 들어 Firebase MCP 서버를 추가하려면 다음을 입력합니다.

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

   이 구성 파일은 Gemini에 사용할 MCP 서버를 알려줍니다. 이 예에서는 npx 명령어를 사용하여 firebase-tools@latest를 설치하고 실행하는 firebase라는 서버를 하나 추가했습니다. 다른 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: Rebuild Environment를 입력합니다.

MCP 도구 사용

사용하려는 MCP 서버를 설치하면 이 서버에서 제공하는 도구나 데이터를 다음 위치에서 사용할 수 있습니다.

• Gemini CLI
• 에이전트 모드 및 에이전트(자동 실행) 모드 사용 시 Firebase의 Gemini 채팅
• 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: Rebuild Environment를 입력합니다.

3. 작업공간이 다시 빌드될 때까지 기다린 후 선택한 MCP 서버를 다시 사용해 보세요.

MCP 서버가 연결되지만 Gemini가 제공된 도구를 사용하지 않는 경우:

• 새 Gemini 채팅 세션 시작하기

• Gemini가 MCP 도구를 사용하지 않고 태스크를 완료할 수 있는 경우 다른 방법을 시도할 수 있습니다 특정 도구를 사용하려면 프롬프트에서 도구 이름을 지정해 보세요. 예를 들어 'firebase_get_sdk_config를 사용하여 현재 프로젝트의 SDK 구성을 가져와'라고 말할 수 있습니다.

• Google Developer Program 가입

다음 단계

• Firebase 및 Google 서비스 통합
• 커스텀 템플릿 만들기
• Firebase Studio에서 열기 버튼 추가
• Firebase Studio 작업공간 자세히 알아보기
• Firebase MCP 서버 자세히 알아보기
• Firebase Studio MCP 서버 Codelab 완료