ทดสอบเว็บแอปในเครื่อง แชร์การเปลี่ยนแปลงกับผู้อื่น แล้วทำให้ใช้งานได้ทันที

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

ก่อนเริ่มต้น

ทำตามขั้นตอนที่ระบุไว้ในหน้าเริ่มต้นใช้งานโฮสติ้ง โดยเฉพาะงานต่อไปนี้

  1. ติดตั้งหรืออัปเดต Firebase CLI เป็นเวอร์ชันล่าสุด
  2. เชื่อมต่อไดเรกทอรีโปรเจ็กต์ในเครื่อง (ที่มีเนื้อหาของแอป) กับโปรเจ็กต์ Firebase

คุณสามารถทำให้เนื้อหาและการกำหนดค่าโฮสติ้งของแอปใช้งานได้ (ไม่บังคับ) แต่ขั้นตอนนี้ไม่ได้เป็นข้อกำหนดเบื้องต้นสำหรับขั้นตอนในหน้านี้

ขั้นตอนที่ 1: ทดสอบในเครื่อง

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

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

  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"
    }
  }

ขั้นตอนที่ 2: ดูตัวอย่างและแชร์

หากต้องการให้ผู้อื่นดูการเปลี่ยนแปลงในเว็บแอปของคุณก่อนนำไปใช้จริง คุณสามารถใช้ช่องตัวอย่างได้

หลังจากทำให้ใช้งานได้ในแชแนลตัวอย่างแล้ว Firebase จะแสดงเว็บแอปใน "URL ตัวอย่าง" ซึ่งเป็น URL ชั่วคราวที่แชร์ได้ เมื่อใช้ URL ตัวอย่าง เว็บแอปจะโต้ตอบกับแบ็กเอนด์จริงสำหรับทรัพยากรทั้งหมดของโปรเจ็กต์ (ยกเว้นฟังก์ชัน "pinned" ใดๆ ในการกำหนดค่าการเขียนใหม่)

โปรดทราบว่าแม้ URL ตัวอย่างจะคาดเดาได้ยาก (เนื่องจากมีแฮชแบบสุ่ม) แต่ URL เหล่านี้จะเป็น URL สาธารณะ ดังนั้น ทุกคนที่ทราบ URL จะสามารถเข้าถึงได้

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

    firebase hosting:channel:deploy CHANNEL_ID

    แทนที่ CHANNEL_ID ด้วยสตริงที่ไม่มีการเว้นวรรค (เช่น feature_mission-2-mars) ระบบจะใช้รหัสนี้ในการสร้าง URL ตัวอย่างที่เชื่อมโยงกับช่องพรีวิว

  2. เปิดเว็บแอปที่ URL ตัวอย่างที่แสดงผลโดย CLI ซึ่งจะมีลักษณะประมาณนี้ PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. หากต้องการอัปเดต URL ตัวอย่างที่มีการเปลี่ยนแปลง ให้เรียกใช้คำสั่งเดียวกันนี้อีกครั้ง อย่าลืมระบุ CHANNEL_ID เดียวกันในคำสั่ง

ดูข้อมูลเกี่ยวกับการจัดการช่องตัวอย่าง รวมถึงวิธีตั้งค่าวันที่หมดอายุของช่อง

โฮสติ้งของ Firebase รองรับการดำเนินการ GitHub ที่จะสร้างและอัปเดต URL ตัวอย่างโดยอัตโนมัติเมื่อคุณยืนยันการเปลี่ยนแปลงคำขอพุล ดูวิธีตั้งค่าและใช้ GitHub Action นี้

ขั้นตอนที่ 3: ทำให้ใช้งานจริงได้

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

ตัวเลือกที่ 1: โคลนจากช่องตัวอย่างไปยังช่องถ่ายทอดสด

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

  1. จากไดเรกทอรีใดก็ได้ ให้เรียกใช้คำสั่งต่อไปนี้

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    แทนที่ตัวยึดตำแหน่งด้วยข้อมูลต่อไปนี้

    • SOURCE_SITE_ID และ TARGET_SITE_ID: คือรหัสของเว็บไซต์โฮสติ้งที่มีช่องต่างๆ

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

      • สำหรับช่องถ่ายทอดสด ให้ใช้ live เป็นรหัสช่อง
  2. ดูการเปลี่ยนแปลงของคุณ (ขั้นตอนถัดไป)

ตัวเลือกที่ 2: ติดตั้งใช้งานจากไดเรกทอรีโปรเจ็กต์ในเครื่องไปยังรายการถ่ายทอดสด

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

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

    firebase deploy --only hosting
  2. ดูการเปลี่ยนแปลงของคุณ (ขั้นตอนถัดไป)

ขั้นตอนที่ 4: ดูการเปลี่ยนแปลงในเว็บไซต์ที่เผยแพร่อยู่

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

  • โดเมนย่อยที่จัดสรรโดย Firebase สำหรับเว็บไซต์โฮสติ้งเริ่มต้นและเว็บไซต์โฮสติ้งเพิ่มเติม
    SITE_ID.web.app (เช่น PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (เช่น PROJECT_ID.firebaseapp.com)

  • โดเมนที่กำหนดเองทั้งหมดที่คุณได้เชื่อมต่อกับเว็บไซต์โฮสติ้ง

หากต้องการจำกัดการทำให้ใช้งานได้กับเว็บไซต์โฮสติ้งที่เจาะจง ให้ระบุเป้าหมายการทำให้ใช้งานได้ในคำสั่ง CLI

กิจกรรมและข้อมูลการติดตั้งใช้งานอื่นๆ

เพิ่มความคิดเห็นสำหรับการทำให้ใช้งานได้

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

firebase deploy --only hosting -m "Deploying the best new feature ever."

เพิ่มงานที่สคริปต์ก่อนทำให้ใช้งานได้และหลังทำให้ใช้งานได้

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

การแคชเนื้อหาที่ทำให้ใช้งานได้แล้ว

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

โปรดทราบว่าคุณสามารถกำหนดค่าการแคชเนื้อหาแบบไดนามิกได้

การแสดงผลผ่าน HTTPS

ตรวจสอบว่าทรัพยากรภายนอกทั้งหมดที่ไม่ได้โฮสต์บน Firebase Hosting โหลดผ่าน SSL (HTTPS) รวมถึงสคริปต์ภายนอกทั้งหมด เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้ผู้ใช้โหลด "เนื้อหาผสม" (การรับส่งข้อมูล SSL และไม่ใช่ SSL)

กำลังลบไฟล์

ในโฮสติ้งของ Firebase วิธีหลักในการลบไฟล์ที่เลือกออกจากเว็บไซต์ที่ทำให้ใช้งานได้คือการลบไฟล์ในเครื่อง จากนั้นทำให้ใช้งานได้อีกครั้ง

ขั้นตอนถัดไป