ก่อนที่จะปรับใช้กับไซต์ที่ใช้งานจริงของคุณ คุณจะต้องดูและทดสอบการเปลี่ยนแปลงของคุณ Firebase Hosting ช่วยให้คุณดูและทดสอบการเปลี่ยนแปลงในเครื่องและโต้ตอบกับทรัพยากรโปรเจ็กต์แบ็กเอนด์ที่จำลองได้ หากคุณต้องการให้เพื่อนร่วมทีมดูและทดสอบการเปลี่ยนแปลงของคุณ โฮสติ้งสามารถสร้าง URL ตัวอย่างชั่วคราวที่แชร์ได้สำหรับเว็บไซต์ของคุณ เรายังสนับสนุน การรวม GitHub เพื่อปรับใช้จากคำขอดึง
ก่อนที่คุณจะเริ่ม
ทำตามขั้นตอนที่แสดงอยู่ใน หน้าเริ่มต้นใช้งานโฮสติ้ง โดยเฉพาะงานต่อไปนี้:
- ติดตั้งหรืออัปเดต Firebase CLI ให้เป็นเวอร์ชันล่าสุด
- เชื่อมต่อไดเรกทอรีโปรเจ็กต์ในเครื่อง (ที่มีเนื้อหาแอปของคุณ) กับโปรเจ็กต์ Firebase ของคุณ
คุณสามารถเลือกปรับใช้เนื้อหาและการกำหนดค่าโฮสติ้งของแอปของคุณได้ แต่ไม่ใช่ข้อกำหนดเบื้องต้นสำหรับขั้นตอนในหน้านี้
ขั้นตอนที่ 1: ทดสอบในเครื่อง
หากคุณกำลังทำซ้ำอย่างรวดเร็วหรือต้องการให้แอปโต้ตอบกับทรัพยากรโปรเจ็กต์แบ็กเอนด์ที่จำลอง คุณสามารถทดสอบเนื้อหาโฮสติ้งและกำหนดค่าในเครื่องได้ เมื่อทำการทดสอบในเครื่อง Firebase จะให้บริการเว็บแอปของคุณที่ URL ที่โฮสต์ในเครื่อง
โฮสติ้งเป็นส่วนหนึ่งของ Firebase Local Emulator Suite ซึ่งช่วยให้แอปของคุณโต้ตอบกับเนื้อหาและการกำหนดค่าโฮสติ้ง ที่จำลองได้ รวมถึงทรัพยากรโปรเจ็กต์ ที่จำลอง (ฟังก์ชัน ฐานข้อมูล และกฎ)
(ไม่บังคับ) ตามค่าเริ่มต้น แอปที่โฮสต์ในเครื่องของคุณจะโต้ตอบกับทรัพยากรโปรเจ็กต์ จริง ไม่ใช่ จำลอง (ฟังก์ชัน ฐานข้อมูล กฎ ฯลฯ) คุณสามารถเลือกเชื่อมต่อแอปของคุณเพื่อใช้ทรัพยากรโปรเจ็กต์ จำลอง ใดๆ ที่คุณได้กำหนดค่าไว้แทนได้ เรียนรู้เพิ่มเติม: ฐานข้อมูลเรียลไทม์ | คลาวด์ไฟร์สโตร์ | ฟังก์ชั่นคลาวด์
จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:
firebase emulators:start
เปิดแอปพลิเคชันเว็บของคุณที่ URL ในเครื่องที่ CLI ส่งคืน (โดยปกติคือ
http://localhost:5000
)หากต้องการอัปเดต URL ในเครื่องที่มีการเปลี่ยนแปลง ให้รีเฟรชเบราว์เซอร์ของคุณ
ทดสอบจากอุปกรณ์ท้องถิ่นอื่นๆ
ตามค่าเริ่มต้น ตัวจำลองจะตอบสนองต่อคำขอจาก localhost
เท่านั้น ซึ่งหมายความว่าคุณจะสามารถเข้าถึงเนื้อหาที่โฮสต์ไว้ได้จากเว็บเบราว์เซอร์ของคอมพิวเตอร์ แต่ไม่ใช่จากอุปกรณ์อื่นในเครือข่ายของคุณ หากคุณต้องการทดสอบจากอุปกรณ์ภายในเครื่องอื่นๆ ให้กำหนดค่า firebase.json
ของคุณดังนี้:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
เมื่อใช้ firebase serve
แอปของคุณจะโต้ตอบกับแบ็กเอนด์ จำลอง สำหรับเนื้อหาโฮสติ้งและการกำหนดค่า (และฟังก์ชันเสริม) แต่แบ็กเอนด์ จริง ของคุณสำหรับทรัพยากรโปรเจ็กต์อื่นๆ ทั้งหมด
จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:
firebase serve --only hosting
เปิดแอปพลิเคชันเว็บของคุณที่ URL ในเครื่องที่ CLI ส่งคืน (โดยปกติคือ
http://localhost:5000
)หากต้องการอัปเดต URL ในเครื่องที่มีการเปลี่ยนแปลง ให้รีเฟรชเบราว์เซอร์ของคุณ
ใช้ firebase serve
เพื่อทดสอบจากอุปกรณ์ภายในเครื่องอื่นๆ
ตามค่าเริ่มต้น firebase serve
จะตอบสนองต่อคำขอจาก localhost
เท่านั้น ซึ่งหมายความว่าคุณจะสามารถเข้าถึงเนื้อหาที่โฮสต์ไว้ได้จากเว็บเบราว์เซอร์ของคอมพิวเตอร์ แต่ไม่ใช่จากอุปกรณ์อื่นในเครือข่ายของคุณ หากคุณต้องการทดสอบจากอุปกรณ์ท้องถิ่นอื่นๆ ให้ใช้แฟล็ก --host
ดังนี้:
firebase serve --host 0.0.0.0 // accepts requests to any host
ขั้นตอนที่ 2: ดูตัวอย่างและแบ่งปัน
หากคุณต้องการให้ผู้อื่นดูการเปลี่ยนแปลงในเว็บแอปของคุณก่อนเผยแพร่ คุณสามารถใช้ช่องแสดงตัวอย่างได้
หลังจากที่คุณปรับใช้กับช่องทางแสดงตัวอย่างแล้ว Firebase จะให้บริการเว็บแอปของคุณที่ "URL ตัวอย่าง" ซึ่งเป็น URL ชั่วคราวที่แชร์ได้ เมื่อใช้ URL ดูตัวอย่าง เว็บแอปของคุณจะโต้ตอบกับแบ็กเอนด์ จริง ของคุณสำหรับทรัพยากรโปรเจ็กต์ทั้งหมด (ยกเว้น ฟังก์ชัน "ปักหมุด" ในการกำหนดค่าการเขียนซ้ำของคุณ )
โปรดทราบว่าแม้ว่า URL ดูตัวอย่างจะเดาได้ยาก (เนื่องจากมีแฮชแบบสุ่ม) แต่ URL เหล่านี้เป็นแบบสาธารณะ ดังนั้นใครก็ตามที่รู้ URL ก็สามารถเข้าถึงได้
จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:
firebase hosting:channel:deploy CHANNEL_ID
แทนที่ CHANNEL_ID ด้วยสตริงที่ไม่มีช่องว่าง (เช่น
feature_mission-2-mars
) รหัสนี้จะถูกใช้เพื่อสร้าง URL ดูตัวอย่างที่เกี่ยวข้องกับช่องแสดงตัวอย่างเปิดแอปพลิเคชันเว็บของคุณที่ URL แสดงตัวอย่างที่ส่งคืนโดย CLI มันจะมีลักษณะดังนี้:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
หากต้องการอัปเดต URL ตัวอย่างของคุณที่มีการเปลี่ยนแปลง ให้รันคำสั่งเดิมอีกครั้ง ตรวจสอบให้แน่ใจว่าได้ระบุ
CHANNEL_ID
เดียวกันในคำสั่ง
เรียนรู้เกี่ยวกับ การจัดการช่องตัวอย่าง รวมถึงวิธีตั้งค่าการหมดอายุของช่อง
Firebase Hosting รองรับ GitHub Action ที่สร้างและอัปเดต URL ตัวอย่างโดยอัตโนมัติเมื่อคุณยอมรับการเปลี่ยนแปลงในคำขอดึง เรียนรู้วิธี ตั้งค่าและใช้ GitHub Action นี้
ขั้นตอนที่ 3: ปรับใช้สด
เมื่อคุณพร้อมที่จะแบ่งปันการเปลี่ยนแปลงของคุณกับโลก ให้ปรับใช้เนื้อหาโฮสติ้งของคุณและกำหนดค่าให้กับช่องถ่ายทอดสดของคุณ Firebase เสนอตัวเลือกที่แตกต่างกัน 2-3 รายการสำหรับขั้นตอนนี้โดยขึ้นอยู่กับกรณีการใช้งานของคุณ (ดูตัวเลือกด้านล่าง)
ตัวเลือกที่ 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: ปรับใช้จากไดเรกทอรีโครงการในพื้นที่ของคุณไปยังช่องถ่ายทอดสดของคุณ
ตัวเลือกนี้ให้ความยืดหยุ่นในการปรับการกำหนดค่าเฉพาะสำหรับช่องถ่ายทอดสดหรือปรับใช้แม้ว่าคุณจะไม่ได้ใช้ช่องแสดงตัวอย่างก็ตาม
จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:
firebase deploy --only hosting
ดูการเปลี่ยนแปลงของคุณ (ขั้นตอนถัดไป)
ขั้นตอนที่ 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
เพื่อดำเนินงานก่อนปรับใช้หรือหลังปรับใช้ได้ ตัวอย่างเช่น hook แบบ postdeploy สามารถแจ้งผู้ดูแลระบบเกี่ยวกับการปรับใช้เนื้อหาไซต์ใหม่ได้ โปรดดู เอกสาร Firebase CLI สำหรับรายละเอียดเพิ่มเติม
การแคชเนื้อหาที่ปรับใช้
เมื่อมีการร้องขอ เนื้อหาแบบคงที่ โฮสติ้งของ Firebase จะแคชเนื้อหาบน CDN โดยอัตโนมัติ หากคุณปรับใช้เนื้อหาในไซต์ของคุณอีกครั้ง Firebase จะล้าง เนื้อหาคงที่ที่แคชไว้ทั้งหมด ทั่วทั้ง CDN โดยอัตโนมัติ เพื่อให้คำขอใหม่ได้รับเนื้อหาใหม่ของคุณ
โปรดทราบว่าคุณสามารถกำหนดค่า การแคชเนื้อหาแบบไดนามิกได้
ให้บริการผ่าน HTTPS
ตรวจสอบให้แน่ใจว่าทรัพยากรภายนอกทั้งหมดที่ไม่ได้โฮสต์บนโฮสติ้งของ Firebase นั้นโหลดผ่าน SSL (HTTPS) รวมถึงสคริปต์ภายนอกด้วย เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้ผู้ใช้โหลด "เนื้อหาผสม" (การรับส่งข้อมูล SSL และไม่ใช่ SSL)
ขั้นตอนถัดไป
ผสานรวมกับ GitHub และทำซ้ำเนื้อหาที่แสดงตัวอย่างของคุณโดย การตั้งค่า GitHub Action
เรียนรู้เกี่ยวกับความสามารถในการโฮสต์เพิ่มเติม:
ดูเอกสารฉบับเต็มสำหรับ Firebase CLI
เตรียมเปิดตัวแอปของคุณ:
- ตั้งค่า การแจ้งเตือนงบประมาณ สำหรับโครงการของคุณใน Google Cloud Console
- ตรวจสอบ แดชบอร์ด การใช้งานและการเรียกเก็บเงิน ในคอนโซล Firebase เพื่อดูภาพรวมการใช้งานโปรเจ็กต์ของคุณในบริการ Firebase ต่างๆ คุณยังสามารถไปที่ แดชบอร์ด การใช้งาน โฮสติ้ง เพื่อดูข้อมูลการใช้งานโดยละเอียดเพิ่มเติม
- ตรวจสอบ รายการตรวจสอบการเปิดตัว Firebase