ก่อนปรับใช้กับไซต์จริงของคุณ คุณจะต้องดูและทดสอบการเปลี่ยนแปลงของคุณ Firebase Hosting ช่วยให้คุณดูและทดสอบการเปลี่ยนแปลงในเครื่องและโต้ตอบกับทรัพยากรโปรเจ็กต์แบ็กเอนด์ที่จำลองได้ หากคุณต้องการให้เพื่อนร่วมทีมดูและทดสอบการเปลี่ยนแปลงของคุณ Hosting สามารถสร้าง URL แสดงตัวอย่างชั่วคราวที่แชร์ได้สำหรับเว็บไซต์ของคุณ เรายังสนับสนุนการ รวม GitHub เพื่อปรับใช้จากคำขอดึง
ก่อนจะเริ่ม
ทำตามขั้นตอนที่ระบุไว้ในหน้า Hosting Get Started โดยเฉพาะงานต่อไปนี้:
- ติดตั้งหรืออัปเดต 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
) รหัสนี้จะใช้เพื่อสร้าง URL ตัวอย่างที่เชื่อมโยงกับช่องแสดงตัวอย่างเปิดเว็บแอปของคุณที่ URL แสดงตัวอย่างที่ส่งคืนโดย CLI ซึ่งจะมีลักษณะดังนี้:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
หากต้องการอัปเดต URL แสดงตัวอย่างด้วยการเปลี่ยนแปลง ให้เรียกใช้คำสั่งเดิมอีกครั้ง ตรวจสอบให้แน่ใจว่าได้ระบุ
CHANNEL_ID
เดียวกันในคำสั่ง
เรียนรู้เกี่ยวกับ การจัดการช่องแสดงตัวอย่าง รวมถึงวิธีตั้งค่าการหมดอายุของช่อง
Firebase Hosting รองรับ GitHub Action ที่สร้างและอัปเดต URL แสดงตัวอย่างโดยอัตโนมัติเมื่อคุณยอมรับการเปลี่ยนแปลงกับคำขอดึง เรียนรู้วิธี ตั้งค่าและใช้งาน GitHub Action นี้
ขั้นตอนที่ 3: ทำให้ใช้งานได้จริง
เมื่อคุณพร้อมที่จะแบ่งปันการเปลี่ยนแปลงของคุณกับคนทั้งโลก ปรับใช้เนื้อหาโฮสติ้งและกำหนดค่าให้กับช่องถ่ายทอดสดของคุณ Firebase เสนอตัวเลือกที่แตกต่างกันสองสามอย่างสำหรับขั้นตอนนี้ ขึ้นอยู่กับกรณีการใช้งานของคุณ (ดูตัวเลือกด้านล่าง)
ตัวเลือกที่ 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
firebase เพื่อทำงานล่วงหน้าหรือภายหลังการปรับใช้ ตัวอย่างเช่น postdeploy hook สามารถแจ้งผู้ดูแลระบบเกี่ยวกับการปรับใช้เนื้อหาไซต์ใหม่ โปรดดู เอกสาร Firebase CLI สำหรับรายละเอียดเพิ่มเติม
การแคชเนื้อหาที่ปรับใช้
เมื่อมีการร้องขอ เนื้อหาแบบคงที่ Firebase Hosting จะแคชเนื้อหาบน CDN โดยอัตโนมัติ หากคุณทำให้เนื้อหาของไซต์ใช้งานได้อีกครั้ง Firebase จะล้าง เนื้อหาสแตติกที่แคชไว้ทั้งหมด โดยอัตโนมัติใน CDN เพื่อให้คำขอใหม่ได้รับเนื้อหาใหม่ของคุณ
โปรดทราบว่าคุณสามารถกำหนดค่าการ แคชเนื้อหาแบบไดนามิก ได้
ให้บริการผ่าน HTTPS
ตรวจสอบให้แน่ใจว่าทรัพยากรภายนอกทั้งหมดที่ไม่ได้โฮสต์บน Firebase Hosting นั้นโหลดผ่าน SSL (HTTPS) รวมถึงสคริปต์ภายนอกด้วย เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้ผู้ใช้โหลด "เนื้อหาผสม" (การรับส่งข้อมูล SSL และไม่ใช่ SSL)
ขั้นตอนถัดไป
ผสานรวมกับ GitHub และทำซ้ำเนื้อหาที่แสดงตัวอย่างของคุณโดย การตั้งค่า GitHub Action
เรียนรู้เกี่ยวกับความสามารถในการโฮสต์เพิ่มเติม:
ดูเอกสารฉบับเต็มสำหรับ Firebase CLI
เตรียมเปิดแอปของคุณ:
- ตั้งค่า การแจ้งเตือนงบประมาณ สำหรับโครงการของคุณใน Google Cloud Console
- ตรวจสอบ แดชบอร์ด การใช้งานและการเรียกเก็บเงิน ในคอนโซล Firebase เพื่อดูภาพรวมการใช้งานโปรเจ็กต์ของคุณในบริการ Firebase ที่หลากหลาย คุณยังสามารถไปที่ แดชบอร์ด การใช้งาน โฮสติ้ง เพื่อดูข้อมูลการใช้งานโดยละเอียดเพิ่มเติม
- ตรวจ สอบรายการตรวจสอบการเปิดตัว Firebase