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

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

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

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

โปรดทราบว่าแม้ว่า 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 ตัวอย่างโดยอัตโนมัติเมื่อคุณคอมมิตการเปลี่ยนแปลงใน Pull Request ดูวิธีตั้งค่าและใช้ 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 ไปใช้งานใน เว็บไซต์ต่อไปนี้

หากต้องการจำกัดการนำไปใช้งานไว้ที่เว็บไซต์ 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 วิธีหลักในการลบไฟล์ที่เลือก จากเว็บไซต์ที่นำไปใช้งานแล้วคือการลบไฟล์ในเครื่อง แล้วนำไปใช้งานอีกครั้ง

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