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

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

คุณกำหนดค่าอะไรได้บ้างสำหรับ Hosting

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

• แสดงหน้า 404/ไม่พบที่ปรับแต่งแล้ว ดูวิธีการ

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

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

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

  • แสดงฟังก์ชันหรือเข้าถึงCloud Runคอนเทนเนอร์จากHosting URL ดูวิธี: ฟังก์ชันหรือ คอนเทนเนอร์

  • สร้างโดเมนที่กำหนดเอง Dynamic Link ดูวิธีการ

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

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

คุณกำหนดHostingการกำหนดค่าที่ใด

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

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

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

ลำดับความสำคัญของคำตอบ Hosting

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

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 Hosting ค่าเริ่มต้นคือไดเรกทอรีชื่อ 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/ไม่พบ

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

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

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

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

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

ระบุการเปลี่ยนเส้นทาง URL โดยสร้างแอตทริบิวต์ redirects ที่มีอาร์เรย์ ของออบเจ็กต์ (เรียกว่า "กฎการเปลี่ยนเส้นทาง") ในแต่ละกฎ ให้ระบุรูปแบบ URL ที่หากตรงกับเส้นทาง URL ของคำขอ จะทําให้ Hosting ตอบกลับด้วยการเปลี่ยนเส้นทาง ไปยัง 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 Hosting จะเปรียบเทียบค่า source หรือ regex กับเส้นทาง URL ทั้งหมดที่จุดเริ่มต้นของทุกคำขอ (ก่อนที่เบราว์เซอร์จะพิจารณาว่ามีไฟล์หรือโฟลเดอร์ในเส้นทางนั้นหรือไม่) หากพบรายการที่ตรงกัน Firebase Hosting เซิร์ฟเวอร์ต้นทางจะส่งการตอบกลับการเปลี่ยนเส้นทาง 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 ของคำขอ จะทําให้ Hosting ตอบกลับราวกับว่า บริการได้รับ 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 Hosting จะใช้กฎการเขียนใหม่ก็ต่อเมื่อไม่มีไฟล์หรือไดเรกทอรี ในเส้นทาง URL ที่ตรงกับรูปแบบ URL ที่ระบุ source หรือ regex เมื่อคำขอทริกเกอร์กฎการเขียนใหม่ เบราว์เซอร์จะแสดงเนื้อหาจริงของไฟล์ destination ที่ระบุแทนการเปลี่ยนเส้นทาง HTTP

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

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

ตัวอย่างเช่น หากต้องการเปลี่ยนเส้นทางคำขอทั้งหมดจากหน้า /bigben ในเว็บไซต์ Hosting เพื่อเรียกใช้ฟังก์ชัน 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

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

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

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

ตัวอย่างเช่น หากต้องการเปลี่ยนเส้นทางคำขอทั้งหมดจากหน้า /helloworld ในเว็บไซต์ Hostingของคุณเพื่อทริกเกอร์การเริ่มต้นและการเรียกใช้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 ที่มี Hosting เมธอดคำขอ HTTP ที่รองรับคือ GET, POST, HEAD, PUT, DELETE, PATCH และ OPTIONS ระบบไม่รองรับวิธีการอื่นๆ เช่น REPORT หรือ PROFIND

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

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

ระบบรองรับการเขียนใหม่เป็น Cloud Run จาก Hosting ในภูมิภาคต่อไปนี้

• 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

สร้างโดเมนที่กำหนดเอง Dynamic Links

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

• ใช้โดเมนที่กำหนดเองเท่านั้นสำหรับ Dynamic Links

  "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
    } ]
  }

• ระบุคำนำหน้าเส้นทางโดเมนที่กำหนดเองที่จะใช้สำหรับ Dynamic Links

  "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
    } ]
  }

การกำหนดค่า Dynamic Links ในไฟล์ firebase.json ต้องมีสิ่งต่อไปนี้

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

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

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

ต่อไปนี้คือโครงสร้างพื้นฐานของแอตทริบิวต์ 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ที่อธิบายการแสดงเนื้อหาแบบไดนามิกและการโฮสต์ ไมโครเซอร์วิส นอกจากนี้ คุณยังดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัวของ CORS ได้ด้วย

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

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

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

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

"hosting": {
  // ...

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

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

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

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

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

"hosting": {
  // ...

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

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

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

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

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

• ** — ตรงกับไฟล์หรือโฟลเดอร์ใดก็ได้ในไดเรกทอรีย่อยใดก็ได้

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

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

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

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

ตัวอย่างการกำหนดค่า Hosting แบบเต็ม

ต่อไปนี้คือfirebase.jsonตัวอย่างการกำหนดค่าแบบเต็มสำหรับ Firebase Hosting โปรดทราบว่าไฟล์ 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",

  }
}