Tuỳ chỉnh không gian làm việc Firebase Studio

Firebase Studio cho phép bạn điều chỉnh không gian làm việc theo nhu cầu riêng của dự án bằng cách xác định một tệp cấu hình .idx/dev.nix duy nhất mô tả:

  • Các công cụ hệ thống mà bạn cần để có thể chạy (ví dụ: từ Terminal), chẳng hạn như trình biên dịch hoặc các tệp nhị phân khác.
  • Các tiện ích mà bạn cần cài đặt (ví dụ: hỗ trợ ngôn ngữ lập trình).
  • Cách bản xem trước ứng dụng sẽ xuất hiện (ví dụ: các lệnh để chạy máy chủ web).
  • Các biến môi trường chung có sẵn cho các máy chủ cục bộ chạy trong không gian làm việc của bạn.

Hãy xem tài liệu tham khảo dev.nixđể biết nội dung mô tả đầy đủ về những gì có sẵn.

Nix và Firebase Studio

Firebase Studio sử dụng Nix để xác định cấu hình môi trường cho từng không gian làm việc. Cụ thể, Firebase Studio sử dụng:

  • Ngôn ngữ lập trình Nix để mô tả môi trường không gian làm việc. Nix là một ngôn ngữ lập trình hàm. Các thuộc tính và thư viện gói mà bạn có thể xác định trong tệp dev.nix tuân theo cú pháp tập hợp thuộc tính Nix.

  • Trình quản lý gói Nix để quản lý các công cụ hệ thống có sẵn cho không gian làm việc của bạn. Trình quản lý này tương tự như các trình quản lý gói dành riêng cho hệ điều hành, chẳng hạn như APT (apt và apt-get), Homebrew (brew), và dpkg.

Vì môi trường Nix có thể tái tạo và khai báo, nên trong bối cảnh của Firebase Studio, điều này có nghĩa là bạn có thể chia sẻ tệp cấu hình Nix dưới dạng một phần của kho lưu trữ Git để đảm bảo rằng mọi người làm việc trên dự án của bạn đều có cùng cấu hình môi trường.

Ví dụ cơ bản

Ví dụ sau đây cho thấy cấu hình môi trường cơ bản cho phép xem trước:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-24.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";
      };
    };
  };
}

Thêm công cụ hệ thống

Để thêm các công cụ hệ thống vào không gian làm việc của bạn, chẳng hạn như trình biên dịch hoặc chương trình CLI cho các dịch vụ đám mây, hãy tìm mã gói duy nhất trong sổ đăng ký gói Nix rồi thêm mã đó vào đối tượng packages của tệp dev.nix, có tiền tố `pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-24.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

Cách này khác với cách bạn thường cài đặt các gói hệ thống bằng các trình quản lý gói dành riêng cho hệ điều hành, chẳng hạn như APT (apt và apt-get), Homebrew (brew) và dpkg. Việc mô tả chính xác các gói hệ thống cần thiết một cách khai báo có nghĩa là Firebase Studio không gian làm việc dễ chia sẻ và tái tạo hơn.

Sử dụng tệp nhị phân nút cục bộ

Giống như trên máy cục bộ, các tệp nhị phân liên quan đến các gói nút được cài đặt cục bộ (ví dụ: các gói được xác định trong package.json) có thể được thực thi trong bảng điều khiển Terminal bằng cách gọi chúng bằng lệnh npx.

Để thuận tiện hơn, nếu bạn đang ở trong một thư mục có thư mục node_modules (chẳng hạn như thư mục gốc của một dự án web), thì các tệp nhị phân được cài đặt cục bộ có thể được gọi trực tiếp mà không cần tiền tố npx.

Thêm thành phần gcloud

Cấu hình mặc định của gcloud CLI cho Google Cloud có sẵn cho tất cả không gian làm việc Firebase Studio.

Nếu cần thêm thành phần, bạn có thể thêm các thành phần đó vào tệp dev.nix:

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

Thêm tiện ích IDE

Bạn có thể cài đặt tiện ích trong Firebase Studio bằng OpenVSX sổ đăng ký tiện ích theo 2 cách:

  • Sử dụng bảng điều khiển Tiện ích trong Firebase Studio để khám phá và cài đặt tiện ích. Phương pháp này phù hợp nhất cho tiện ích dành riêng cho người dùng, chẳng hạn như:

    • Chủ đề màu sắc tuỳ chỉnh
    • Trình mô phỏng trình chỉnh sửa, như VSCodeVim

  • Thêm tiện ích vào tệp dev.nix của bạn. Các tiện ích này sẽ tự động được cài đặt khi bạn chia sẻ cấu hình không gian làm việc. Phương pháp này phù hợp nhất cho tiện ích dành riêng cho dự án, chẳng hạn như:

    • Tiện ích ngôn ngữ lập trình, bao gồm cả trình gỡ lỗi dành riêng cho ngôn ngữ
    • Tiện ích chính thức cho các dịch vụ đám mây được dùng trong dự án của bạn
    • Trình định dạng mã

Đối với phương pháp sau, bạn có thể đưa tiện ích IDE vào tệp dev.nix bằng cách tìm mã tiện ích đủ điều kiện (có dạng <publisher>.<id>) rồi thêm mã đó vào đối tượng idx.extensions như sau:

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

Thêm các dịch vụ phổ biến

Firebase Studio cũng cung cấp quy trình thiết lập và cấu hình đơn giản cho các dịch vụ phổ biến mà bạn có thể cần trong quá trình phát triển, bao gồm:

  • Vùng chứa
    • Docker (services.docker.*)
  • Nhắn tin
    • Trình mô phỏng Pub/Sub (services.pubsub.*)
  • Cơ sở dữ liệu
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Để biết thông tin chi tiết về cách bật các dịch vụ này trong không gian làm việc, hãy xem các services.* phần của tài liệu tham khảo dev.nix.

Tuỳ chỉnh bản xem trước

Để biết thông tin chi tiết về cách tuỳ chỉnh bản xem trước ứng dụng, hãy xem bài viết Xem trước ứng dụng.

Đặt biểu tượng không gian làm việc

Bạn có thể chọn một biểu tượng tuỳ chỉnh cho không gian làm việc bằng cách đặt một tệp PNG có tên icon.png bên trong thư mục .idx ở cùng cấp với tệp dev.nix. Firebase Studio sau đó sẽ sử dụng biểu tượng này để biểu thị không gian làm việc của bạn trong trang tổng quan.

Vì tệp này có thể được kiểm tra vào hệ thống kiểm soát nguồn (chẳng hạn như Git), nên đây là một cách hay để giúp mọi người làm việc trên dự án của bạn thấy cùng một biểu tượng cho dự án khi sử dụng Firebase Studio. Và vì tệp này có thể khác nhau trên các nhánh Git, nên bạn có thể sử dụng biểu tượng này để phân biệt trực quan giữa không gian làm việc của ứng dụng beta và ứng dụng chính thức cũng như cho các mục đích khác.

Biến các nội dung tuỳ chỉnh thành một mẫu

Để biến cấu hình môi trường thành "môi trường khởi động" mà bất kỳ ai có thể sử dụng để xây dựng dự án mới, hãy xem tài liệu về Tạo mẫu tuỳ chỉnh.

Khám phá tất cả các lựa chọn tuỳ chỉnh

Hãy xem tài liệu tham khảo dev.nix để biết nội dung mô tả chi tiết về lược đồ cấu hình môi trường.

Tải các tệp của bạn xuống

Cách tải các tệp xuống dưới dạng tệp ZIP:

  • Nhấp chuột phải vào bất kỳ thư mục nào trong ngăn Explorer (Trình khám phá) rồi chọn Zip and Download (Nén và tải xuống).

Cách tải mọi thứ trong thư mục dự án xuống:

  1. Chọn File > Open Folder (Tệp > Mở thư mục).

  2. Chấp nhận thư mục /home/user mặc định.

  3. Sau khi các tệp tải xong, hãy nhấp chuột phải vào thư mục đang làm việc rồi chọn Zip and Download (Nén và tải xuống). Nếu sử dụng App Prototyping agent, thư mục đang làm việc của bạn sẽ là studio. Nếu sử dụng một mẫu hoặc dự án đã tải lên, thì đây sẽ là tên dự án của bạn.

  4. Khi được nhắc xây dựng lại môi trường, hãy nhấp vào Cancel (Huỷ).

  5. Sau khi quá trình tải xuống hoàn tất, hãy mở lại thư mục đang làm việc từ trình đơn File (Tệp) để quay lại không gian làm việc.

Các bước tiếp theo