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

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

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

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

  1. ติดตั้งหรืออัปเดต CLI ของ Firebase เป็นเวอร์ชันล่าสุด
  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 ที่จะสร้างและ อัปเดต URL ตัวอย่างเมื่อคุณยืนยันการเปลี่ยนแปลงกับคำขอพุล เรียนรู้วิธีการ ตั้งค่าและใช้การดำเนินการ GitHub นี้

ขั้นตอนที่ 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."

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

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

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

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

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

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

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

การลบไฟล์

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

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