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

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

โปรดทราบว่าแม้ 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 ของคุณใช้งานได้ในเว็บไซต์ต่อไปนี้

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

การแคชเนื้อหาที่ติดตั้งใช้งาน

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

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

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

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

กำลังลบไฟล์

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

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