แชร์แหล่งข้อมูลของโครงการในหลายเว็บไซต์

คุณตั้งค่าเว็บไซต์ Firebase Hosting อย่างน้อย 1 เว็บไซต์ในโปรเจ็กต์ Firebase โปรเจ็กต์เดียวได้ เนื่องจากเว็บไซต์ทั้งหมดอยู่ในโปรเจ็กต์ Firebase เดียวกัน เว็บไซต์ทั้งหมดจึงเข้าถึงทรัพยากร Firebase อื่นๆ ของโปรเจ็กต์ได้

การตั้งค่าเว็บไซต์ 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 และในFirebaseคำสั่ง CLI เพื่อการทดสอบหรือทำให้ใช้งานได้กับเว็บไซต์ของคุณ

หากต้องการสร้างเป้าหมายการทำให้ใช้งานได้และใช้ 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 \
CHANNEL_ID		 ติดตั้งใช้งานเนื้อหาและการกำหนดค่า Hosting ของเว็บไซต์ Hosting เริ่มต้น ที่ URL แสดงตัวอย่าง
firebase hosting:channel:deploy \
CHANNEL_ID --only TARGET_NAME		 ติดตั้งใช้งานเนื้อหาและการกำหนดค่า 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 ที่โฮสต์ไว้ในเครื่อง