ก่อนที่จะทำให้ใช้งานได้ในเว็บไซต์ที่เผยแพร่อยู่ คุณควรดูและทดสอบการเปลี่ยนแปลงก่อน โฮสติ้งของ Firebase ช่วยให้คุณดูและทดสอบการเปลี่ยนแปลงในเครื่องและโต้ตอบได้ ด้วยทรัพยากรโปรเจ็กต์แบ็กเอนด์ที่จำลองขึ้นมา หากคุณต้องการให้เพื่อนร่วมทีมดูและ โฮสต์สามารถสร้าง URL ตัวอย่างชั่วคราวที่แชร์ได้ เว็บไซต์ของคุณ เรายังรองรับ การผสานรวม GitHub เพื่อติดตั้งใช้งานจากการดึงข้อมูล อีกครั้ง
ก่อนเริ่มต้น
โปรดทำตามขั้นตอนที่ระบุไว้ใน หน้าเริ่มต้นใช้งานโฮสติ้ง โดยเฉพาะอย่างยิ่ง งานต่อไปนี้:
- ติดตั้งหรืออัปเดต Firebase CLI เป็นเวอร์ชันล่าสุด
- เชื่อมต่อไดเรกทอรีโปรเจ็กต์ในเครื่อง (ที่มีเนื้อหาของแอป) กับ โปรเจ็กต์ Firebase
คุณสามารถเลือกทำให้เนื้อหาและการกำหนดค่าโฮสติ้งของแอปใช้งานได้ แต่ ไม่ใช่ข้อกำหนดเบื้องต้นสำหรับขั้นตอนในหน้านี้
ขั้นตอนที่ 1: ทดสอบในเครื่อง
หากคุณกำลังปรับปรุงอย่างรวดเร็วหรือต้องการให้แอปโต้ตอบกับโปรแกรมจำลอง ทรัพยากรโปรเจ็กต์แบ็กเอนด์ คุณสามารถทดสอบเนื้อหาและการกำหนดค่าโฮสติ้ง ในเครื่อง เมื่อทดสอบในเครื่อง Firebase จะแสดงเว็บแอปของคุณที่โฮสต์ในเครื่อง URL
โฮสติ้งเป็นส่วนหนึ่งของชุดโปรแกรมจำลองภายในของ Firebase ซึ่งทำให้แอปของคุณโต้ตอบกับเนื้อหาโฮสติ้งที่จำลองและ รวมถึงทรัพยากรโปรเจ็กต์ที่จำลอง (ฟังก์ชัน ฐานข้อมูล และกฎ)
(ไม่บังคับ) โดยค่าเริ่มต้น แอปที่โฮสต์ในเครื่องของคุณจะโต้ตอบกับแท็กจริง ไม่ได้จำลองทรัพยากรของโปรเจ็กต์ (ฟังก์ชัน ฐานข้อมูล กฎ ฯลฯ) คุณเลือกเชื่อมต่อแอปเพื่อใช้โปรเจ็กต์จำลองใดก็ได้แทน ทรัพยากรที่กำหนดค่าไว้ ดูข้อมูลเพิ่มเติม Realtime Database | Cloud Firestore | ฟังก์ชันระบบคลาวด์
เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง
firebase emulators:start
เปิดเว็บแอปที่ URL ในเครื่องที่ CLI แสดงผล (โดยทั่วไปคือ
http://localhost:5000
).หากต้องการอัปเดต URL ในเครื่องที่มีการเปลี่ยนแปลง ให้รีเฟรชเบราว์เซอร์
ทดสอบจากอุปกรณ์อื่นในเครือข่ายเดียวกัน
โดยค่าเริ่มต้น โปรแกรมจำลองจะตอบสนองคำขอจาก localhost
เท่านั้น ช่วงเวลานี้
หมายความว่าคุณจะสามารถเข้าถึงเนื้อหาที่โฮสต์ไว้จากเว็บของคอมพิวเตอร์ของคุณได้
เบราว์เซอร์แต่ไม่ได้มาจากอุปกรณ์อื่นๆ ในเครือข่ายของคุณ หากคุณต้องการทดสอบจาก
ในอุปกรณ์อื่น ให้กำหนดค่า firebase.json
ดังนี้
"emulators": {
// ...
"hosting": {
"port": 5000,
"host": "0.0.0.0"
}
}
ขั้นตอนที่ 2: ดูตัวอย่างและแชร์
หากต้องการให้ผู้อื่นดูการเปลี่ยนแปลงเว็บแอปของคุณก่อนเผยแพร่ โปรดทำดังนี้ ใช้เวอร์ชันตัวอย่าง
หลังจากที่คุณปรับใช้กับช่องทางตัวอย่างแล้ว Firebase จะแสดงเว็บแอปของคุณ "URL ตัวอย่าง" ซึ่งเป็น URL ชั่วคราวที่แชร์ได้ เมื่อใช้ URL ตัวอย่าง เว็บแอปของคุณโต้ตอบกับแบ็กเอนด์จริงสำหรับทรัพยากรทั้งหมดของโปรเจ็กต์ (ด้วย ข้อยกเว้นของ "ปักหมุด" ฟังก์ชันการเขียนใหม่ config)
โปรดทราบว่าแม้ว่า 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 รองรับการดำเนินการ GitHub ที่จะสร้างและ อัปเดต URL ตัวอย่างเมื่อคุณยืนยันการเปลี่ยนแปลงกับคำขอพุล เรียนรู้วิธีการ ตั้งค่าและใช้การดำเนินการ GitHub นี้
ขั้นตอนที่ 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: ดูการเปลี่ยนแปลงในเว็บไซต์ที่เผยแพร่อยู่
ทั้ง 2 ตัวเลือกข้างต้นทำให้เนื้อหาโฮสติ้งใช้งานได้และกำหนดค่า เว็บไซต์ต่อไปนี้:
โดเมนย่อยที่ 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."
เพิ่มงานสคริปต์ล่วงหน้าและหลังทำให้ใช้งานได้
คุณเลือกเชื่อมต่อสคริปต์ Shell กับคำสั่ง firebase deploy
เพื่อทำสิ่งต่อไปนี้ก็ได้
ทำงานก่อนการทำให้ใช้งานได้หรือภายหลังการปรับใช้ ตัวอย่างเช่น ฮุกหลังจากทำให้ใช้งานได้อาจ
แจ้งให้ผู้ดูแลระบบทราบเมื่อมีการใช้เนื้อหาไซต์ใหม่ โปรดดู
ดูรายละเอียดเพิ่มเติมในเอกสารประกอบเกี่ยวกับ Firebase CLI
กำลังแคชเนื้อหาที่ทำให้ใช้งานได้
เมื่อมีการส่งคำขอสำหรับเนื้อหาแบบคงที่ โฮสติ้งของ Firebase โดยอัตโนมัติ แคชเนื้อหาใน CDN หากคุณทำให้เนื้อหาในเว็บไซต์ใช้งานได้อีกครั้ง Firebase ล้างเนื้อหาคงที่ที่แคชไว้ทั้งหมดทั่วทั้ง CDN โดยอัตโนมัติเพื่อให้ จะได้รับเนื้อหาใหม่ของคุณ
โปรดทราบว่าคุณสามารถกำหนดค่า การแคชเนื้อหาแบบไดนามิก
การแสดงผลผ่าน HTTPS
ตรวจสอบว่าทรัพยากรภายนอกทั้งหมดที่ไม่ได้โฮสต์อยู่ โฮสติ้งของ Firebase จะโหลดผ่าน SSL (HTTPS) รวมถึงสคริปต์ภายนอกทั้งหมด เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้ผู้ใช้โหลด "เนื้อหาผสม" (SSL และไม่ใช่ SSL การจราจร)
กำลังลบไฟล์
ในโฮสติ้งของ Firebase วิธีหลักในการลบไฟล์ที่เลือก จากเว็บไซต์ที่ทำให้ใช้งานได้แล้วคือการลบไฟล์ในเครื่อง แล้วทำให้ใช้งานได้อีกครั้ง
ขั้นตอนถัดไป
ผสานรวมกับ GitHub และสร้างเนื้อหาตัวอย่างโดย การตั้งค่าการดำเนินการ GitHub
ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการโฮสต์เพิ่มเติม
โปรดดูเอกสารฉบับเต็มสำหรับ Firebase CLI
เตรียมเปิดตัวแอป
- ตั้งค่า งบประมาณ การแจ้งเตือน สำหรับโปรเจ็กต์ในคอนโซล Google Cloud
- ตรวจสอบการใช้งานและการเรียกเก็บเงิน แดชบอร์ด ในคอนโซล Firebase เพื่อดูภาพรวมของโปรเจ็กต์ ในบริการต่างๆ ของ Firebase คุณยังสามารถไปที่การใช้งานโฮสติ้ง แดชบอร์ดเพิ่มเติม รายละเอียดข้อมูลการใช้งาน
- ดูรายการตรวจสอบการเปิดตัว Firebase