Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

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

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

ก่อนจะเริ่ม

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

  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 ) รหัสนี้จะใช้เพื่อสร้าง 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 เสนอตัวเลือกที่แตกต่างกันสองสามอย่างสำหรับขั้นตอนนี้ ขึ้นอยู่กับกรณีการใช้งานของคุณ (ดูตัวเลือกด้านล่าง)

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

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

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

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

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

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

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