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

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

การตั้งค่าเว็บไซต์โฮสติ้งหลายเว็บไซต์ภายในโปรเจ็กต์ Firebase เดียวกันจะทำให้คุณแชร์ทรัพยากร Firebase ระหว่างเว็บไซต์และแอปที่เกี่ยวข้องได้ง่ายขึ้น เช่น หากคุณตั้งค่าบล็อก แผงผู้ดูแลระบบ และแอปสาธารณะเป็นแต่ละเว็บไซต์ในโปรเจ็กต์ Firebase เดียวกัน เว็บไซต์เหล่านั้นทั้งหมดจะแชร์ฐานข้อมูลผู้ใช้การตรวจสอบสิทธิ์ Firebase เดียวกันได้ ในขณะเดียวกันก็มีโดเมนหรือเนื้อหาที่ไม่ซ้ำกันด้วย

ขั้นตอนที่ 1: อัปเดตเวอร์ชัน Firebase CLI

เข้าถึงฟีเจอร์โฮสติ้งของ Firebase ล่าสุดได้โดย การอัปเดต Firebase CLI เป็นเวอร์ชันล่าสุด

ขั้นตอนที่ 2: เพิ่มเว็บไซต์อื่นๆ

เพิ่มเว็บไซต์ลงในโปรเจ็กต์ Firebase โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

  • ใช้เวิร์กโฟลว์ในหน้าโฮสติ้งของคอนโซล 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 โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

  • ใช้เวิร์กโฟลว์ในหน้าโฮสติ้งของคอนโซล 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 กับเว็บไซต์โฮสติ้ง ให้เรียกใช้คำสั่ง CLI ต่อไปนี้จากรูทของไดเรกทอรีโปรเจ็กต์

firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER

โดยพารามิเตอร์มีดังนี้

  • TARGET_NAME — ชื่อที่ไม่ซ้ำกัน (ที่คุณกำหนดด้วยตนเอง) สำหรับเว็บไซต์โฮสติ้งที่คุณทำให้ใช้งานได้

  • RESOURCE_IDENTIFIER — SITE_ID ของเว็บไซต์โฮสติ้งตามที่ระบุไว้ในโปรเจ็กต์ 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 จำลองเนื้อหาโฮสติ้งและการกำหนดค่าของเว็บไซต์โฮสติ้งเริ่มต้นที่ URL ที่โฮสต์ในเครื่อง
firebase emulators:start --only hosting:TARGET_NAME จำลองเนื้อหาโฮสติ้งและการกำหนดค่าของเว็บไซต์โฮสติ้งที่ระบุที่ URL ที่โฮสต์ไว้ในเครื่อง
firebase hosting:channel:deploy \
CHANNEL_ID		 ทำให้เนื้อหาโฮสติ้งและการกำหนดค่าของเว็บไซต์โฮสติ้งเริ่มต้นใน URL ตัวอย่างใช้งานได้
firebase hosting:channel:deploy \
CHANNEL_ID --only TARGET_NAME		 ทำให้เนื้อหาโฮสติ้งและการกำหนดค่าของเว็บไซต์โฮสติ้งที่ระบุใช้งานได้ใน URL ตัวอย่าง
firebase deploy --only hosting ทำให้เนื้อหาและการกำหนดค่าโฮสติ้งใช้งานได้ในช่องถ่ายทอดสดของเว็บไซต์โฮสติ้งทั้งหมดที่กำหนดค่าไว้ใน firebase.json
firebase deploy --only hosting:TARGET_NAME ทำให้เนื้อหาและการกำหนดค่าโฮสติ้งใช้ได้กับเวอร์ชันที่ใช้จริงของเว็บไซต์โฮสติ้งที่ระบุ
คำสั่ง คำอธิบาย
(ไม่แนะนำ ใช้ emulators:start แทน)
firebase serve --only hosting 		แสดงเนื้อหาโฮสติ้งและการกำหนดค่าของเว็บไซต์โฮสติ้งเริ่มต้นใน URL ที่โฮสต์ในเครื่อง
(ไม่แนะนำ ใช้ emulators:start แทน)
firebase serve --only hosting:TARGET_NAME 		แสดงเนื้อหาโฮสติ้งและการกำหนดค่าของเว็บไซต์โฮสติ้งที่ระบุที่ URL ที่โฮสต์ไว้ในเครื่อง