ตรวจสอบและปกป้องเว็บแอป

หลังจากเผยแพร่แอปแล้ว คุณควรตรวจสอบและรักษาความปลอดภัยของแอปโดยทำดังนี้

ตรวจสอบประสิทธิภาพของเว็บไซต์ด้วยApp Hostingการสังเกตการณ์

แผงภาพรวมของแอปใน Firebase Studio จะแสดงเมตริกและข้อมูลสำคัญเกี่ยวกับแอป ซึ่งช่วยให้คุณตรวจสอบประสิทธิภาพของเว็บแอปได้โดยใช้เครื่องมือการสังเกตการณ์ในตัวของ App Hosting หลังจากเปิดตัวเว็บไซต์แล้ว คุณจะเข้าถึงภาพรวมได้โดยคลิกเผยแพร่ จากแผงนี้ คุณจะทำสิ่งต่อไปนี้ได้

  • คลิกเผยแพร่เพื่อเผยแพร่แอปเวอร์ชันใหม่
  • แชร์ลิงก์ไปยังแอปหรือเปิดแอปโดยตรงในส่วนไปที่แอป
  • ดูข้อมูลสรุปเกี่ยวกับประสิทธิภาพของแอปในช่วง 7 วันที่ผ่านมา ซึ่งรวมถึงจำนวนคำขอทั้งหมดและสถานะการเปิดตัวล่าสุด คลิกดูรายละเอียดเพื่อเข้าถึงข้อมูลเพิ่มเติมในคอนโซล Firebase
  • ดูกราฟจำนวนคำขอที่แอปได้รับในช่วง 24 ชั่วโมงที่ผ่านมา โดยแบ่งตามรหัสสถานะ HTTP
  • ดูสถานะการเปิดใช้งานบริการ Firebase เช่น Firebase Authentication และ Cloud Firestore

หากปิดแผงภาพรวมของแอป คุณจะเปิดอีกครั้งได้ทุกเมื่อโดย คลิกเผยแพร่

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการและการตรวจสอบApp Hostingการเปิดตัวได้ที่ จัดการการเปิดตัวและการเผยแพร่

Genkit การตรวจสอบฟีเจอร์ที่ติดตั้งใช้งาน

คุณสามารถตรวจสอบGenkitขั้นตอนของฟีเจอร์ อินพุต และเอาต์พุตได้โดยเปิดใช้ การวัดและส่งข้อมูลทางไกลไปยังโค้ดโฟลว์ AI ฟีเจอร์การวัดและส่งข้อมูลการใช้งานสำหรับ Genkit ช่วยให้คุณ ตรวจสอบประสิทธิภาพและการใช้งานโฟลว์ AI ได้ ข้อมูลนี้ช่วยให้คุณ ระบุจุดที่ควรปรับปรุง แก้ไขปัญหา เพิ่มประสิทธิภาพพรอมต์และ โฟลว์เพื่อให้ได้ประสิทธิภาพและต้นทุนที่มีประสิทธิภาพมากขึ้น รวมถึงติดตามการใช้งานโฟลว์ เมื่อเวลาผ่านไป

หากต้องการตั้งค่าการตรวจสอบใน Genkit คุณต้องเพิ่มการวัดและส่งข้อมูลไปยังโฟลว์ AI ของ Genkit แล้วดูผลลัพธ์ในคอนโซล Firebase

ขั้นตอนที่ 1: เพิ่มการวัดระยะไกลลงในโค้ดโฟลว์ Genkit ใน Firebase Studio

วิธีตั้งค่าการตรวจสอบในโค้ด

  1. หากยังไม่ได้อยู่ในCodeมุมมอง ให้คลิก เปลี่ยนโค้ด ไอคอน เปลี่ยนไปใช้โค้ดเพื่อเปิด

  2. ตรวจสอบ package.json เพื่อยืนยันเวอร์ชันของ Genkit ที่ติดตั้ง

  3. เปิดเทอร์มินัล (Ctrl-Shift-C หรือ Cmd-Shift-C ใน MacOS)

  4. คลิกภายในเทอร์มินัลและติดตั้งปลั๊กอิน Firebase โดยใช้เวอร์ชันที่ตรงกับไฟล์ package.json เช่น หากแพ็กเกจ Genkit ใน package.json เป็นเวอร์ชัน 1.0.4 คุณควรเรียกใช้คำสั่งต่อไปนี้เพื่อ ติดตั้งปลั๊กอิน

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

  5. จาก Explorer ให้ขยาย src > ai > flows ไฟล์ TypeScript อย่างน้อย 1 ไฟล์ ที่มีโฟลว์ Genkit จะปรากฏในโฟลเดอร์ flows

  6. คลิกโฟลว์ใดโฟลว์หนึ่งเพื่อเปิด

  7. ที่ด้านล่างของส่วนการนำเข้าของไฟล์ ให้เพิ่มข้อมูลต่อไปนี้เพื่อ นำเข้าและเปิดใช้ FirebaseTelemetry

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

enableFirebaseTelemetry();

ขั้นตอนที่ 2: ตั้งค่าสิทธิ์

Firebase Studio ได้เปิดใช้ API ที่จำเป็น ให้คุณเมื่อตั้งค่าโปรเจ็กต์ Firebase แต่คุณก็ต้องให้สิทธิ์เข้าถึงแก่บัญชีบริการ App Hosting ด้วย

วิธีตั้งค่าสิทธิ์

  1. ในGoogle Cloudคอนโซล ให้ไปที่หน้า IAM แล้วเลือกโปรเจ็กต์ Firebase

  2. มอบบทบาทต่อไปนี้ให้กับบัญชีบริการ App Hosting

    • ผู้เขียนเมตริกการตรวจสอบ (roles/monitoring.metricWriter)
    • Agent ของ Cloud Trace (roles/cloudtrace.agent)
    • ผู้เขียนบันทึก (roles/logging.logWriter)

  3. เผยแพร่แอปอีกครั้งไปยัง App Hosting

  4. เมื่อเผยแพร่เสร็จแล้ว ให้โหลดแอปและเริ่มใช้งาน หลังจากผ่านไป 5 นาที แอปควรเริ่มบันทึกข้อมูลการวัดและส่งข้อมูล

ขั้นตอนที่ 3: ตรวจสอบฟีเจอร์ Generative AI ในFirebaseคอนโซล

เมื่อกำหนดค่าการวัดและส่งข้อมูลแล้ว Genkit จะบันทึกจำนวนคำขอ ความสำเร็จ และเวลาในการตอบสนองสำหรับโฟลว์ทั้งหมด และสำหรับแต่ละโฟลว์ที่เฉพาะเจาะจง Genkit จะรวบรวมเมตริกความเสถียร แสดงกราฟแบบละเอียด และบันทึก การติดตามที่บันทึกไว้

หากต้องการตรวจสอบฟีเจอร์ AI ที่ใช้งานด้วย Genkit ให้ทำดังนี้

  1. หลังจากผ่านไป 5 นาที ในคอนโซล Firebase ให้ไปที่บริการ AI > Genkit เพื่อ ตรวจสอบพรอมต์และการตอบกลับจาก Genkit

  2. คุณดูเมตริกความเสถียรต่อไปนี้ที่รวบรวมโดย Genkit ได้

    • คำขอทั้งหมด: จำนวนคำขอทั้งหมดที่โฟลว์ได้รับ
    • อัตราความสำเร็จ: เปอร์เซ็นต์ของคำขอที่ประมวลผลสำเร็จ
    • เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95: เวลาในการตอบสนองเปอร์เซ็นไทล์ที่ 95 ของโฟลว์ ซึ่งเป็นเวลาที่ใช้ในการประมวลผลคำขอ 95%

    • การใช้งานโทเค็น:

      • โทเค็นอินพุต: จำนวนโทเค็นที่ส่งไปยังโมเดลในพรอมต์
      • โทเค็นเอาต์พุต: จำนวนโทเค็นที่โมเดลสร้างขึ้นใน การตอบกลับ

    • การใช้รูปภาพ:

      • รูปภาพอินพุต: จำนวนรูปภาพที่ส่งไปยังโมเดลในพรอมต์
      • รูปภาพเอาต์พุต: จำนวนรูปภาพที่โมเดลสร้างขึ้นใน การตอบกลับ

  3. คุณขยายเมตริกความเสถียรเพื่อดูกราฟแบบละเอียดต่อไปนี้ได้

    • ปริมาณคำขอในช่วงเวลาที่ผ่านมา
    • อัตราความสำเร็จในช่วงระยะเวลาหนึ่ง
    • โทเค็นอินพุตและเอาต์พุตในช่วงระยะเวลาหนึ่ง
    • เวลาในการตอบสนอง (เปอร์เซ็นไทล์ที่ 95 และ 50) เมื่อเวลาผ่านไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Genkit ได้ในเอกสารประกอบ

ปกป้องแอปด้วย Firebase App Check

หากคุณผสานรวมบริการ Firebase หรือ Google Cloud เข้ากับแอป Firebase App Check จะช่วยปกป้องแบ็กเอนด์ของแอปจากการละเมิดด้วยการป้องกันไม่ให้ไคลเอ็นต์ที่ไม่ได้รับอนุญาตเข้าถึงทรัพยากร Firebase โดยจะทำงานร่วมกับทั้งบริการของ Google (รวมถึงบริการ Firebase และ Google Cloud) และแบ็กเอนด์ที่กำหนดเองของคุณเพื่อรักษาทรัพยากรให้ปลอดภัย

เราขอแนะนำให้เพิ่ม App Check ลงในแอปที่คุณโพสต์ต่อสาธารณะเพื่อปกป้อง ทรัพยากรแบ็กเอนด์จากการละเมิด

ส่วนนี้จะแนะนำวิธีตั้งค่า App Check ภายใน Firebase Studioโดยใช้ reCAPTCHA Enterprise สำหรับเว็บแอปที่สร้างโดย App Prototyping agent แต่คุณตั้งค่า App Check ภายใน แอปใดก็ได้ที่ใช้บริการ Firebase และใช้ผู้ให้บริการที่กำหนดเองได้ ดูข้อมูลเพิ่มเติมได้ที่ Firebase App Check

reCAPTCHA Enterprise ให้การประเมินสูงสุด 10,000 รายการโดยไม่มีค่าใช้จ่าย

ขั้นตอนที่ 1: ตั้งค่า reCAPTCHA Enterprise สำหรับแอป

  1. เปิดส่วน reCAPTCHA Enterprise ของคอนโซล Google Cloud

  2. เลือกชื่อโปรเจ็กต์ Firebase จากเครื่องมือเลือกโปรเจ็กต์ในGoogle Cloudคอนโซล

  3. หากได้รับแจ้งให้เปิดใช้ reCAPTCHA Enterprise API ให้ดำเนินการตามนั้น

  4. คลิกเริ่มต้นใช้งาน แล้วเพิ่มชื่อที่แสดงสำหรับคีย์เว็บไซต์ reCAPTCHA

  5. ยอมรับคีย์ประเภทแอปพลิเคชัน เว็บเริ่มต้น

  6. คลิกเพิ่มโดเมน แล้วเพิ่มโดเมน คุณจะต้องเพิ่ม App Hosting โดเมน (เช่น studio--PROJECT_ID.REGION.hosted.app) และโดเมนที่กำหนดเองที่คุณใช้หรือวางแผนที่จะใช้กับแอป

  7. คลิกขั้นตอนถัดไป

  8. ปล่อยให้คุณจะใช้การยืนยันตัวตนไหมไม่ได้เลือกไว้

  9. คลิกสร้างคีย์

  10. คัดลอกและบันทึกรหัสคีย์ แล้วไปที่กำหนดค่า App Check

ขั้นตอนที่ 2: กำหนดค่า App Check

  1. เปิดFirebase คอนโซล แล้วคลิกสร้าง > App Check จากเมนูการนำทาง

  2. คลิกเริ่มต้นใช้งาน แล้วคลิกลงทะเบียนข้างแอป

  3. คลิกเพื่อขยาย reCAPTCHA แล้ววางรหัสคีย์ที่คุณสร้างสำหรับ reCAPTCHA Enterprise

  4. คลิกบันทึก

ขั้นตอนที่ 3: เพิ่ม App Check ลงในโค้ด

  1. กลับไปที่ Firebase Studio และในมุมมอง Code ให้เพิ่ม คีย์เว็บไซต์ที่คุณสร้างลงในไฟล์ .env ดังนี้

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. หากยังไม่ได้บันทึกการกำหนดค่า Firebase ไว้ใน .env ให้รับการกำหนดค่าโดยทำดังนี้

    • จากคอนโซล Firebase ให้เปิดการตั้งค่าโปรเจ็กต์ แล้วค้นหาในส่วนที่ สอดคล้องกับแอปของคุณ

    • จากอาคารผู้โดยสารในมุมมอง Code ให้ทำดังนี้

      1. เข้าสู่ระบบ Firebase: firebase auth login
      2. เลือกโปรเจ็กต์ firebase use FIREBASE_PROJECT_ID
      3. รับการกำหนดค่า Firebase: firebase apps:sdkconfig

  3. เพิ่มการกำหนดค่าลงในไฟล์ .env เพื่อให้มีลักษณะดังนี้ 

    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. เพิ่ม App Check ลงในโค้ดแอป คุณขอให้ Gemini เพิ่ม App Check ด้วย reCAPTCHA Enterprise ลงในแอปได้ (อย่าลืมระบุ "reCAPTCHA Enterprise" และตรวจสอบอีกครั้ง) หรือทำตามขั้นตอนในเริ่มต้น App Check

  5. เผยแพร่เว็บไซต์ของคุณอีกครั้งไปยัง App Hosting ลองทดสอบฟีเจอร์ฐานข้อมูลและการตรวจสอบสิทธิ์เพื่อสร้างข้อมูลบางอย่าง

  6. ตรวจสอบว่า App Check ได้รับคำขอในคอนโซล Firebase โดยเปิดบิลด์ > App Check

  7. คลิกเพื่อตรวจสอบ Cloud Firestore หลังจากยืนยันว่าคำขอมาถึงแล้ว ให้คลิกบังคับใช้เพื่อบังคับใช้ App Check

  8. ยืนยันและบังคับใช้สำหรับ Firebase Authentication อีกครั้ง

หากหลังจากลงทะเบียนแอปสำหรับ App Check แล้ว คุณต้องการเรียกใช้แอปในสภาพแวดล้อมที่ปกติ App Check จะไม่จัดประเภทว่าถูกต้อง เช่น ในเครื่องระหว่างการพัฒนา หรือจากสภาพแวดล้อมการรวมอย่างต่อเนื่อง (CI) คุณสามารถสร้างบิลด์การแก้ไขข้อบกพร่องของแอปที่ใช้ผู้ให้บริการแก้ไขข้อบกพร่องของ App Check แทนผู้ให้บริการรับรองจริงได้ ดูข้อมูลเพิ่มเติม ได้ที่ใช้ App Check กับผู้ให้บริการแก้ไขข้อบกพร่องในเว็บ แอป

ขั้นตอนถัดไป