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

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

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

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

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

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

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

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

หากต้องการเลือกโปรเจ็กต์ที่จะใช้ ให้เรียกใช้ firebase use ในไดเรกทอรีงานใน CLI ก่อนที่จะเริ่มโปรแกรมจำลอง หรือจะส่ง แฟล็ก --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 โดยมีค่าเป็นสตริงโทเค็นเพื่อการเข้าถึง CLI จะเลือกตัวแปรสภาพแวดล้อมโดยอัตโนมัติและโปรแกรมจำลองจะเริ่มทำงานอย่างถูกต้องFirebaseFIREBASE_TOKEN

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

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