Ta strona została przetłumaczona przez Cloud Translation API.

Dostosowywanie obszaru roboczego Firebase Studio

Firebase Studio umożliwia dostosowanie obszaru roboczego do unikalnych potrzeb projektu przez zdefiniowanie jednego pliku konfiguracji .idx/dev.nix, który opisuje:

Narzędzia systemowe, które musisz mieć możliwość uruchomienia (np. z poziomu terminala), takie jak kompilatory lub inne pliki binarne.
Rozszerzenia, które musisz zainstalować (np. obsługa języka programowania).
Jak powinny wyglądać wersje demonstracyjne aplikacji (np. polecenia uruchamiające serwer WWW).
Globalne zmienne środowiskowe dostępne dla serwerów lokalnych działających w Twojej przestrzeni roboczej.

Pełny opis dostępnych funkcji znajdziesz w dev.nix.

Nix i Firebase Studio

Firebase Studio używa Nixa do definiowania konfiguracji środowiska dla każdego obszaru roboczego. W szczególności usługaFirebase Studio korzysta z:

język programowania Nix do opisywania środowisk obszaru roboczego. Nix to język programowania funkcyjnego. Atrybuty i biblioteki pakietów, które możesz zdefiniować w pliku dev.nix, są zgodne z składnią zestawu atrybutów Nix.
Menedżer pakietów Nix do zarządzania narzędziami systemowymi dostępnymi w przestrzeni roboczej. Działa podobnie jak menedżery pakietów specyficzne dla systemu operacyjnego, takie jak APT (apt i apt-get), Homebrew (brew) i dpkg.

Środowiska Nix są odtwarzalne i deklaratywne, co w kontekście Firebase Studio oznacza, że możesz udostępniać plik konfiguracyjny Nix w ramach repozytorium Git, aby mieć pewność, że każda osoba pracująca nad projektem ma taką samą konfigurację środowiska.

Podstawowy przykład

Poniższy przykład pokazuje podstawową konfigurację środowiska, która umożliwia wyświetlanie podglądów:

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

Dodawanie narzędzi systemowych

Aby dodać do obszaru roboczego narzędzia systemowe, takie jak kompilatory lub programy CLI do usług w chmurze, znajdź unikalny identyfikator pakietu w rejestrze pakietów Nix i dodaj go do obiektu packages w pliku dev.nix, poprzedzając go ciągiem znaków „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
  ];
  ...
}

Różni się to od sposobu instalowania pakietów systemowych za pomocą menedżerów pakietów specyficznych dla systemu operacyjnego, takich jak APT (apt i apt-get), Homebrew (brew) i dpkg. Deklaratywne opisywanie, które pakiety systemowe są potrzebne, oznacza, że Firebase Studio obszary robocze są łatwiejsze do udostępniania i odtwarzania.

Używanie lokalnych plików binarnych węzła

Podobnie jak na komputerze lokalnym, pliki binarne powiązane z lokalnie zainstalowanymi pakietami węzłów (np. pakietami zdefiniowanymi w package.json) można wykonywać w panelu terminala, wywołując je za pomocą polecenia npx.

Dodatkowo, jeśli znajdujesz się w katalogu z folderem node_modules (np. w katalogu głównym projektu internetowego), możesz bezpośrednio wywoływać zainstalowane lokalnie pliki binarne bez przedrostka npx.

Dodawanie komponentów `gcloud`

Domyślna konfiguracja interfejsu gcloud CLI dla Google Cloud jest dostępna we wszystkich obszarach roboczych Firebase Studio.

Jeśli potrzebujesz dodatkowych komponentów, możesz dodać je do pliku dev.nix:

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

Dodawanie rozszerzeń IDE

Rozszerzenia w Firebase Studio możesz zainstalować na 2 sposoby, korzystając z rejestru rozszerzeń OpenVSX:

Użyj panelu Rozszerzenia w Firebase Studio, aby odkrywać i instalować rozszerzenia. To podejście jest najlepsze w przypadku rozszerzeń przeznaczonych dla konkretnych użytkowników, takich jak:
- Niestandardowe motywy kolorystyczne
- Emulacja edytora, np. VSCodeVim
Dodaj rozszerzenia do pliku dev.nix. Te rozszerzenia zostaną zainstalowane automatycznie, gdy udostępnisz konfigurację obszaru roboczego. To podejście jest najlepsze w przypadku rozszerzeń związanych z konkretnym projektem, takich jak:
- rozszerzenia języków programowania, w tym debugery specyficzne dla danego języka;
- Oficjalne rozszerzenia usług w chmurze używanych w projekcie
- Formatowanie kodu

W przypadku tego drugiego podejścia możesz uwzględnić rozszerzenia IDE w pliku dev.nix, wyszukując w nim w tym celu w pełni kwalifikowany identyfikator rozszerzenia (w formacie <publisher>.<id>) i dodając go do obiektu idx.extensions w ten sposób:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

Dodawanie typowych usług

Firebase Studio oferuje też uproszczoną konfigurację popularnych usług, które mogą być potrzebne podczas programowania, takich jak:

Kontenery
- Docker (services.docker.*)
Wiadomości
- Emulator Pub/Sub (services.pubsub.*)
Bazy danych
- MySQL (services.mysql.*)
- Postgres (services.postgres.*)
- Redis (services.redis.*)
- Spanner (services.spanner.*)

Szczegółowe informacje o włączaniu tych usług w przestrzeni roboczej znajdziesz w services.*dev.nix.

Dostosowywanie podglądów

Szczegółowe informacje o dostosowywaniu podglądów aplikacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.

Ustawianie ikony obszaru roboczego

Możesz wybrać niestandardową ikonę obszaru roboczego, umieszczając plik PNG o nazwie icon.png w katalogu .idx na tym samym poziomie co plik dev.nix. Firebase Studio użyje tej ikony do reprezentowania Twojego obszaru roboczego na panelu.

Ponieważ ten plik można sprawdzić w systemie kontroli wersji (np. Git), jest to dobry sposób, aby wszyscy pracujący nad projektem widzieli tę samą ikonę projektu podczas korzystania z Firebase Studio. Plik może się różnić w zależności od gałęzi Git, więc możesz użyć tej ikony, aby wizualnie odróżnić obszary robocze aplikacji w wersji beta i produkcyjnej oraz w innych celach.

Przekształcanie dostosowań w szablon

Aby przekształcić konfigurację środowiska w „środowisko startowe”, z którego każdy może korzystać do tworzenia nowych projektów, zapoznaj się z dokumentacją dotyczącą tworzenia szablonów niestandardowych.

Poznaj wszystkie opcje dostosowywania

Szczegółowy opis schematu konfiguracji środowiska znajdziesz w dev.nix tym artykule.

Pobieranie plików

Aby pobrać pliki jako plik ZIP:

Kliknij prawym przyciskiem myszy dowolny katalog w panelu Eksplorator i wybierz Spakuj i pobierz.

Aby pobrać wszystko z katalogu projektu:

Wybierz Plik > Otwórz folder.
Zaakceptuj domyślny katalog /home/user.
Po załadowaniu plików kliknij prawym przyciskiem myszy katalog roboczy i wybierz Spakuj i pobierz. Jeśli używasz App Prototyping agent, katalogiem roboczym będzie studio. Jeśli używasz szablonu lub przesłanego projektu, będzie to nazwa Twojego projektu.
Gdy pojawi się prośba o ponowne utworzenie środowiska, kliknij Anuluj.
Po zakończeniu pobierania otwórz ponownie katalog roboczy z menu Plik, aby wrócić do obszaru roboczego.