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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการและการตรวจสอบ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 เลือกโปรเจ็กต์ แล้วมอบหมายบทบาทต่อไปนี้ให้กับบัญชีบริการ App Hosting

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

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

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

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

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

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

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

    Genkit รวบรวมเมตริกความเสถียรต่อไปนี้

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

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

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

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

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

    หากขยายเมตริกความเสถียร คุณจะเห็นกราฟแบบละเอียดดังนี้

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Genkit ได้ที่ 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. ปล่อยให้ตัวเลือก Will you use challenges? ไม่ได้เลือก

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

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

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

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

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

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

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

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

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

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

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

  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 ลองทดสอบฟีเจอร์ Firebase เพื่อสร้างข้อมูล

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

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

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

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

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