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

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

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