ก่อนที่จะทำให้ใช้งานได้ในเว็บไซต์ที่เผยแพร่อยู่ คุณควรดูและทดสอบการเปลี่ยนแปลงก่อน Firebase Hosting ช่วยให้คุณดูและทดสอบการเปลี่ยนแปลงในเครื่องและโต้ตอบได้ ด้วยทรัพยากรโปรเจ็กต์แบ็กเอนด์ที่จำลองขึ้นมา หากคุณต้องการให้เพื่อนร่วมทีมดูและ ทดสอบการเปลี่ยนแปลงของคุณ Hosting สามารถสร้าง URL ตัวอย่างชั่วคราวที่แชร์ได้สำหรับ เว็บไซต์ของคุณ เรายังรองรับ การผสานรวม GitHub เพื่อติดตั้งใช้งานจากการดึงข้อมูล อีกครั้ง
ก่อนเริ่มต้น
ทำตามขั้นตอนที่ระบุไว้ในHostingหน้าเริ่มต้นใช้งาน โดยเฉพาะงานต่อไปนี้
- ติดตั้งหรืออัปเดต Firebase CLI เป็นเวอร์ชันล่าสุด
- เชื่อมต่อไดเรกทอรีโปรเจ็กต์ในเครื่อง (ที่มีเนื้อหาของแอป) กับ โปรเจ็กต์ Firebase
คุณอาจทําให้เนื้อหาและการกำหนดค่า Hosting ของแอปใช้งานได้ แต่ขั้นตอนในหน้านี้ไม่ได้กําหนดให้ทําเช่นนั้น
ขั้นตอนที่ 1: ทดสอบในเครื่อง
หากคุณกำลังปรับปรุงอย่างรวดเร็วหรือต้องการให้แอปโต้ตอบกับโปรแกรมจำลอง ทรัพยากรโปรเจ็กต์แบ็กเอนด์ คุณสามารถทดสอบเนื้อหาและการกำหนดค่าของ Hosting ได้ ในเครื่อง เมื่อทดสอบในเครื่อง Firebase จะแสดงเว็บแอปของคุณที่โฮสต์ในเครื่อง URL
Hosting เป็นส่วนหนึ่งของ Firebase Local Emulator Suite ซึ่งทำให้แอปของคุณโต้ตอบกับเนื้อหา Hosting ที่จำลองและ รวมถึงทรัพยากรโปรเจ็กต์แบบจำลอง (ฟังก์ชัน ฐานข้อมูล และกฎ)
(ไม่บังคับ) โดยค่าเริ่มต้น แอปที่โฮสต์ในเครื่องจะโต้ตอบกับทรัพยากรโปรเจ็กต์ (ฟังก์ชัน ฐานข้อมูล กฎ ฯลฯ) ที่จริง ไม่ใช่จำลอง คุณเลือกเชื่อมต่อแอปเพื่อใช้โปรเจ็กต์จำลองใดก็ได้แทน ทรัพยากรที่กำหนดค่าไว้ ดูข้อมูลเพิ่มเติม Realtime Database | Cloud Firestore | Cloud Functions
จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง ให้เรียกใช้คำสั่งต่อไปนี้
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 นี้จะสามารถเข้าถึง 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 นี้
ขั้นตอนที่ 3: ใช้งานจริง
ทำให้ Hosting ใช้งานได้เมื่อคุณพร้อมแชร์การเปลี่ยนแปลงของคุณกับผู้คนทั่วโลก เนื้อหาและการกำหนดค่า ให้ช่องถ่ายทอดสดของคุณ Firebase มีตัวเลือก 2-3 รายการสําหรับขั้นตอนนี้ โดยขึ้นอยู่กับกรณีการใช้งานของคุณ (ดูตัวเลือกด้านล่าง)
ตัวเลือกที่ 1: โคลนจากช่องตัวอย่างไปยังช่องถ่ายทอดสด
ตัวเลือกนี้จะช่วยให้มั่นใจได้ว่าคุณ จะนำไปใช้กับช่องสดของคุณ เนื้อหาและการกำหนดค่าแบบตรงทั้งหมดที่คุณทดสอบในช่องตัวอย่าง ดูข้อมูลเพิ่มเติม ประมาณ การโคลนเวอร์ชัน
เรียกใช้คําสั่งต่อไปนี้จากไดเรกทอรีใดก็ได้
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
แทนที่ตัวยึดตําแหน่งแต่ละรายการด้วยข้อมูลต่อไปนี้
SOURCE_SITE_ID และ TARGET_SITE_ID: นี่คือรหัส จากเว็บไซต์ Hosting ที่มีช่อง
- สําหรับเว็บไซต์ Hosting เริ่มต้น ให้ใช้รหัสโปรเจ็กต์ Firebase
- คุณสามารถระบุเว็บไซต์ที่อยู่ในโปรเจ็กต์ Firebase เดียวกันหรือโปรเจ็กต์ Firebase ที่แตกต่างกันได้
SOURCE_CHANNEL_ID: ข้อมูลนี้คือตัวระบุช่องที่ กำลังแสดงเวอร์ชันที่คุณต้องการติดตั้งใช้งานในช่องถ่ายทอดสด
- สำหรับช่องถ่ายทอดสด ให้ใช้
live
เป็นรหัสช่อง
- สำหรับช่องถ่ายทอดสด ให้ใช้
ดูการเปลี่ยนแปลง (ขั้นตอนถัดไป)
ตัวเลือกที่ 2: ติดตั้งใช้งานจากไดเรกทอรีโปรเจ็กต์ในเครื่องไปยังช่องที่เผยแพร่อยู่
ตัวเลือกนี้ช่วยให้คุณปรับการกำหนดค่าสำหรับแชแนลเวอร์ชันที่ใช้งานจริงโดยเฉพาะหรือเพื่อทำให้ใช้งานได้แม้ว่าคุณจะไม่ได้ใช้แชแนลเวอร์ชันตัวอย่างก็ตาม
เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง
firebase deploy --only hosting
ดูการเปลี่ยนแปลง (ขั้นตอนถัดไป)
ขั้นตอนที่ 4: ดูการเปลี่ยนแปลงในเว็บไซต์ที่เผยแพร่อยู่
ตัวเลือกทั้ง 2 รายการข้างต้นจะติดตั้งใช้งานเนื้อหาและการกำหนดค่า Hosting ไปยังเว็บไซต์ต่อไปนี้
โดเมนย่อยที่จัดสรรโดย Firebase สำหรับเว็บไซต์ Hosting เริ่มต้นและทุกหน้า Hosting เว็บไซต์เพิ่มเติม:
SITE_ID.web.app
(เช่นPROJECT_ID.web.app
)
SITE_ID.firebaseapp.com
(เช่นPROJECT_ID.firebaseapp.com
)โดเมนที่กำหนดเองที่เชื่อมต่ออยู่ เว็บไซต์ Hosting ของคุณ
หากต้องการจำกัดการทําให้ใช้งานได้ในเว็บไซต์ Hosting ที่เฉพาะเจาะจง ให้ระบุเป้าหมายการทําให้ใช้งานได้ในคําสั่ง CLI
กิจกรรมและข้อมูลอื่นๆ เกี่ยวกับการติดตั้งใช้งาน
เพิ่มความคิดเห็นสำหรับการทำให้ใช้งานได้
คุณเพิ่มความคิดเห็นในการทําให้การเผยแพร่ใช้งานได้ (ไม่บังคับ) ความคิดเห็นนี้จะแสดง ข้อมูลการติดตั้งใช้งานอื่นๆ ได้ใน หน้าแดชบอร์ด Hosting ในคอนโซล Firebase เช่น
firebase deploy --only hosting -m "Deploying the best new feature ever."
เพิ่มงานสคริปต์ล่วงหน้าและหลังทำให้ใช้งานได้
คุณเลือกเชื่อมต่อสคริปต์ Shell กับคำสั่ง firebase deploy
เพื่อทำสิ่งต่อไปนี้ก็ได้
ทำงานก่อนการทำให้ใช้งานได้หรือภายหลังการปรับใช้ เช่น ฮุกหลังการทําให้ใช้งานได้อาจแจ้งให้ผู้ดูแลระบบทราบเกี่ยวกับการทําให้เนื้อหาเว็บไซต์ใหม่ใช้งานได้ โปรดดู
ดูรายละเอียดเพิ่มเติมในเอกสารประกอบเกี่ยวกับ CLI Firebase
กำลังแคชเนื้อหาที่ทำให้ใช้งานได้
เมื่อมีการขอเนื้อหาแบบคงที่ Firebase Hosting จะแคชเนื้อหาใน CDN โดยอัตโนมัติ หากคุณทําให้การเผยแพร่เนื้อหาของเว็บไซต์อีกครั้ง Firebase จะล้างเนื้อหาแบบคงที่ที่แคชไว้ทั้งหมดใน CDN โดยอัตโนมัติเพื่อให้คําขอใหม่ได้รับเนื้อหาใหม่
โปรดทราบว่าคุณสามารถกำหนดค่า การแคชเนื้อหาแบบไดนามิก
การแสดงผลผ่าน HTTPS
ตรวจสอบว่าทรัพยากรภายนอกทั้งหมดที่ไม่ได้โฮสต์ใน Firebase Hosting โหลดผ่าน SSL (HTTPS) รวมถึงสคริปต์ภายนอก เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้ผู้ใช้โหลด "เนื้อหาแบบผสม" (การเข้าชมแบบ SSL และแบบไม่ใช้ SSL)
กำลังลบไฟล์
ใน Firebase Hosting วิธีหลักในการลบไฟล์ที่เลือกจากเว็บไซต์ที่ติดตั้งใช้งานแล้วคือการลบไฟล์ในเครื่อง จากนั้นจึงติดตั้งใช้งานอีกครั้ง
ขั้นตอนถัดไป
ผสานรวมกับ GitHub และสร้างเนื้อหาตัวอย่างโดย การตั้งค่าการดำเนินการ GitHub
ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการโฮสต์เพิ่มเติม
โปรดดูเอกสารฉบับเต็มสำหรับ Firebase CLI
เตรียมเปิดตัวแอป
- ตั้งค่าการแจ้งเตือนเกี่ยวกับงบประมาณสำหรับโปรเจ็กต์ในคอนโซล Google Cloud
- ตรวจสอบแดชบอร์ดการใช้งานและการเรียกเก็บเงินในคอนโซล Firebase เพื่อดูภาพรวมการใช้งานโปรเจ็กต์ในบริการ Firebase หลายรายการ นอกจากนี้ คุณยังไปที่Hostingแดชบอร์ดการใช้งานเพื่อดูข้อมูลการใช้งานโดยละเอียดได้อีกด้วย
- ตรวจสอบรายการตรวจสอบการเปิดตัว Firebase