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

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

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

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

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

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

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

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

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

ชุดโปรแกรมจำลองภายในรองรับการจำลองโปรเจ็กต์ Firebase จริงและโปรเจ็กต์สาธิต

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

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

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

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

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

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 คุณจะต้องเข้าสู่ระบบโดยใช้โทเค็นเพื่อเรียกใช้ firebase emulators:exec โปรแกรมจำลองอื่นๆ ไม่จำเป็นต้องเข้าสู่ระบบ

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

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

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

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

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