Memantau dan melindungi aplikasi web

Setelah memublikasikan aplikasi, Anda harus memantau dan mengamankannya:

• Jika memublikasikan dengan Firebase Hosting, Anda dapat menautkan project Firebase ke Cloud Logging untuk memantau penggunaan dan mengakses log permintaan web. Pelajari lebih lanjut di Melihat, menelusuri, dan memfilter log permintaan web dengan Cloud Logging.

• Jika menggunakan App Prototyping agent untuk memublikasikan dengan Firebase App Hosting, Anda dapat menggunakan fitur kemampuan observasinya untuk memantau performa situs. Anda juga dapat menulis log ke Cloud Logging dan melihat log serta metrik di Firebase console.

• Jika menggunakan AI di aplikasi dengan Genkit, Anda dapat memantau cara fitur AI generatif berjalan dalam produksi.

• Jika aplikasi Anda menyertakan layanan Firebase, amankan dengan Firebase App Check.

Memantau performa situs Anda dengan kemampuan observasi App Hosting

Panel App overview di Firebase Studio memberikan metrik dan informasi penting tentang aplikasi Anda, sehingga Anda dapat memantau performa aplikasi web menggunakan alat kemampuan observasi bawaan App Hosting. Setelah situs diluncurkan, Anda dapat mengakses ringkasan dengan mengklik Publish. Dari panel ini, Anda dapat:

• Mengklik Publish untuk merilis versi baru aplikasi Anda.
• Membagikan link ke aplikasi Anda atau membuka aplikasi Anda secara langsung di Visit your app.
• Meninjau ringkasan performa aplikasi Anda selama 7 hari terakhir, termasuk jumlah total permintaan dan status peluncuran terbaru Anda. Mengklik View details untuk mengakses informasi selengkapnya di Firebase console.
• Melihat grafik jumlah permintaan yang diterima aplikasi Anda selama 24 jam terakhir, yang dikelompokkan menurut kode status HTTP.

Jika menutup panel App overview, Anda dapat membukanya kembali kapan saja dengan mengklik Publish.

Pelajari lebih lanjut cara mengelola dan memantau peluncuran App Hosting di Mengelola peluncuran dan rilis.

Genkit Monitoring untuk fitur Anda yang di-deploy

Anda dapat memantau langkah, input, dan output fitur Genkit dengan mengaktifkan telemetri ke kode flow AI. Fitur telemetri Genkit memungkinkan Anda memantau performa dan penggunaan flow AI. Data ini dapat membantu Anda mengidentifikasi area yang perlu ditingkatkan, memecahkan masalah, mengoptimalkan perintah dan flow untuk performa dan efisiensi biaya yang lebih baik, serta melacak penggunaan flow Anda dari waktu ke waktu.

Untuk menyiapkan pemantauan di Genkit, tambahkan telemetri ke flow AI Genkit, lalu lihat hasilnya di Firebase console.

Penting: Genkit Monitoring mengandalkan data telemetri yang ditulis ke Google Cloud Logging, Metrics, dan Trace, yang merupakan layanan berbayar. Lihat halaman Harga Google Cloud Observability untuk mengetahui detail harga dan mempelajari batas paket gratis.

Langkah 1: Tambahkan telemetri ke kode flow Genkit di Firebase Studio

Untuk menyiapkan pemantauan dalam kode Anda:

1. Jika Anda belum berada dalam tampilan Code, klik Switch to Code untuk membukanya.

2. Periksa package.json untuk memverifikasi versi Genkit yang diinstal.

3. Buka terminal (Ctrl-Shift-C, atau Cmd-Shift-C di MacOS).

4. Klik di dalam terminal dan instal plugin Firebase, menggunakan versi yang cocok dengan file package.json Anda. Misalnya, jika paket Genkit di package.json Anda memiliki versi 1.0.4, Anda harus menjalankan perintah berikut untuk menginstal plugin:

   npm i --save @genkit-ai/firebase@1.0.4

5. Dari Explorer, luaskan src > ai > flows. Satu atau beberapa file TypeScript yang berisi flow Genkit Anda akan muncul di folder flows.

6. Klik salah satu flow untuk membukanya.

   Tips: Perhatikan bagian prompt file: Anda dapat mengeditnya secara manual untuk meningkatkan kualitas respons Gemini.

7. Di bagian bawah bagian impor file, tambahkan kode berikut untuk mengimpor dan mengaktifkan FirebaseTelemetry:

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

   Tips: Untuk mempelajari lebih lanjut opsi telemetri lanjutan di Genkit, lihat Konfigurasi lanjutan.

Langkah 2: Siapkan izin

Firebase Studio mengaktifkan API yang diperlukan untuk Anda saat menyiapkan project Firebase, tetapi Anda juga perlu memberikan izin ke akun layanan App Hosting.

Untuk menyiapkan izin:

1. Buka konsol IAM Google Cloud, pilih project Anda, lalu berikan peran berikut ke App Hosting service account:

   • Monitoring Metric Writer (roles/monitoring.metricWriter)
   • Cloud Trace Agent (roles/cloudtrace.agent)
   • Logs Writer (roles/logging.logWriter)

2. Publikasikan ulang aplikasi Anda ke App Hosting.

3. Setelah publikasi selesai, muat dan mulai gunakan aplikasi Anda. Setelah lima menit, aplikasi Anda akan memulai logging data telemetri.

Langkah 3: Pantau fitur AI generatif Anda di Firebase console

Saat telemetri dikonfigurasi, Genkit mencatat jumlah permintaan, keberhasilan, dan latensi untuk semua flow Anda, dan, untuk setiap flow tertentu, Genkit mengumpulkan metrik stabilitas, menampilkan grafik mendetail, dan membuat log pelacakan yang diambil.

Untuk memantau fitur AI yang diimplementasikan dengan Genkit:

1. Setelah lima menit, buka Genkit di Firebase console dan tinjau perintah serta respons Genkit.

   Genkit mengompilasi Stability metrics berikut:

   • Total requests: Total jumlah permintaan yang diterima oleh flow Anda.
   • Success rate: Persentase permintaan yang berhasil diproses.
   • 95th percentile latency: Latensi persentil ke-95 dari flow Anda, yang merupakan waktu yang diperlukan untuk memproses 95% permintaan.

   • Token usage:

     • Input tokens: Jumlah token yang dikirim ke model dalam perintah.
     • Output tokens: Jumlah token yang dihasilkan oleh model dalam respons.

   • Image usage:

     • Input images: Jumlah gambar yang dikirim ke model dalam perintah.
     • Output images: Jumlah gambar yang dihasilkan oleh model dalam respons.

   Jika Anda meluaskan Stability metrics, grafik mendetail akan tersedia:

   • Volume permintaan dari waktu ke waktu.
   • Rasio keberhasilan dari waktu ke waktu.
   • Token input dan output dari waktu ke waktu.
   • Latensi (persentil ke-95 dan 50) dari waktu ke waktu.

Pelajari lebih lanjut Genkit di Genkit.

Melindungi aplikasi Anda dengan Firebase App Check

Jika Anda telah mengintegrasikan layanan Firebase atau Google Cloud ke dalam aplikasi, Firebase App Check membantu melindungi backend aplikasi Anda dari penyalahgunaan dengan mencegah klien yang tidak berkepentingan mengakses resource Firebase Anda. Fitur ini berfungsi dengan layanan Google (termasuk layanan Firebase dan Google Cloud) dan backend kustom Anda sendiri untuk menjaga keamanan resource Anda.

Sebaiknya tambahkan App Check ke aplikasi apa pun yang Anda posting secara publik untuk melindungi resource backend Anda dari penyalahgunaan.

Bagian ini akan memandu Anda menyiapkan App Check dalam Firebase Studio menggunakan reCAPTCHA Enterprise untuk aplikasi web yang dibuat oleh App Prototyping agent, tetapi Anda dapat menyiapkan App Check dalam aplikasi apa pun yang menerapkan layanan Firebase dan dapat menerapkan penyedia kustom. Pelajari lebih lanjut di Firebase App Check.

ReCAPTCHA Enterprise menyediakan hingga 10.000 penilaian tanpa biaya.

Langkah 1: Siapkan reCAPTCHA Enterprise untuk aplikasi Anda

1. Buka bagian reCAPTCHA Enterprise di Google Cloud console.

2. Pilih nama project Firebase Anda dari pemilih project Google Cloud console.

3. Jika Anda diminta untuk mengaktifkan reCAPTCHA Enterprise API, lakukan hal tersebut.

4. Klik Get started, lalu tambahkan Display name untuk kunci situs reCAPTCHA Anda.

5. Terima kunci Application type Web default.

6. Klik Add a domain, lalu tambahkan domain. Sebaiknya tambahkan domain App Hosting (misalnya, studio--PROJECT_ID.REGION.hosted.app) dan domain kustom apa pun yang Anda gunakan dengan atau berencana untuk digunakan dengan aplikasi Anda.

7. Klik Next step.

8. Jangan pilih Will you use challenges?.

9. Klik Create key.

10. Salin dan simpan Key ID Anda, lalu lanjutkan ke Configure App Check.

Langkah 2: Konfigurasikan App Check

1. Buka Firebase console, lalu klik Build > App Check dari menu navigasi.

2. Klik Get Started, lalu klik Register di samping aplikasi Anda.

3. Klik untuk meluaskan ReCAPTCHA dan tempelkan ID Kunci yang Anda buat untuk reCAPTCHA Enterprise.

4. Klik Simpan.

Langkah 3: Tambahkan App Check ke kode Anda

1. Kembali ke Firebase Studio dan dalam tampilan Code, tambahkan kunci situs yang Anda buat ke file .env:

   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

2. Jika Anda belum menyimpan konfigurasi Firebase ke .env, dapatkan konfigurasi tersebut:

   • Dari Firebase console, buka Project settings dan temukan dalam bagian yang sesuai dengan aplikasi Anda.

   • Dari Terminal dalam tampilan Code:

     1. Login ke Firebase: firebase auth login
     2. Pilih project Anda: firebase use FIREBASE_PROJECT_ID
     3. Dapatkan konfigurasi Firebase: firebase apps:sdkconfig

3. Tambahkan konfigurasi ke file .env Anda sehingga terlihat seperti berikut:

   NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
   NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

4. Tambahkan App Check ke kode aplikasi Anda. Anda dapat meminta Gemini untuk menambahkan App Check dengan reCAPTCHA Enterprise ke aplikasi Anda (pastikan untuk menentukan "reCAPTCHA Enterprise" dan pastikan untuk memeriksanya kembali), atau mengikuti langkah-langkah di Melakukan inisialisasi App Check.

5. Publikasikan ulang situs Anda ke App Hosting. Coba uji fitur Firebase Anda untuk menghasilkan beberapa data.

6. Pastikan App Check menerima permintaan di Firebase console dengan membuka Build > App Check.

7. Klik untuk memeriksa layanan Firebase. Setelah memverifikasi bahwa permintaan telah diterima, klik Enforce untuk menerapkan App Check.

8. Ulangi verifikasi dan penerapan untuk Firebase Authentication.

Jika Anda telah mendaftarkan aplikasi untuk App Check dan ingin menjalankan aplikasi di lingkungan yang biasanya tidak akan diklasifikasikan sebagai valid oleh App Check, seperti secara lokal selama pengembangan atau dari lingkungan continuous integration (CI), Anda dapat membuat build debug aplikasi yang menggunakan penyedia debug App Check, bukan penyedia pengesahan sungguhan. Pelajari lebih lanjut di Menggunakan App Check dengan penyedia debug di aplikasi web.

Langkah berikutnya

• Menyesuaikan ruang kerja Anda Firebase Studio.

• Mengembangkan, memublikasikan, dan memantau aplikasi web full stack dengan App Prototyping agent.