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

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

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

ฉันใช้โปรแกรมจำลอง Firebase Hosting ทำอะไรได้บ้าง

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

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

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

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

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

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

ประเภทโปรเจ็กต์ ฟีเจอร์ ใช้กับโปรแกรมจำลอง
จริง

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

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

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

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

เดโม

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

รหัสโปรเจ็กต์ของโปรเจ็กต์เดโมจะมีคำนำหน้า demo-

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

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