Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

ก่อนจะเริ่ม

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

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

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

ขั้นตอนที่ 1: การทดสอบในประเทศ

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

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

  1. (อุปกรณ์เสริม) โดยค่าเริ่มต้นแอปที่โฮสต์ในประเทศของคุณจะมีปฏิสัมพันธ์กับจริงไม่เทิดทูนทรัพยากรโครงการ (ฟังก์ชั่นฐานข้อมูลกฎระเบียบอื่น ๆ ) คุณสามารถเลือกแทนการเชื่อมต่อของแอปที่จะใช้ทรัพยากรในโครงการเทิดทูนใด ๆ ที่คุณได้กำหนดค่า เรียนรู้เพิ่มเติม: Realtime ฐานข้อมูล | เมฆ 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 ตัวอย่างปฏิสัมพันธ์ app เว็บของคุณกับแบ็กเอนด์ที่แท้จริงของคุณสำหรับทรัพยากรทั้งหมดของโครงการ

โปรดทราบว่าแม้ว่า 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 การดำเนินการ

ขั้นตอนที่ 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 )

  • ใด ๆ โดเมนที่กำหนดเอง ที่คุณได้เชื่อมต่อไปยังเว็บไซต์โฮสติ้ง (s)

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

กิจกรรมและข้อมูลการปรับใช้อื่น ๆ

เพิ่มความคิดเห็นสำหรับการปรับใช้

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

firebase deploy --only hosting -m "Deploying the best new feature ever."

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

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

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

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

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

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

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

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