สร้างต้นแบบและทดสอบเว็บแอปด้วย Firebase Hosting Emulator

ก่อนที่คุณจะเริ่มสร้างต้นแบบและทดสอบเว็บแอปด้วยโปรแกรมจำลองโฮสติ้งของ Firebase ตรวจสอบให้แน่ใจว่าคุณ เข้าใจเวิร์กโฟลว์ Firebase Local Emulator Suite โดยรวม และได้ติดตั้งและกำหนด ค่า Local Emulator Suite และตรวจสอบ คำสั่ง CLI ของชุดดัง กล่าว

คุณควรทำความคุ้นเคยกับฟีเจอร์และเวิร์กโฟลว์การใช้งานสำหรับ Firebase Hosting ด้วย เริ่มต้นด้วย การแนะนำโฮสติ้ง Firebase

ฉันสามารถทำอะไรกับโปรแกรมจำลองโฮสติ้งของ Firebase ได้บ้าง

โปรแกรมจำลองโฮสติ้งของ Firebase มีการจำลองบริการโฮสติ้งเฉพาะที่ที่มีความเที่ยงตรงสูง โดยมีฟังก์ชันการทำงานมากมายที่พบใน โฮสติ้งที่ใช้งานจริง โปรแกรมจำลองโฮสติ้งช่วยให้คุณ:

  • สร้างต้นแบบไซต์และเว็บแอปแบบคงที่โดยไม่ต้องเสียค่าบริการพื้นที่จัดเก็บหรือการเข้าถึง
  • สร้างต้นแบบ ทดสอบ และดีบักฟังก์ชัน HTTPS ก่อนที่จะปรับใช้กับไซต์โฮสติ้งของคุณ
  • ทดสอบไซต์และเว็บแอปในเวิร์กโฟลว์การรวมคอนเทนเนอร์แบบต่อเนื่อง

เลือกโปรเจ็กต์ Firebase

Firebase Local Emulator Suite จำลองผลิตภัณฑ์สำหรับโปรเจ็กต์ Firebase เดียว

หากต้องการเลือกโปรเจ็กต์ที่จะใช้ ก่อนที่คุณจะเริ่มโปรแกรมจำลอง ใน CLI ให้เรียก firebase use ในไดเร็กทอรีการทำงานของคุณ หรือคุณสามารถส่งแฟล็ก --project ไปยังคำสั่งอีมูเลเตอร์แต่ละคำสั่งได้

Local Emulator Suite รองรับการจำลองโปรเจ็กต์ Firebase จริง และโปรเจ็กต์ สาธิต

ประเภทโครงการ คุณสมบัติ ใช้กับโปรแกรมจำลอง
จริง

โปรเจ็กต์ Firebase จริงคือโปรเจ็กต์ที่คุณสร้างและกำหนดค่า (ส่วนใหญ่จะผ่านคอนโซล Firebase)

โปรเจ็กต์จริงมีทรัพยากรที่ใช้งานจริง เช่น อินสแตนซ์ฐานข้อมูล ที่เก็บข้อมูล ฟังก์ชัน หรือทรัพยากรอื่นใดที่คุณตั้งค่าไว้สำหรับโปรเจ็กต์ Firebase นั้น

เมื่อทำงานกับโปรเจ็กต์ Firebase จริง คุณสามารถเรียกใช้โปรแกรมจำลองสำหรับผลิตภัณฑ์ที่รองรับรายการใดรายการหนึ่งหรือทั้งหมดได้

สำหรับผลิตภัณฑ์ใดๆ ที่คุณไม่ได้เลียนแบบ แอปและโค้ดของคุณจะโต้ตอบกับทรัพยากร ที่ใช้งานจริง (อินสแตนซ์ฐานข้อมูล บัคเก็ตพื้นที่จัดเก็บ ฟังก์ชัน ฯลฯ)

การสาธิต

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

รหัสโครงการสำหรับโครงการสาธิตต้องมีคำนำหน้า demo-

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

เราขอแนะนำให้คุณใช้โครงการสาธิตทุกครั้งที่เป็นไปได้ สิทธิประโยชน์ ได้แก่:

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

ขั้นตอนการทำงานต้นแบบหลัก

หากคุณกำลังทำซ้ำอย่างรวดเร็วหรือต้องการให้แอปโต้ตอบกับทรัพยากรโปรเจ็กต์แบ็กเอนด์ที่จำลอง คุณสามารถทดสอบเนื้อหาโฮสติ้งและกำหนดค่าในเครื่องได้ เมื่อทำการทดสอบในเครื่อง Firebase จะให้บริการเว็บแอปของคุณที่ URL ที่โฮสต์ในเครื่อง

  1. (ไม่บังคับ) ตามค่าเริ่มต้น แอปที่โฮสต์ในเครื่องของคุณจะโต้ตอบกับทรัพยากรโปรเจ็กต์ จริง ไม่ใช่ จำลอง (ฟังก์ชัน ฐานข้อมูล กฎ ฯลฯ) คุณสามารถเลือกเชื่อมต่อแอปของคุณเพื่อใช้ทรัพยากรโปรเจ็กต์ จำลอง ใดๆ ที่คุณได้กำหนดค่าไว้แทนได้ เรียนรู้เพิ่มเติม: ฐานข้อมูลเรียลไทม์ | คลาวด์ไฟร์สโตร์ | ฟังก์ชั่นคลาวด์

  2. จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:

    firebase emulators:start

  3. เปิดแอปพลิเคชันเว็บของคุณที่ URL ในเครื่องที่ CLI ส่งคืน (โดยปกติคือ http://localhost:5000 )

  4. หากต้องการอัปเดต URL ในเครื่องที่มีการเปลี่ยนแปลง ให้รีเฟรชเบราว์เซอร์ของคุณ

ทดสอบจากอุปกรณ์ท้องถิ่นอื่นๆ

ตามค่าเริ่มต้น ตัวจำลองจะตอบสนองต่อคำขอจาก localhost เท่านั้น ซึ่งหมายความว่าคุณจะสามารถเข้าถึงเนื้อหาที่โฮสต์ไว้ได้จากเว็บเบราว์เซอร์ของคอมพิวเตอร์ แต่ไม่ใช่จากอุปกรณ์อื่นในเครือข่ายของคุณ หากคุณต้องการทดสอบจากอุปกรณ์ภายในเครื่องอื่นๆ ให้กำหนดค่า firebase.json ของคุณดังนี้:

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

สร้างโทเค็นการตรวจสอบสิทธิ์สำหรับเวิร์กโฟลว์การรวมอย่างต่อเนื่อง

หากเวิร์กโฟลว์การรวมอย่างต่อเนื่องของคุณอาศัย Firebase Hosting คุณจะต้องเข้าสู่ระบบโดยใช้โทเค็นเพื่อเรียกใช้ firebase emulators:exec โปรแกรมจำลองอื่น ๆ ไม่จำเป็นต้องเข้าสู่ระบบ

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

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

วิธีสุดท้าย คุณสามารถรวมโทเค็นไว้ในสคริปต์บิลด์ของคุณได้ แต่ต้องแน่ใจว่าฝ่ายที่ไม่น่าเชื่อถือไม่สามารถเข้าถึงได้ สำหรับแนวทางฮาร์ดโค้ดนี้ คุณสามารถเพิ่ม --token "YOUR_TOKEN_STRING_HERE" ลงในคำสั่ง firebase emulators:exec

อะไรต่อไป?