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

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

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

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

• หากใช้ AI ในแอปด้วย Genkit คุณจะตรวจสอบได้ว่าฟีเจอร์ Generative AI ทำงานอย่างไรในเวอร์ชันที่ใช้งานจริง

• หากแอปมีบริการ Firebase ให้รักษาความปลอดภัยด้วย Firebase App Check

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

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

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

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

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

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

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

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

สำคัญ: การตรวจสอบ Genkit อาศัยข้อมูลการตรวจวัดระยะไกลที่เขียนลงใน Google Cloud Logging, Metrics และ Trace ซึ่งเป็นบริการที่มีค่าใช้จ่าย ดูรายละเอียดราคาและข้อมูลเกี่ยวกับขีดจำกัดของระดับที่ไม่มีค่าใช้จ่ายได้ที่หน้าราคาของ Google Cloud Observability

ขั้นตอนที่ 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. คลิกโฟลว์ใดโฟลว์หนึ่งเพื่อเปิด

   เคล็ดลับ: โปรดสังเกตส่วน prompt ของไฟล์ คุณสามารถแก้ไขส่วนนี้ด้วยตนเองเพื่อปรับแต่งคำตอบของ Gemini

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

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

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

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

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

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

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

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

   • Monitoring Metric Writer (roles/monitoring.metricWriter)
   • Cloud Trace Agent (roles/cloudtrace.agent)
   • Logs Writer (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 กับผู้ให้บริการแก้ไขข้อบกพร่องในเว็บแอป

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

• ปรับแต่งพื้นที่ทำงาน Firebase Studio

• พัฒนา เผยแพร่ และตรวจสอบเว็บแอปแบบฟูลสแต็กด้วย App Prototyping agent