Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

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

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

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