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

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

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

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

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

คุณอาจทําให้เนื้อหาและการกำหนดค่า Hosting ของแอปใช้งานได้ แต่ขั้นตอนในหน้านี้ไม่ได้กําหนดให้ทําเช่นนั้น

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

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

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

  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 ตัวอย่าง เว็บแอปจะโต้ตอบกับแบ็กเอนด์จริงสำหรับทรัพยากรของโปรเจ็กต์ทั้งหมด (ยกเว้นฟังก์ชันที่ "ปักหมุดไว้" ในการกำหนดค่าการเขียนใหม่)

โปรดทราบว่าแม้ว่า 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 Hosting รองรับ GitHub Action ที่สร้างและอัปเดต URL แสดงตัวอย่างโดยอัตโนมัติเมื่อคุณบันทึกการเปลี่ยนแปลงในคำขอพุล ดูวิธีตั้งค่าและใช้ GitHub Action นี้

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

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

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

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

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

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

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

    • SOURCE_SITE_ID และ TARGET_SITE_ID: รหัสของเว็บไซต์ Hosting ที่มีช่อง

      • สําหรับเว็บไซต์ Hosting เริ่มต้น ให้ใช้รหัสโปรเจ็กต์ Firebase
      • คุณระบุเว็บไซต์ที่อยู่ในโปรเจ็กต์ Firebase เดียวกันหรือในโปรเจ็กต์ Firebase อื่นก็ได้

    • SOURCE_CHANNEL_ID: นี่คือตัวระบุของแชแนลที่ใช้เวอร์ชันที่คุณต้องการนำไปใช้งานกับแชแนลเวอร์ชันที่ใช้งานอยู่

      • สำหรับช่องถ่ายทอดสด ให้ใช้ live เป็นรหัสช่อง

  2. ดูการเปลี่ยนแปลง (ขั้นตอนถัดไป)

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

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

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

    firebase deploy --only hosting

  2. ดูการเปลี่ยนแปลง (ขั้นตอนถัดไป)

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

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

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

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

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

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

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

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

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

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

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

การแคชเนื้อหาที่เผยแพร่

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

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

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

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

กำลังลบไฟล์

ใน Firebase Hosting วิธีหลักในการลบไฟล์ที่เลือกจากเว็บไซต์ที่ติดตั้งใช้งานแล้วคือการลบไฟล์ในเครื่อง จากนั้นจึงติดตั้งใช้งานอีกครั้ง

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