คุณตั้งค่าเว็บไซต์ Firebase Hosting อย่างน้อย 1 เว็บไซต์ในโปรเจ็กต์ Firebase โปรเจ็กต์เดียวได้ เนื่องจากเว็บไซต์ทั้งหมดอยู่ในโปรเจ็กต์ Firebase เดียวกัน เว็บไซต์ทั้งหมดจึงเข้าถึงทรัพยากร Firebase อื่นๆ ของโปรเจ็กต์ได้
- แต่ละเว็บไซต์มีการกำหนดค่าโฮสติ้งเป็นของตัวเอง
- แต่ละเว็บไซต์จะโฮสต์คอลเล็กชันเนื้อหาของตัวเอง
- แต่ละเว็บไซต์มีโดเมนที่เชื่อมโยงได้อย่างน้อย 1 รายการ
การตั้งค่าเว็บไซต์ Hosting หลายแห่งภายในโปรเจ็กต์ Firebase เดียวกันจะช่วยให้คุณแชร์ทรัพยากร Firebase ระหว่างเว็บไซต์และแอปที่เกี่ยวข้องได้ง่ายขึ้น ตัวอย่างเช่น หากคุณตั้งค่าบล็อก แผงการดูแลระบบ และแอปสาธารณะเป็นเว็บไซต์แต่ละแห่งในโปรเจ็กต์ Firebase เดียวกัน เว็บไซต์ทั้งหมดจะแชร์Firebase Authenticationฐานข้อมูลผู้ใช้เดียวกันได้ พร้อมกับมีโดเมนหรือเนื้อหาที่ไม่ซ้ำกันของตนเอง
ขั้นตอนที่ 1: อัปเดตเวอร์ชัน Firebase CLI
เข้าถึงฟีเจอร์ Firebase Hosting ล่าสุดโดยอัปเดต Firebase CLI เป็นเวอร์ชันล่าสุด
ขั้นตอนที่ 2: เพิ่มเว็บไซต์อื่นๆ
เพิ่มเว็บไซต์อื่นๆ ลงในโปรเจ็กต์ Firebase โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
ใช้เวิร์กโฟลว์ในหน้า Hosting ของคอนโซล Firebase
ใช้คำสั่ง Firebase CLI ต่อไปนี้
firebase hosting:sites:create SITE_ID
ใช้ Hosting REST API:
projects.sites.create
สำหรับแต่ละวิธีเหล่านี้ คุณจะระบุ SITE_ID
ซึ่งใช้ในการสร้างโดเมนย่อยเริ่มต้นที่ Firebase จัดสรรให้เว็บไซต์
SITE_ID.web.app
SITE_ID.firebaseapp.com
เนื่องจากมีการใช้ SITE_ID
สำหรับ URL เหล่านี้ รหัสเว็บไซต์จึงมีข้อกําหนดต่อไปนี้
- ต้องเป็นป้ายกำกับชื่อโฮสต์ที่ถูกต้อง ซึ่งหมายความว่าต้องไม่มี
.
,_
ฯลฯ - ต้องมีความยาวไม่เกิน 30 อักขระ
- ต้องไม่ซ้ำกันทั่วโลกภายใน Firebase
นอกจากนี้ คุณยังเพิ่มโดเมนที่กำหนดเองให้กับแต่ละเว็บไซต์เพื่อแสดงเนื้อหาและการกำหนดค่าเดียวกันใน URL หลายรายการได้ด้วย
ลบเว็บไซต์รอง
ลบเว็บไซต์ที่ไม่ต้องการออกจากโปรเจ็กต์ Firebase โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
ใช้เวิร์กโฟลว์ในหน้า Hosting ของคอนโซล Firebase
ใช้คำสั่ง Firebase CLI ต่อไปนี้
firebase hosting:sites:delete SITE_ID
ใช้ Hosting REST API:
projects.sites.delete
โปรดทราบว่าคุณจะลบเว็บไซต์เริ่มต้นซึ่งมี SITE_ID
เหมือนกับรหัสโปรเจ็กต์ Firebase ไม่ได้
ขั้นตอนที่ 3: ตั้งค่าเป้าหมายการนําไปใช้สําหรับเว็บไซต์
เมื่อคุณมีเว็บไซต์หลายแห่งและเรียกใช้Firebaseคําสั่งการทําให้ใช้งานได้ของ CLI แล้ว CLI จะต้องมีวิธีสื่อสารว่าควรทําให้การตั้งค่าใดใช้งานได้ในเว็บไซต์แต่ละแห่ง เป้าหมายการนําไปใช้จริงช่วยให้คุณระบุเว็บไซต์ที่เฉพาะเจาะจงได้โดยใช้ TARGET_NAME
ในไฟล์การกําหนดค่า firebase.json
และคําสั่ง CLI Firebase สำหรับการทดสอบหรือการใช้กับเว็บไซต์
หากต้องการสร้างเป้าหมายการทำให้ใช้งานได้และใช้ TARGET_NAME
กับเว็บไซต์ Hosting ให้เรียกใช้คำสั่ง CLI ต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์
firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER
โดยพารามิเตอร์มีดังนี้
TARGET_NAME — ชื่อที่ไม่ซ้ำกัน (ที่คุณกำหนดเอง) สำหรับเว็บไซต์ Hosting ที่จะติดตั้งใช้งาน
RESOURCE_IDENTIFIER —
SITE_ID
สำหรับเว็บไซต์ Hosting ตามที่ระบุไว้ในโปรเจ็กต์ Firebase
ตัวอย่างเช่น หากคุณสร้างเว็บไซต์ 2 แห่ง (myapp-blog
และ myapp-app
) ในโปรเจ็กต์ Firebase คุณสามารถใช้ TARGET_NAME
ที่ไม่ซ้ำกัน (blog
และ app
ตามลำดับ) กับแต่ละเว็บไซต์ได้โดยเรียกใช้คำสั่งต่อไปนี้
firebase target:apply hosting blog myapp-blog
firebase target:apply hosting app myapp-app
ระบบจะจัดเก็บการตั้งค่าสำหรับเป้าหมายการนําส่งไว้ในไฟล์ .firebaserc
ในไดเรกทอรีโปรเจ็กต์ คุณจึงต้องตั้งค่าเป้าหมายการนําส่งเพียงครั้งเดียวต่อโปรเจ็กต์
ขั้นตอนที่ 4: กําหนดการกําหนดค่าโฮสติ้งสําหรับแต่ละเว็บไซต์
ใช้ TARGET_NAME
ที่ใช้งานของเว็บไซต์เมื่อคุณกําหนดการกําหนดค่าโฮสติ้งในไฟล์ firebase.json
หากไฟล์
firebase.json
กำหนดการกำหนดค่าสำหรับหลายเว็บไซต์ ให้ใช้รูปแบบอาร์เรย์ ดังนี้{ "hosting": [ { "target": "blog", // "blog" is the applied TARGET_NAME for the Hosting site "myapp-blog" "public": "blog/dist", // contents of this folder are deployed to the site "myapp-blog" // ... }, { "target": "app", // "app" is the applied TARGET_NAME for the Hosting site "myapp-app" "public": "app/dist", // contents of this folder are deployed to the site "myapp-app" // ... "rewrites": [...] // You can define specific Hosting configurations for each site } ] }
หากไฟล์
firebase.json
กำหนดการกำหนดค่าสำหรับเว็บไซต์เพียงเว็บไซต์เดียว คุณไม่จำเป็นต้องใช้รูปแบบอาร์เรย์{ "hosting": { "target": "blog", "public": "dist", // ... "rewrites": [...] } }
ขั้นตอนที่ 5: ทดสอบในเครื่อง แสดงตัวอย่างการเปลี่ยนแปลง และติดตั้งใช้งานในเว็บไซต์
เรียกใช้คําสั่งใดก็ได้ต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง
คำสั่ง | คำอธิบาย |
---|---|
firebase emulators:start --only hosting |
จําลองเนื้อหาและการกำหนดค่า Hosting ของเว็บไซต์ Hosting เริ่มต้น ที่ URL ที่โฮสต์ในเครื่อง |
firebase emulators:start --only hosting:TARGET_NAME |
จำลองเนื้อหาและการกำหนดค่า Hosting ของเว็บไซต์ Hosting ที่ระบุใน URL ที่โฮสต์ในเครื่อง |
firebase hosting:channel:deploy \ |
ติดตั้งใช้งานเนื้อหาและการกำหนดค่า Hosting ของเว็บไซต์ Hosting เริ่มต้น ที่ URL แสดงตัวอย่าง |
firebase hosting:channel:deploy \ |
ติดตั้งใช้งานเนื้อหาและการกำหนดค่า Hosting ของเว็บไซต์ Hosting ที่ระบุใน URL ตัวอย่าง |
firebase deploy --only hosting |
ติดตั้งใช้งานเนื้อหาและการกำหนดค่า Hosting ไปยังช่องถ่ายทอดสดของเว็บไซต์ Hosting ทั้งหมดที่กําหนดค่าไว้ใน firebase.json
|
firebase deploy --only hosting:TARGET_NAME |
ติดตั้งใช้งานเนื้อหาและการกำหนดค่า Hosting ไปยังช่องที่เผยแพร่อยู่ของเว็บไซต์ Hosting ที่ระบุ |
คำสั่ง | คำอธิบาย |
---|---|
(ไม่แนะนำ ให้ใช้ emulators:start แทน)firebase serve --only hosting
|
แสดงเนื้อหาและการกำหนดค่า Hosting ของเว็บไซต์ Hosting เริ่มต้น ใน URL ที่โฮสต์ในเครื่อง |
(ไม่แนะนำ ให้ใช้ emulators:start แทน)firebase serve --only hosting:TARGET_NAME
|
แสดงเนื้อหาและการกำหนดค่า Hosting ของเว็บไซต์ Hosting ที่ระบุใน URL ที่โฮสต์ในเครื่อง |