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

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

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

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

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