Firebase is back at Google I/O on May 10! Register now

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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

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

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

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

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

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

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

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

  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 ) ID นี้จะใช้เพื่อสร้าง 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 : คือ 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 firebase เพื่อดำเนินการก่อนการปรับใช้หรือหลังการปรับใช้ ตัวอย่างเช่น hook หลังการปรับใช้สามารถแจ้งผู้ดูแลระบบเกี่ยวกับการปรับใช้เนื้อหาไซต์ใหม่ โปรดดู เอกสารประกอบ Firebase CLI สำหรับรายละเอียดเพิ่มเติม

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

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

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

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

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

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