สร้างต้นแบบและทดสอบเว็บแอปด้วยโปรแกรมจำลองโฮสติ้งของ Firebase

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

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

ฉันใช้Firebase Hostingอีมูเลเตอร์ทำอะไรได้บ้าง

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

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

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

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

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

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

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

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

เวิร์กโฟลว์การสร้างต้นแบบหลัก

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

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

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

   firebase emulators:start

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

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

ทดสอบจากอุปกรณ์อื่นๆ ในเครือข่ายเดียวกัน

โดยค่าเริ่มต้น โปรแกรมจำลองจะตอบกลับเฉพาะคำขอจาก localhost ซึ่งหมายความว่าคุณจะเข้าถึงเนื้อหาที่โฮสต์ได้จากเว็บเบราว์เซอร์ของคอมพิวเตอร์ แต่จะเข้าถึงจากอุปกรณ์อื่นๆ ในเครือข่ายไม่ได้ หากต้องการทดสอบจาก อุปกรณ์อื่นๆ ในเครือข่าย LAN ให้กำหนดค่า 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 ได้

ฉันควรทำอย่างไรต่อไป

• เรียกใช้การเริ่มต้นอย่างรวดเร็วโดยใช้โปรแกรมจำลอง Hosting โดยทำตาม Codelab ของ Firebase Web
• ทำความเข้าใจวิธีสร้างต้นแบบฟังก์ชัน HTTPS โดยใช้Hostingโปรแกรมจำลองตามที่อธิบายไว้ในคู่มือการโฮสต์สำหรับฟังก์ชัน
• ดูชุดวิดีโอที่ดูแลและตัวอย่างวิธีใช้อย่างละเอียดได้ในเพลย์ลิสต์การฝึกของ Firebase Emulators