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

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

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

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

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

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

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

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

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

  1. (ไม่บังคับ) โดยค่าเริ่มต้น แอปที่โฮสต์ในเครื่องของคุณจะโต้ตอบกับแท็กจริง ไม่ได้จำลองทรัพยากรของโปรเจ็กต์ (ฟังก์ชัน ฐานข้อมูล กฎ ฯลฯ) คุณเลือกเชื่อมต่อแอปเพื่อใช้โปรเจ็กต์จำลองใดก็ได้แทน ทรัพยากรที่กำหนดค่าไว้ ดูข้อมูลเพิ่มเติม Realtime Database | Cloud Firestore | ฟังก์ชันระบบคลาวด์

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

โปรดทราบว่าแม้ว่า 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 นี้

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

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

ตัวเลือกที่ 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 จะโหลดผ่าน SSL (HTTPS) รวมถึงสคริปต์ภายนอกทั้งหมด เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้ผู้ใช้โหลด "เนื้อหาผสม" (SSL และไม่ใช่ SSL การจราจร)

กำลังลบไฟล์

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

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