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의 컨텍스트에서 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 작업공간을 더 쉽게 공유하고 재현할 수 있습니다.

로컬 노드 바이너리 사용

로컬 머신에서와 마찬가지로 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. 다운로드가 완료되면 파일 메뉴에서 작업 디렉터리를 다시 열어 작업공간으로 돌아갑니다.

다음 단계

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