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

ก่อนนำไปใช้งานในเว็บไซต์จริง คุณควรดูและทดสอบการเปลี่ยนแปลง 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-3 รายการสําหรับขั้นตอนนี้ โดยขึ้นอยู่กับกรณีการใช้งานของคุณ (ดูตัวเลือกด้านล่าง)

ตัวเลือกที่ 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 เพื่อดําเนินการก่อนหรือหลังการทําให้ใช้งานได้ เช่น ฮุกหลังการทําให้ใช้งานได้อาจแจ้งให้ผู้ดูแลระบบทราบเกี่ยวกับการทําให้เนื้อหาเว็บไซต์ใหม่ใช้งานได้ ดูรายละเอียดเพิ่มเติมในเอกสารประกอบ CLI ของ Firebase

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

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

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

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

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

การลบไฟล์

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

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