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

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

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

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

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

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

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

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

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

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

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

การลบไฟล์

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

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