Genkit dengan Firebase Cloud Functions

Firebase Genkit menyertakan plugin yang membantu Anda men-deploy alur ke Firebase Cloud Functions. Halaman ini, sebagai contoh, akan memandu Anda dalam proses men-deploy alur contoh default ke Firebase.

Men-deploy flow sebagai Cloud Function

  1. Instal alat yang diperlukan:

    1. Pastikan Anda menggunakan Node.js versi 20 atau yang lebih baru (jalankan node --version untuk memeriksanya).

    2. Instal Firebase CLI.

  2. Buat project Firebase baru menggunakan Firebase console atau pilih yang sudah ada.

    Upgrade project ke paket Blaze, yang diperlukan untuk men-deploy Cloud Functions.

  3. Login dengan Firebase CLI:

    firebase login
    firebase login --reauth # alternative, if necessary
    firebase login --no-localhost # if running in a remote shell
    
  4. Buat direktori project baru:

    export PROJECT_ROOT=~/tmp/genkit-firebase-project1
    mkdir -p $PROJECT_ROOT
    
  5. Lakukan inisialisasi project Firebase dengan Genkit di folder:

    cd $PROJECT_ROOT
    firebase init genkit
    
    • Pilih project yang Anda buat sebelumnya.
    • Pilih penyedia model yang ingin Anda gunakan.

    Setujui default untuk perintah yang tersisa. Alat genkit akan membuat beberapa contoh file sumber untuk membantu Anda mulai mengembangkan alur AI sendiri. Namun, untuk sisa tutorial ini, Anda hanya akan men-deploy contoh alur.

  6. Sediakan kredensial API untuk Cloud Function Anda. Lakukan salah satu tindakan berikut, bergantung pada penyedia model yang Anda pilih:

    Gemini (AI Google)

    1. Pastikan AI Google tersedia di wilayah Anda.

    2. Buat kunci API untuk Gemini API menggunakan Google AI Studio.

    3. Tetapkan variabel lingkungan GOOGLE_GENAI_API_KEY ke kunci Anda:

      export GOOGLE_GENAI_API_KEY=<your API key>
      
    4. Edit src/index.ts dan tambahkan hal berikut setelah impor yang ada:

    import {defineSecret} from "firebase-functions/params";
    defineSecret("GOOGLE_GENAI_API_KEY");
    

    Sekarang, saat Anda men-deploy fungsi ini, kunci API Anda akan disimpan di Cloud Secret Manager, dan tersedia dari lingkungan Cloud Functions.

    Gemini (Vertex AI)

    1. Di Konsol Cloud, Aktifkan Vertex AI API untuk project Firebase Anda.

    2. Di halaman IAM, pastikan bahwa Default compute service account diberi peran Vertex AI User.

    3. Opsional: Jika Anda ingin menjalankan flow secara lokal, seperti pada langkah berikutnya, tetapkan beberapa variabel lingkungan tambahan dan gunakan alat gcloud untuk menyiapkan kredensial default aplikasi:

      export GCLOUD_PROJECT=<your project ID>
      export GCLOUD_LOCATION=us-central1
      gcloud auth application-default login
      

    Satu-satunya secret yang perlu Anda siapkan untuk tutorial ini adalah untuk penyedia model, tetapi secara umum, Anda harus melakukan hal yang sama untuk setiap layanan yang digunakan flow Anda.

  7. Jika Anda akan mengakses alur dari aplikasi web (yang akan Anda lakukan di bagian berikutnya), pada parameter httpsOptions, tetapkan kebijakan CORS:

    export const menuSuggestionFlow = onFlow(
      {
        name: "menuSuggestionFlow",
        // ...
        httpsOptions: {cors: true}, // Add this line.
      },
      async (subject) => {
        // ...
      }
    );
    

    Anda mungkin menginginkan kebijakan yang lebih ketat untuk aplikasi produksi, tetapi hal ini akan berlaku untuk tutorial ini.

  8. Opsional: Coba alur Anda di UI developer:

    1. Mulai UI:

      cd $PROJECT_ROOT/functions
      genkit start
      
    2. Di UI developer (http://localhost:4000/), jalankan alurnya:

      1. Klik menuSuggestionFlow.

      2. Di tab Input JSON, berikan subjek untuk model:

        "AI app developers"
        
      3. Pada tab Auth JSON, berikan objek autentikasi yang disimulasikan:

        {
          "uid": 0,
          "email_verified": true
        }
        
      4. Klik Run.

  9. Jika semuanya berfungsi seperti yang diharapkan sejauh ini, Anda dapat men-deploy alurnya:

    cd $PROJECT_ROOT
    firebase deploy --only functions
    

Sekarang Anda telah men-deploy flow sebagai Cloud Function. Namun, Anda tidak akan dapat mengakses endpoint yang di-deploy dengan curl atau yang serupa, karena kebijakan otorisasi alur. Lanjutkan ke bagian berikutnya untuk mempelajari cara mengakses alur dengan aman.

Mencoba alur yang di-deploy

Setiap alur yang Anda deploy harus menetapkan kebijakan otorisasi. Tanpa perangkat tersebut, alur AI generatif Anda yang berpotensi mahal akan dapat dipanggil oleh siapa saja.

Alur contoh default memiliki kebijakan otorisasi seperti berikut:

firebaseAuth((user) => {
  if (!user.email_verified) {
    throw new Error('Verified email required to run flow');
  }
});

Kebijakan ini menggunakan helper firebaseAuth() untuk mengizinkan akses hanya bagi pengguna terdaftar aplikasi Anda dengan alamat email yang telah diverifikasi. Di sisi klien, Anda harus menetapkan header Authorization: Bearer ke token ID Firebase yang memenuhi kebijakan Anda. SDK klien Cloud Functions menyediakan metode fungsi callable yang mengotomatiskannya.

Untuk mencoba endpoint flow, Anda dapat men-deploy contoh aplikasi web minimal berikut:

  1. Di bagian Project settings di Firebase console, tambahkan aplikasi web baru, dengan memilih opsi untuk menyiapkan Hosting juga.

  2. Di bagian Authentication di Firebase console, aktifkan penyedia Google, yang akan Anda gunakan dalam contoh ini.

  3. Di direktori project, siapkan Firebase Hosting, tempat Anda akan men-deploy aplikasi contoh:

    cd $PROJECT_ROOT
    firebase init hosting
    

    Setujui setelan default untuk semua perintah.

  4. Ganti public/index.html dengan yang berikut:

    <!doctype html>
    <html>
      <head>
        <title>Genkit demo</title>
      </head>
      <body>
        <div id="signin" hidden>
          <button id="signinBtn">Sign in with Google</button>
        </div>
        <div id="callGenkit" hidden>
          Subject: <input type="text" id="subject" />
          <button id="suggestMenuItem">Suggest a menu theme</button>
          <p id="menuItem"></p>
        </div>
        <script type="module">
          import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-app.js';
          import {
            getAuth,
            onAuthStateChanged,
            GoogleAuthProvider,
            signInWithPopup,
          } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-auth.js';
          import {
            getFunctions,
            httpsCallable,
          } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-functions.js';
    
          const firebaseConfig = await fetch('/__/firebase/init.json');
          initializeApp(await firebaseConfig.json());
    
          async function generateMenuItem() {
            const menuSuggestionFlow = httpsCallable(
              getFunctions(),
              'menuSuggestionFlow'
            );
            const subject = document.querySelector('#subject').value;
            const response = await menuSuggestionFlow(subject);
            document.querySelector('#menuItem').innerText = response.data;
          }
    
          function signIn() {
            signInWithPopup(getAuth(), new GoogleAuthProvider());
          }
    
          document
            .querySelector('#signinBtn')
            .addEventListener('click', signIn);
          document
            .querySelector('#suggestMenuItem')
            .addEventListener('click', generateMenuItem);
    
          const signinEl = document.querySelector('#signin');
          const genkitEl = document.querySelector('#callGenkit');
    
          onAuthStateChanged(getAuth(), (user) => {
            if (!user) {
              signinEl.hidden = false;
              genkitEl.hidden = true;
            } else {
              signinEl.hidden = true;
              genkitEl.hidden = false;
            }
          });
        </script>
      </body>
    </html>
    
  5. Deploy aplikasi web dan Cloud Function:

    cd $PROJECT_ROOT
    firebase deploy
    

Buka aplikasi web dengan membuka URL yang dicetak oleh perintah deploy. Aplikasi ini mengharuskan Anda login dengan Akun Google, setelah itu Anda dapat memulai permintaan endpoint.

Mengembangkan menggunakan Firebase Local Emulator Suite

Firebase menawarkan rangkaian emulator untuk pengembangan lokal, yang dapat Anda gunakan dengan Genkit.

Untuk menggunakan Genkit dengan Firebase Emulator Suite, mulai emulator Firebase seperti ini:

GENKIT_ENV=dev firebase emulators:start --inspect-functions

Ini akan menjalankan kode Anda di emulator dan menjalankan framework Genkit dalam mode pengembangan, yang meluncurkan dan mengekspos Genkit Refleksi API (tetapi bukan Dev UI).

Kemudian, luncurkan Genkit Dev UI dengan opsi --attach untuk menghubungkannya ke kode Anda yang berjalan di dalam Firebase Emulator:

genkit start --attach http://localhost:3100 --port 4001

Untuk melihat rekaman aktivitas dari Firestore di Dev UI, Anda dapat membuka tab Inspect dan mengganti tombol "Dev/Prod". Jika dialihkan ke "prod", pelacakan tersebut akan dimuat dari firestore.