ก่อนปรับใช้กับไซต์จริงของคุณ คุณจะต้องดูและทดสอบการเปลี่ยนแปลงของคุณ Firebase Hosting ช่วยให้คุณดูและทดสอบการเปลี่ยนแปลงในเครื่องและโต้ตอบกับทรัพยากรโครงการแบ็กเอนด์ที่จำลองได้ หากคุณต้องการให้เพื่อนร่วมทีมดูและทดสอบการเปลี่ยนแปลงของคุณ โฮสติ้งสามารถสร้าง URL ตัวอย่างชั่วคราวที่แชร์ได้สำหรับไซต์ของคุณ เรายังสนับสนุน การรวม GitHub เพื่อปรับใช้จากคำขอดึง
ก่อนที่คุณจะเริ่มต้น
ทำตามขั้นตอนที่ระบุไว้ใน หน้าเริ่มต้นการโฮสต์ โดยเฉพาะงานต่อไปนี้:
- ติดตั้งหรืออัปเดต Firebase CLI เป็นเวอร์ชันล่าสุด
- เชื่อมต่อไดเร็กทอรีโปรเจ็กต์ในเครื่อง (ที่มีเนื้อหาของแอป) กับโปรเจ็กต์ Firebase
คุณสามารถเลือกปรับใช้เนื้อหาโฮสติ้งและการกำหนดค่าของแอปได้ แต่ไม่ใช่ข้อกำหนดเบื้องต้นสำหรับขั้นตอนต่างๆ ในหน้านี้
ขั้นตอนที่ 1: ทดสอบในเครื่อง
หากคุณกำลังทำซ้ำอย่างรวดเร็วหรือต้องการให้แอปของคุณโต้ตอบกับทรัพยากรโครงการแบ็กเอนด์จำลอง คุณสามารถทดสอบเนื้อหาโฮสติ้งและกำหนดค่าในเครื่องได้ เมื่อทำการทดสอบในเครื่อง Firebase จะให้บริการเว็บแอปของคุณที่ URL ที่โฮสต์ในเครื่อง
โฮสติ้งเป็นส่วนหนึ่งของ Firebase Local Emulator Suite ซึ่งทำให้แอปของคุณสามารถโต้ตอบกับเนื้อหาและการกำหนดค่าโฮสติ้ง ที่จำลอง รวมถึงทรัพยากรโครงการ ที่จำลอง (ฟังก์ชัน ฐานข้อมูล และกฎ) ซึ่งเป็นทางเลือก
(ไม่บังคับ) ตามค่าเริ่มต้น แอปที่โฮสต์ในเครื่องของคุณจะโต้ตอบกับทรัพยากรโครงการ (ฟังก์ชัน ฐานข้อมูล กฎ เป็นต้น) จริง ไม่ใช่ จำลอง คุณสามารถเลือกเชื่อมต่อแอปของคุณแทนเพื่อใช้ทรัพยากรโครงการ จำลอง ที่คุณกำหนดค่าไว้ เรียนรู้เพิ่มเติม: ฐานข้อมูลเรียลไทม์ | Cloud Firestore | ฟังก์ชั่นคลาวด์
จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:
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 สามารถเข้าถึงได้
จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:
firebase hosting:channel:deploy CHANNEL_ID
แทนที่ CHANNEL_ID ด้วยสตริงที่ไม่มีช่องว่าง (เช่น
feature_mission-2-mars
) ID นี้จะใช้เพื่อสร้าง 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 : คือ 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 หลังการปรับใช้สามารถแจ้งผู้ดูแลระบบเกี่ยวกับการปรับใช้เนื้อหาไซต์ใหม่ โปรดดู เอกสาร Firebase CLI สำหรับรายละเอียดเพิ่มเติม
การแคชเนื้อหาที่ปรับใช้
เมื่อมีการร้องขอสำหรับ เนื้อหาแบบสแตติก Firebase Hosting จะแคชเนื้อหาใน CDN โดยอัตโนมัติ หากคุณปรับใช้เนื้อหาของไซต์อีกครั้ง Firebase จะล้าง เนื้อหาคงที่ที่แคชไว้ทั้งหมดของคุณ ใน CDN โดยอัตโนมัติ เพื่อให้คำขอใหม่ได้รับเนื้อหาใหม่ของคุณ
โปรดทราบว่าคุณสามารถกำหนด ค่าการแคชของเนื้อหาไดนามิก
ให้บริการผ่าน HTTPS
ตรวจสอบให้แน่ใจว่าทรัพยากรภายนอกทั้งหมดที่ไม่ได้โฮสต์บนโฮสติ้ง Firebase ถูกโหลดผ่าน SSL (HTTPS) รวมถึงสคริปต์ภายนอกใดๆ เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้ผู้ใช้โหลด "เนื้อหาผสม" (การรับส่งข้อมูล SSL และไม่ใช่ SSL)
ขั้นตอนถัดไป
ผสานรวมกับ GitHub และทำซ้ำเนื้อหาที่แสดงตัวอย่างของคุณโดย ตั้งค่า GitHub Action
เรียนรู้เกี่ยวกับความสามารถในการโฮสต์เพิ่มเติม:
ดูเอกสารฉบับเต็มสำหรับ Firebase CLI
เตรียมเปิดตัวแอปของคุณ:
- ตั้งค่า การแจ้งเตือนงบประมาณ สำหรับโครงการของคุณใน Google Cloud Console
- ตรวจสอบ แดชบอร์ด การใช้งานและการเรียกเก็บเงิน ในคอนโซล Firebase เพื่อดูภาพรวมของการใช้งานโครงการของคุณในบริการต่างๆ ของ Firebase คุณยังสามารถเยี่ยมชม แดชบอร์ด การใช้งาน โฮสติ้ง สำหรับข้อมูลการใช้งานโดยละเอียดเพิ่มเติม
- ตรวจสอบ รายการตรวจสอบการเปิดใช้ Firebase