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

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

ก่อนที่คุณจะเริ่ม

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

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

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

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

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

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

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

  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 เหล่านี้เป็นแบบสาธารณะ ดังนั้นใครก็ตามที่รู้ 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: ปรับใช้สด

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

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

  • โดเมนย่อยที่จัดสรรโดย 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."

เพิ่มงานสคริปต์ก่อนปรับใช้และหลังปรับใช้

คุณสามารถเลือกเชื่อมต่อเชลล์สคริปต์กับคำสั่ง firebase deploy เพื่อดำเนินงานก่อนปรับใช้หรือหลังปรับใช้ได้ ตัวอย่างเช่น hook แบบ postdeploy สามารถแจ้งผู้ดูแลระบบเกี่ยวกับการปรับใช้เนื้อหาไซต์ใหม่ได้ โปรดดู เอกสาร Firebase CLI สำหรับรายละเอียดเพิ่มเติม

การแคชเนื้อหาที่ปรับใช้

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

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

ให้บริการผ่าน HTTPS

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

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