กำหนดค่าลักษณะการทำงานของโฮสติ้ง

โฮสติ้งของ Firebase ช่วยให้คุณกำหนดค่าลักษณะการโฮสต์ที่กำหนดเองสำหรับคำขอไปยังเว็บไซต์ได้

คุณสามารถกำหนดค่าอะไรสำหรับโฮสติ้ง

• ระบุไฟล์ในไดเรกทอรีโปรเจ็กต์ในเครื่องที่คุณต้องการทำให้ใช้งานได้กับโฮสติ้งของ Firebase ดูวิธีการ

• แสดงหน้า 404/Not Found ที่กำหนดเอง ดูวิธีการ

• ตั้งค่า redirects สำหรับเพจที่คุณย้ายหรือลบไปแล้ว ดูวิธีการ

• ตั้งค่า rewrites เพื่อวัตถุประสงค์ต่อไปนี้

  • แสดงเนื้อหาเดียวกันสำหรับ URL หลายรายการ ดูวิธีการ

  • ใช้ฟังก์ชันหรือเข้าถึงคอนเทนเนอร์ Cloud Run จาก URL โฮสติ้ง โปรดดูวิธีการที่หัวข้อฟังก์ชันหรือคอนเทนเนอร์

  • สร้างลิงก์แบบไดนามิกของโดเมนที่กำหนดเอง ดูวิธีการ

• เพิ่ม headers เพื่อส่งต่อข้อมูลเพิ่มเติมเกี่ยวกับคำขอหรือคำตอบ เช่น วิธีที่เบราว์เซอร์ควรจัดการหน้าเว็บและเนื้อหาในหน้า (การตรวจสอบสิทธิ์ การแคช การเข้ารหัส ฯลฯ) ดูวิธีการ

• ตั้งค่าการปรับให้เป็นสากล (i18n) เพื่อแสดงเนื้อหาที่เจาะจงตามค่ากำหนดภาษาและ/หรือประเทศของผู้ใช้ ดูวิธีการ (หน้าอื่น)

คุณจะกำหนดค่าโฮสติ้งไว้ที่ใด

โดยกำหนดค่าโฮสติ้งของ Firebase ในไฟล์ firebase.json Firebase จะสร้างไฟล์ firebase.json ขึ้นโดยอัตโนมัติที่รูทของไดเรกทอรีโปรเจ็กต์เมื่อคุณเรียกใช้คำสั่ง firebase init

ดูตัวอย่างการกำหนดค่า firebase.json แบบเต็ม (ครอบคลุมเฉพาะโฮสติ้งของ Firebase) ได้ที่ด้านล่างของหน้านี้ โปรดทราบว่าไฟล์ firebase.json อาจมีการกำหนดค่าสำหรับบริการ Firebase อื่นๆ ด้วย

คุณตรวจสอบเนื้อหา firebase.json ที่ทำให้ใช้งานได้แล้วได้โดยใช้ Hosting REST API

ลำดับความสำคัญของการตอบกลับโฮสติ้ง

ตัวเลือกการกำหนดค่าโฮสติ้งของ Firebase ต่างๆ ที่อธิบายไว้ในหน้านี้อาจทับซ้อนกันในบางครั้ง หากมีข้อขัดแย้ง โฮสติ้งจะกำหนดการตอบกลับโดยใช้ลำดับความสำคัญต่อไปนี้

1. เนมสเปซที่สงวนไว้ซึ่งขึ้นต้นด้วยกลุ่มเส้นทาง /__/*
2. การเปลี่ยนเส้นทางที่กำหนดค่าไว้
3. เนื้อหาคงที่ที่ตรงกันทั้งหมด
4. กำหนดค่าการเขียนใหม่แล้ว
5. หน้า 404 ที่กำหนดเอง
6. หน้า 404 เริ่มต้น

หากคุณใช้การเขียนซ้ำแบบ i18n ลำดับความสำคัญของการจับคู่ที่ตรงกันทั้งหมดและ 404 จะขยายขอบเขตให้รองรับ "เนื้อหา i18n"

ระบุไฟล์ที่จะทำให้ใช้งานได้

แอตทริบิวต์เริ่มต้น — public และ ignore รวมอยู่ในไฟล์ firebase.json เริ่มต้นจะกำหนดไฟล์ในไดเรกทอรีโปรเจ็กต์ที่ควรทำให้ใช้งานได้กับโปรเจ็กต์ Firebase

การกำหนดค่าเริ่มต้นของ hosting ในไฟล์ firebase.json มีลักษณะดังนี้

"hosting": {
  "public": "public",  // the only required attribute for Hosting
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

สาธารณะ

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

ชื่อต่อไปนี้คือชื่อที่ระบุเริ่มต้นของไดเรกทอรีที่จะทำให้ใช้งานได้

"hosting": {
  "public": "public"

  // ...
}

คุณสามารถเปลี่ยนค่าเริ่มต้นเป็นไดเรกทอรีที่ต้องการทำให้ใช้งานได้ ดังนี้

"hosting": {
  "public": "dist/app"

  // ...
}

ไม่สนใจ

ไม่บังคับ
แอตทริบิวต์ ignore ระบุไฟล์ที่จะละเว้นเมื่อทำให้ใช้งานได้ คุณอาจใช้ glOB ในลักษณะเดียวกับที่ Git จัดการ .gitignore

ค่าเริ่มต้นที่ไฟล์จะละเว้นมีดังนี้

"hosting": {
  // ...

  "ignore": [
    "firebase.json",  // the Firebase configuration file (the file described on this page)
    "**/.*",  // files with a leading period should be hidden from the system
    "**/node_modules/**"  // contains dependencies used to create your site but not run it
  ]
}

ปรับแต่งหน้า 404/Not Found

ไม่บังคับ
คุณสามารถแสดงข้อผิดพลาด 404 Not Found ที่กำหนดเองเมื่อผู้ใช้พยายามเข้าถึงหน้าเว็บที่ไม่มีอยู่

สร้างไฟล์ใหม่ในไดเรกทอรี public ของโปรเจ็กต์ ตั้งชื่อ 404.html แล้วเพิ่มเนื้อหา 404 Not Found ที่กำหนดเองลงในไฟล์

โฮสติ้งของ Firebase จะแสดงเนื้อหาของหน้าเว็บ 404.html ที่กำหนดเองนี้หากเบราว์เซอร์ทริกเกอร์ข้อผิดพลาด 404 Not Found ในโดเมนหรือโดเมนย่อยของคุณ

กำหนดค่าการเปลี่ยนเส้นทาง

ไม่บังคับ
ใช้การเปลี่ยนเส้นทาง URL เพื่อป้องกันลิงก์เสียหากคุณย้ายหน้าเว็บ หรือทำให้ URL สั้นลง เช่น คุณสามารถเปลี่ยนเส้นทางเบราว์เซอร์จาก example.com/team ไปยัง example.com/about.html

ระบุการเปลี่ยนเส้นทาง URL โดยการสร้างแอตทริบิวต์ redirects ที่มีอาร์เรย์ของออบเจ็กต์ (เรียกว่า "กฎการเปลี่ยนเส้นทาง") ในแต่ละกฎ ให้ระบุรูปแบบ URL ที่หากตรงกับเส้นทาง URL ของคำขอ ระบบจะทริกเกอร์โฮสติ้งให้ตอบสนองด้วยการเปลี่ยนเส้นทางไปยัง URL ปลายทางที่ระบุ

นี่คือโครงสร้างพื้นฐานสำหรับแอตทริบิวต์ redirects ตัวอย่างนี้เปลี่ยนเส้นทางคำขอไปยัง /foo โดยส่งคำขอใหม่ไปยัง /bar

"hosting": {
  // ...

  // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
  "redirects": [ {
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  } ]
}

"hosting": {
  // ...

  // Add the "redirects" attribute within "hosting"
  "redirects": [ {
    // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  }, {
    // Returns a permanent redirect to "/bar" for requests to both "/foo" and "/foo/**"
    "source": "/foo{,/**}"
    "destination": "/bar"
    "type": 301
  }, {
    // Returns a temporary redirect for all requests to files or directories in the "firebase" directory
    "source": "/firebase/**",
    "destination": "https://firebase.google.com/",
    "type": 302
  }, {
    // A regular expression-based redirect equivalent to the above behavior
    "regex": "/firebase/.*",
    "destination": "https://firebase.google.com/",
    "type": 302
  } ]
}

แอตทริบิวต์ redirects มีอาร์เรย์ของกฎการเปลี่ยนเส้นทาง โดยกฎแต่ละข้อต้องมีช่องในตารางด้านล่างนี้

โฮสติ้งของ Firebase จะเปรียบเทียบค่า source หรือ regex กับเส้นทาง URL ทั้งหมดเมื่อเริ่มต้นคำขอทุกรายการ (ก่อนที่เบราว์เซอร์จะพิจารณาว่ามีไฟล์หรือโฟลเดอร์อยู่ที่เส้นทางนั้นหรือไม่) หากพบรายการที่ตรงกัน เซิร์ฟเวอร์ต้นทางโฮสติ้งของ Firebase จะส่งการตอบกลับการเปลี่ยนเส้นทาง HTTPS เพื่อบอกเบราว์เซอร์ให้ส่งคำขอใหม่ที่ URL ของ destination

บันทึกกลุ่ม URL สำหรับการเปลี่ยนเส้นทาง

ไม่บังคับ
บางครั้งคุณอาจต้องบันทึกกลุ่มที่เจาะจงของรูปแบบ URL ของกฎการเปลี่ยนเส้นทาง (ค่า source หรือ regex) แล้วใช้กลุ่มเหล่านี้ซ้ำในเส้นทาง destination ของกฎ

"hosting": {
  // ...

  "redirects": [ {
    "source": "/blog/:post*",  // captures the entire URL segment beginning at "post"
    "destination": "https://blog.myapp.com/:post", // includes the entire URL segment identified and captured by the "source" value
    "type": 301
  }, {
    "source": "/users/:id/profile",  // captures only the URL segment "id", but nothing following
    "destination": "/users/:id/newProfile",  // includes the URL segment identified and captured by the "source" value
    "type": 301
  } ]
}

"hosting": {
  // ...

  "redirects": [ {
    "regex": "/blog/(?P<post>.+)",  // if you're familiar with PCRE, be aware that RE2 requires named capture groups to begin with ?P
    "destination": "https://blog.myapp.com/:post",  // includes the entire URL segment identified and captured by the `regex` value
    "type": 301
  }, {
    "regex": "/users/(\d+)/profile",  // uses the \d directive to only match numerical path segments
    "destination": "/users/:1/newProfile",  // the first capture group to be seen in the `regex` value is named 1, and so on
    "type": 301
  } ]
}

กำหนดค่าการเขียนใหม่

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

คุณยังใช้การเขียนใหม่เพื่อรองรับแอปที่ใช้ HTML5 pushState สำหรับการนำทางได้ด้วย เมื่อเบราว์เซอร์พยายามเปิดเส้นทาง URL ที่ตรงกับรูปแบบ URL source หรือ regex ที่ระบุ เบราว์เซอร์จะได้รับเนื้อหาของไฟล์ที่ URL ของ destination แทน

ระบุการเขียน URL ใหม่โดยการสร้างแอตทริบิวต์ rewrites ที่มีอาร์เรย์ของออบเจ็กต์ (เรียกว่า "กฎการเขียนใหม่") ในแต่ละกฎ ให้ระบุรูปแบบ URL ที่หากตรงกับเส้นทาง URL ของคำขอ จะทำให้โฮสติ้งตอบสนองเสมือนว่าบริการได้รับ URL ปลายทางที่ระบุ

นี่คือโครงสร้างพื้นฐานสำหรับแอตทริบิวต์ rewrites ตัวอย่างนี้แสดง index.html สำหรับคำขอไปยังไฟล์หรือไดเรกทอรีที่ไม่มีอยู่

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

"hosting": {
// ...

// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
  // Serves index.html for requests to files or directories that do not exist
  "source": "**",
  "destination": "/index.html"
}, {
  // Serves index.html for requests to both "/foo" and "/foo/**"
  // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
  "source": "/foo{,/**}",
  "destination": "/index.html"
}, {
  // A regular expression-based rewrite equivalent to the above behavior
  "regex": "/foo(/.*)?",
  "destination": "/index.html"
}, {
  // Excludes specified pathways from rewrites
  "source": "!/@(js|css)/**",
  "destination": "/index.html"
} ]
}

แอตทริบิวต์ rewrites มีอาร์เรย์ของกฎการเขียนใหม่ ซึ่งกฎแต่ละข้อต้องมีช่องในตารางด้านล่างนี้

โฮสติ้งของ Firebase จะใช้กฎการเขียนใหม่ก็ต่อเมื่อไฟล์หรือไดเรกทอรีไม่อยู่ในเส้นทาง URL ที่ตรงกับรูปแบบ URL ของ source หรือ regex ที่ระบุเท่านั้น เมื่อคำขอทริกเกอร์กฎการเขียนใหม่ เบราว์เซอร์จะแสดงผลเนื้อหาจริงของไฟล์ destination ที่ระบุแทนการเปลี่ยนเส้นทาง HTTP

ส่งคำขอไปยังฟังก์ชันโดยตรง

คุณสามารถใช้ rewrites เพื่อให้บริการฟังก์ชันจาก URL โฮสติ้งของ Firebase ตัวอย่างต่อไปนี้เป็นตัวอย่างที่ตัดตอนมาจากการแสดงเนื้อหาแบบไดนามิกโดยใช้ Cloud Functions

ตัวอย่างเช่น หากต้องการส่งคำขอทั้งหมดจากหน้า /bigben ในเว็บไซต์โฮสติ้งให้เรียกใช้ฟังก์ชัน bigben ให้ทำดังนี้

"hosting": {
  // ...

  // Directs all requests from the page `/bigben` to execute the `bigben` function
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

หลังจากเพิ่มกฎการเขียนใหม่นี้และทำให้ใช้งานได้ใน Firebase (โดยใช้ firebase deploy) ฟังก์ชันจะเข้าถึงได้ผ่าน URL ต่อไปนี้

• โดเมนย่อยของ Firebase:
  PROJECT_ID.web.app/bigben และ PROJECT_ID.firebaseapp.com/bigben

• โดเมนที่กำหนดเองที่เชื่อมต่อทั้งหมด:
  CUSTOM_DOMAIN/bigben

เมื่อเปลี่ยนเส้นทางคำขอไปยังฟังก์ชันด้วยโฮสติ้ง เมธอดคำขอ HTTP ที่รองรับคือ GET, POST, HEAD, PUT, DELETE, PATCH และ OPTIONS ระบบไม่รองรับวิธีการอื่นๆ เช่น REPORT หรือ PROFIND

ส่งคำขอโดยตรงไปยังคอนเทนเนอร์ Cloud Run

คุณใช้ rewrites เพื่อเข้าถึงคอนเทนเนอร์ Cloud Run จาก URL โฮสติ้งของ Firebase ได้ ตัวอย่างต่อไปนี้เป็นข้อความที่ตัดตอนมาจากการแสดงเนื้อหาแบบไดนามิกโดยใช้ Cloud Run

ตัวอย่างเช่น หากต้องการส่งคำขอทั้งหมดจากหน้า /helloworld ในเว็บไซต์โฮสติ้งให้ทริกเกอร์การเริ่มต้นและการเรียกใช้อินสแตนซ์คอนเทนเนอร์ helloworld ให้ทำดังนี้

"hosting": {
 // ...

 // Directs all requests from the page `/helloworld` to trigger and run a `helloworld` container
 "rewrites": [ {
   "source": "/helloworld",
   "run": {
     "serviceId": "helloworld",  // "service name" (from when you deployed the container image)
     "region": "us-central1"  // optional (if omitted, default is us-central1)
   }
 } ]
}

หลังจากเพิ่มกฎการเขียนใหม่นี้และทำให้ใช้งานได้ใน Firebase (โดยใช้ firebase deploy) แล้ว คุณจะเข้าถึงอิมเมจคอนเทนเนอร์ได้ผ่าน URL ต่อไปนี้

• โดเมนย่อยของ Firebase:
  PROJECT_ID.web.app/helloworld และ PROJECT_ID.firebaseapp.com/helloworld

• โดเมนที่กำหนดเองที่เชื่อมต่อทั้งหมด:
  CUSTOM_DOMAIN/helloworld

เมื่อเปลี่ยนเส้นทางคำขอไปยังคอนเทนเนอร์ Cloud Run ด้วยโฮสติ้ง เมธอดคำขอ HTTP ที่รองรับคือ GET, POST, HEAD, PUT, DELETE, PATCH และ OPTIONS ระบบไม่รองรับวิธีการอื่นๆ เช่น REPORT หรือ PROFIND

เพื่อประสิทธิภาพที่ดีที่สุด โปรดค้นหาบริการ Cloud Run ร่วมกับโฮสติ้งโดยใช้ภูมิภาคต่อไปนี้

• us-west1
• us-central1
• us-east1
• europe-west1
• asia-east1

ระบบรองรับการเขียนซ้ำจากโฮสติ้งไปยัง Cloud Run ในภูมิภาคต่อไปนี้

• asia-east1
• asia-east2
• asia-northeast1
• asia-northeast2
• asia-northeast3
• asia-south1
• asia-south2
• asia-southeast1
• asia-southeast2
• australia-southeast1
• australia-southeast2
• europe-central2
• europe-north1
• europe-southwest1
• europe-west1
• europe-west12
• europe-west2
• europe-west3
• europe-west4
• europe-west6
• europe-west8
• europe-west9
• me-central1
• me-west1
• northamerica-northeast1
• northamerica-northeast2
• southamerica-east1
• southamerica-west1
• us-central1
• us-east1
• us-east4
• us-east5
• us-south1
• us-west1
• us-west2
• us-west3
• us-west4
• us-west1
• us-central1
• us-east1
• europe-west1
• asia-east1

สร้างลิงก์แบบไดนามิกของโดเมนที่กำหนดเอง

คุณใช้ rewrites เพื่อสร้างลิงก์แบบไดนามิกของโดเมนที่กำหนดเองได้ อ่านเอกสารเกี่ยวกับลิงก์แบบไดนามิกเพื่อดูข้อมูลโดยละเอียดเกี่ยวกับการตั้งค่าโดเมนที่กำหนดเองสำหรับลิงก์แบบไดนามิก

• ใช้โดเมนที่กำหนดเองเท่านั้นสำหรับลิงก์แบบไดนามิก

  "hosting": {
    // ...
  
    "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
  
    // Add the "rewrites" attribute within "hosting"
    "rewrites": [ {
      "source": "/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/"
      "dynamicLinks": true
    } ]
  }
  

• ระบุคำนำหน้าเส้นทางโดเมนที่กำหนดเองที่จะใช้กับลิงก์แบบไดนามิก

  "hosting": {
    // ...
  
    "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
  
    // Add the "rewrites" attribute within "hosting"
    "rewrites": [ {
      "source": "/promos/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/promos/"
      "dynamicLinks": true
    }, {
      "source": "/links/share/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/links/share/"
      "dynamicLinks": true
    } ]
  }
  

การกำหนดค่าลิงก์แบบไดนามิกในไฟล์ firebase.json ต้องมีข้อมูลต่อไปนี้

กำหนดค่าส่วนหัว

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

ระบุส่วนหัวการตอบกลับเฉพาะไฟล์แบบกำหนดเองโดยสร้างแอตทริบิวต์ headers ที่มีอาร์เรย์ของออบเจ็กต์ส่วนหัว ในแต่ละออบเจ็กต์ ให้ระบุรูปแบบ URL ซึ่งหากตรงกับเส้นทาง URL ของคำขอ ระบบจะทริกเกอร์โฮสติ้งให้ใช้ส่วนหัวการตอบกลับที่กำหนดเองที่ระบุ

นี่คือโครงสร้างพื้นฐานสำหรับแอตทริบิวต์ headers ตัวอย่างนี้ใช้ส่วนหัว CORS สำหรับไฟล์แบบอักษรทั้งหมด

"hosting": {
  // ...

  // Applies a CORS header for all font files
  "headers": [ {
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "Access-Control-Allow-Origin",
      "value": "*"
    } ]
  } ]
}

"hosting": {
  // ...

  // Add the "headers" attribute within "hosting"
  "headers": [ {
    // Applies a CORS header for all font files
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "Access-Control-Allow-Origin",
      "value": "*"
    } ]
  }, {
    // Overrides the default 1 hour browser cache with a 2 hour cache for all image files
    "source": "**/*.@(jpg|jpeg|gif|png)",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=7200"
    } ]
  }, {
    // A regular expression-based rewrite equivalent to the above behavior
    "regex": ".+/\w+\.(jpg|jpeg|gif|png)$",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=7200"
    } ]
  }, {
    // Sets the cache header for 404 pages to cache for 5 minutes
    "source": "404.html",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=300"
    } ]
  } ]
}

แอตทริบิวต์ headers มีอาร์เรย์ของคำจำกัดความ ซึ่งคำจำกัดความแต่ละรายการต้องมีฟิลด์ในตารางด้านล่าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Cache-Control ในส่วน Hosting ซึ่งอธิบายเกี่ยวกับการแสดงเนื้อหาแบบไดนามิกและการโฮสต์ Microservice ได้ นอกจากนี้ คุณยังดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัว CORS ได้อีกด้วย

ควบคุมส่วนขยาย .html รายการ

ไม่บังคับ
แอตทริบิวต์ cleanUrls ช่วยให้คุณควบคุมได้ว่า URL ควรมีส่วนขยาย .html หรือไม่

เมื่อ true โฮสติ้งจะนำส่วนขยาย .html ออกจาก URL ของไฟล์ที่อัปโหลดโดยอัตโนมัติ หากมีการเพิ่มส่วนขยาย .html ในคำขอ โฮสติ้งจะเปลี่ยนเส้นทาง 301 ไปยังเส้นทางเดียวกันแต่จะลบส่วนขยาย .html

วิธีควบคุมการรวม .html ใน URL ด้วยการระบุแอตทริบิวต์ cleanUrls

"hosting": {
  // ...

  // Drops `.html` from uploaded URLs
  "cleanUrls": true
}

ควบคุมเครื่องหมายทับปิดท้าย

ไม่บังคับ
แอตทริบิวต์ trailingSlash ให้คุณควบคุมว่า URL เนื้อหาแบบคงที่ควรมีเครื่องหมายทับปิดท้ายหรือไม่

• เมื่อ true โฮสติ้งจะเปลี่ยนเส้นทาง URL เพื่อเพิ่มเครื่องหมายทับปิดท้าย
• เมื่อ false โฮสติ้งจะเปลี่ยนเส้นทาง URL เพื่อนำเครื่องหมายทับปิดท้ายออก
• เมื่อไม่ระบุ โฮสติ้งจะใช้เฉพาะเครื่องหมายทับปิดท้ายสำหรับไฟล์ดัชนีไดเรกทอรี (เช่น about/index.html)

วิธีควบคุมเครื่องหมายทับปิดท้ายโดยการเพิ่มแอตทริบิวต์ trailingSlash

"hosting": {
  // ...

  // Removes trailing slashes from URLs
  "trailingSlash": false
}

แอตทริบิวต์ trailingSlash ไม่ส่งผลกระทบต่อการเขียนใหม่ไปยังเนื้อหาแบบไดนามิกที่แสดงโดย Cloud Functions หรือ Cloud Run

การจับคู่รูปแบบ Glob

ตัวเลือกการกำหนดค่าโฮสติ้งของ Firebase ใช้ประโยชน์จากเครื่องหมาย การจับคู่รูปแบบ glob กับ extglob อย่างแพร่หลาย ซึ่งคล้ายกับที่ Git จัดการกฎ gitignore และ Bower จัดการกฎ ignore หน้า Wiki นี้เป็นข้อมูลอ้างอิงที่ละเอียดยิ่งขึ้น แต่ต่อไปนี้เป็นคำอธิบายของตัวอย่างที่ใช้ในหน้านี้

• firebase.json — จับคู่เฉพาะไฟล์ firebase.json ในรูทของไดเรกทอรี public เท่านั้น

• ** — จับคู่ไฟล์หรือโฟลเดอร์ในไดเรกทอรีย่อยที่กำหนดเอง

• * — จับคู่เฉพาะไฟล์และโฟลเดอร์ในรูทของไดเรกทอรี public เท่านั้น

• **/.* — จับคู่ไฟล์ใดก็ตามที่ขึ้นต้นด้วย . (โดยปกติจะเป็นไฟล์ที่ซ่อนไว้ เช่น ในโฟลเดอร์ .git) ในไดเรกทอรีย่อยที่กำหนดเอง

• **/node_modules/** — จับคู่ไฟล์หรือโฟลเดอร์ใดก็ตามในไดเรกทอรีย่อยที่กำหนดเองของโฟลเดอร์ node_modules ซึ่งอาจอยู่ในไดเรกทอรีย่อยที่กำหนดเองของไดเรกทอรี public

• **/*.@(jpg|jpeg|gif|png) — จับคู่ไฟล์ใดก็ได้ในไดเรกทอรีย่อยที่กำหนดเองที่ลงท้ายด้วยรายการใดรายการหนึ่งต่อไปนี้ .jpg, .jpeg, .gif หรือ .png

ตัวอย่างการกำหนดค่าโฮสติ้งแบบเต็ม

ต่อไปนี้คือตัวอย่างการกำหนดค่า firebase.json แบบเต็มสำหรับโฮสติ้งของ Firebase โปรดทราบว่าไฟล์ firebase.json อาจมีการกำหนดค่าสำหรับบริการ Firebase อื่นๆ ด้วย

{
  "hosting": {

    "public": "dist/app",  // "public" is the only required attribute for Hosting

    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],

    "redirects": [ {
      "source": "/foo",
      "destination": "/bar",
      "type": 301
    }, {
      "source": "/firebase/**",
      "destination": "https://www.firebase.com",
      "type": 302
    } ],

    "rewrites": [ {
      // Shows the same content for multiple URLs
      "source": "/app/**",
      "destination": "/app/index.html"
    }, {
      // Configures a custom domain for Dynamic Links
      "source": "/promos/**",
      "dynamicLinks": true
    }, {
      // Directs a request to Cloud Functions
      "source": "/bigben",
      "function": "bigben"
    }, {
      // Directs a request to a Cloud Run containerized app
      "source": "/helloworld",
      "run": {
        "serviceId": "helloworld",
        "region": "us-central1"
      }
    } ],

    "headers": [ {
      "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers": [ {
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      } ]
    }, {
      "source": "**/*.@(jpg|jpeg|gif|png)",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=7200"
      } ]
    }, {
      "source": "404.html",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=300"
      } ]
    } ],

    "cleanUrls": true,

    "trailingSlash": false,

    // Required to configure custom domains for Dynamic Links
    "appAssociation": "AUTO",

  }
}