Genkit dengan Cloud Functions for Firebase

Firebase Genkit menyertakan plugin yang membantu Anda men-deploy alur ke Firebase Cloud Functions. Halaman ini, sebagai contoh, akan memandu Anda melalui proses men-deploy alur sampel 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 ).

    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 {i>Functions<i}.

  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.

    Terima setelan default untuk prompt yang tersisa. Alat genkit akan membuat beberapa contoh file sumber untuk membantu Anda mulai mengembangkan alur AI Anda sendiri. Namun, untuk bagian selanjutnya dari tutorial ini, Anda hanya akan men-deploy contoh flow.

  6. Sediakan kredensial API untuk Cloud Function Anda. Tergantung pada penyedia model yang Anda pilih, lakukan salah satu hal berikut ini:

    Gemini (AI Google)

    1. Pastikan AI Google tersedia di wilayah Anda.

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

    3. Simpan kunci API Anda di Cloud Secret Manager:

      firebase functions:secrets:set GOOGLE_GENAI_API_KEY
      

      Langkah ini penting untuk mencegah kebocoran kunci API secara tidak sengaja, yang memberikan akses ke layanan yang berpotensi diukur.

      Lihat Menyimpan dan mengakses informasi konfigurasi yang sensitif untuk informasi lebih lanjut tentang cara mengelola secret.

    4. Edit src/index.ts dan tambahkan hal berikut setelah impor yang ada:

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

      Kemudian, pada definisi flow, deklarasikan bahwa fungsi cloud membutuhkan akses ke nilai secret ini:

      export const menuSuggestionFlow = onFlow(
        {
          name: "menuSuggestionFlow",
          // ...
          httpsOptions: {
            secrets: [googleAIapiKey],  // Add this line.
          },
        },
        async (subject) => {
          // ...
        }
      );
      

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

    Gemini (Vertex AI)

    1. Di konsol Cloud, Mengaktifkan Vertex AI API untuk project Firebase Anda.

    2. Pada halaman IAM, pastikan bahwa Akun layanan komputasi default diberikan peran Vertex AI User.

    Satu-satunya secret yang perlu Anda siapkan untuk tutorial ini adalah untuk penyedia model, tetapi secara umum, Anda harus melakukan hal serupa untuk setiap layanan yang digunakan oleh 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 untuk tutorial ini.

  8. Opsional: Coba flow Anda di UI developer:

    1. Menyediakan kredensial API secara lokal. Lakukan salah satu hal berikut, bergantung pada penyedia model yang Anda pilih:

      Gemini (AI Google)

      Tetapkan variabel lingkungan GOOGLE_GENAI_API_KEY ke kunci Anda:

      export GOOGLE_GENAI_API_KEY=<your API key>
      

      Gemini (Vertex AI)

      Tetapkan beberapa variabel lingkungan tambahan dan gunakan metode Alat gcloud untuk disiapkan kredensial default aplikasi secara lokal:

      export GCLOUD_PROJECT=<your project ID>
      export GCLOUD_LOCATION=us-central1
      gcloud auth application-default login
      
    2. Mulai UI:

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

      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. Tapi, Anda tidak akan dapat mengakses endpoint yang di-deploy dengan curl atau yang serupa, karena metode kebijakan otorisasi. Lanjutkan ke bagian berikutnya untuk mempelajari cara mengamankan untuk mengakses alurnya.

Mencoba alur yang di-deploy

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

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 ke yang terdaftar pengguna aplikasi Anda dengan alamat email yang telah diverifikasi. Di sisi klien, Anda perlu tetapkan header Authorization: Bearer ke token ID Firebase yang memenuhi kebijakan Anda. SDK klien Cloud Functions menyediakan fungsi callable yang mengotomatisasi ini.

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

  1. Di kolom Setelan project Firebase console, tambahkan aplikasi web baru, pilih opsi untuk juga menyiapkan Hosting.

  2. Di kolom Autentikasi di Firebase console, aktifkan penyedia Google, yang bisa 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 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 mengaktifkan/menonaktifkan "Dev/Prod" {i>switch<i}. Saat dialihkan ke "prod" proses tersebut akan memuat trace dari firestore.