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

• 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 파일로 다운로드하려면 다음 안내를 따르세요.

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

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

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

2. 기본 /home/user 디렉터리를 허용합니다.

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

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

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

다음 단계

• Firebase 및 Google 서비스와 통합
• 맞춤 템플릿을 만듭니다.
• Firebase Studio에서 열기 버튼을 추가합니다.
• Firebase Studio작업공간에 대해 자세히 알아보세요.