如果您在构建服务器端渲染的 Angular 或 Next.js 应用，不妨试试我们新一代的 Firebase App Hosting，这是一款适用于现代 Web 框架的全栈解决方案。

Trang này được dịch bởi Cloud Translation API.

Định cấu hình hành vi Lưu trữ

Với Firebase Hosting, bạn có thể định cấu hình hành vi lưu trữ tuỳ chỉnh cho vào trang web của bạn.

Bạn có thể định cấu hình những gì cho Hosting?

Chỉ định những tệp trong thư mục dự án cục bộ mà bạn muốn triển khai Firebase Hosting. Tìm hiểu cách thực hiện.
Phân phát trang 404/Không tìm thấy tuỳ chỉnh. Tìm hiểu cách thực hiện.
Thiết lập redirects cho các trang mà bạn đã di chuyển hoặc xoá. Tìm hiểu cách thực hiện.
Thiết lập rewrites cho bất kỳ mục đích nào sau đây:
- Hiển thị cùng một nội dung cho nhiều URL. Tìm hiểu cách thực hiện.
- Phân phát một hàm hoặc truy cập vào vùng chứa Cloud Run từ Hosting URL. Tìm hiểu cách thực hiện: hàm hoặc vùng chứa.
- Tạo một miền tuỳ chỉnh Dynamic Link. Tìm hiểu cách thực hiện.
Thêm headers để truyền thông tin bổ sung về một yêu cầu hoặc phản hồi, chẳng hạn như cách trình duyệt xử lý trang và nội dung của trang đó (xác thực, lưu vào bộ nhớ đệm, mã hoá, v.v.). Tìm hiểu cách thực hiện.
Thiết lập tính năng quốc tế hoá (i18n) viết lại để phân phát nội dung cụ thể dựa trên tuỳ chọn ngôn ngữ và/hoặc quốc gia của người dùng. Tìm hiểu cách thực hiện (trang khác).

Bạn xác định cấu hình Hosting ở đâu?

Bạn xác định cấu hình Firebase Hosting trong firebase.json. Firebase tự động tạo tệp firebase.json vào thư mục gốc của dự án khi bạn chạy lệnh gọi lại, Lệnh firebase init.

Bạn có thể tìm thấy ví dụ đầy đủ về cấu hình firebase.json (chỉ bao gồm Firebase Hosting) ở cuối trang này. Xin lưu ý rằng một Tệp firebase.json cũng có thể chứa cấu hình cho các dịch vụ Firebase khác.

Bạn có thể kiểm tra nội dung firebase.json đã triển khai bằng cách sử dụng API REST Hosting.

Thứ tự ưu tiên của Hosting câu trả lời

Tuỳ chọn cấu hình Firebase Hosting khác nhau được mô tả trên trang này đôi khi có thể chồng chéo nhau. Nếu có xung đột, Hosting sẽ xác định bằng cách sử dụng thứ tự ưu tiên sau:

Không gian tên dành riêng bắt đầu bằng một phân đoạn đường dẫn /__/*
Lệnh chuyển hướng đã định cấu hình
Nội dung tĩnh khớp chính xác
Tính năng ghi lại đã định cấu hình
Trang 404 tuỳ chỉnh
Trang 404 mặc định

Nếu bạn đang sử dụng văn bản viết lại theo ngôn ngữ i18n, thì kiểu khớp chính xác và thứ tự ưu tiên xử lý lỗi 404 được mở rộng trong phạm vi để phù hợp với nội dung".

Chỉ định những tệp cần triển khai

Các thuộc tính mặc định — public và ignore — bao gồm trong tệp firebase.json mặc định, hãy xác định tệp nào trong thư mục dự án của bạn sẽ được triển khai cho dự án Firebase của bạn.

Cấu hình hosting mặc định trong tệp firebase.json có dạng như sau:

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

công khai

Bắt buộc
Thuộc tính public chỉ định thư mục nào cần triển khai Firebase Hosting. Giá trị mặc định là thư mục có tên public, nhưng bạn có thể chỉ định đường dẫn bất kỳ của thư mục, miễn là đường dẫn đó tồn tại trong dự án của bạn thư mục.

Sau đây là tên mặc định được chỉ định của thư mục cần triển khai:

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

  // ...
}

Bạn có thể thay đổi giá trị mặc định thành thư mục mà bạn muốn triển khai:

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

  // ...
}

bỏ qua

Không bắt buộc
Thuộc tính ignore chỉ định các tệp cần bỏ qua khi triển khai. Quá trình này có thể mất khối cầu giống như cách Git xử lý .gitignore.

Sau đây là các giá trị mặc định để các tệp bỏ qua:

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

Tuỳ chỉnh trang 404/Không tìm thấy

Không bắt buộc
Bạn có thể phân phát lỗi 404 Not Found tuỳ chỉnh khi người dùng cố gắng truy cập vào một trang không tồn tại.

Tạo một tệp mới trong thư mục public của dự án rồi đặt tên cho tệp đó 404.html, sau đó thêm nội dung 404 Not Found tuỳ chỉnh của bạn vào tệp.

Firebase Hosting sẽ hiển thị nội dung của trang 404.html tuỳ chỉnh này nếu một trình duyệt kích hoạt lỗi 404 Not Found trên miền hoặc miền con của bạn.

Định cấu hình lệnh chuyển hướng

Không bắt buộc
Dùng lệnh chuyển hướng URL để ngăn các đường liên kết bị hỏng nếu bạn đã di chuyển một trang hoặc rút ngắn URL. Ví dụ: bạn có thể chuyển hướng một trình duyệt từ example.com/team đến example.com/about.html.

Chỉ định lệnh chuyển hướng URL bằng cách tạo thuộc tính redirects có chứa một mảng (gọi là "quy tắc chuyển hướng"). Trong mỗi quy tắc, hãy chỉ định mẫu URL nếu khớp với đường dẫn URL yêu cầu, kích hoạt Hosting để phản hồi bằng lệnh chuyển hướng vào URL đích được chỉ định.

Đây là cấu trúc cơ bản của thuộc tính redirects. Ví dụ này chuyển hướng gửi yêu cầu đến /foo bằng cách gửi một yêu cầu mới đến /bar.

"hosting": {
  // ...

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

Xem ví dụ chi tiết hơn về thuộc tính redirects

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

Thuộc tính redirects chứa một mảng các quy tắc chuyển hướng, trong đó mỗi quy tắc phải bao gồm các trường trong bảng bên dưới.

Firebase Hosting so sánh giá trị source hoặc regex với tất cả URL vào lúc bắt đầu mỗi yêu cầu (trước khi trình duyệt xác định liệu một tệp hoặc thư mục có tại đường dẫn đó). Nếu tìm thấy kết quả trùng khớp, thì hàm Máy chủ gốc Firebase Hosting gửi phản hồi chuyển hướng HTTPS cho biết để thực hiện một yêu cầu mới tại URL destination.

Trường		Mô tả
`redirects`
	`source` (được đề xuất) hoặc `regex`	Mẫu URL mà, nếu khớp với URL yêu cầu ban đầu, sẽ kích hoạt Hosting để áp dụng lệnh chuyển hướng Sử dụng `source` để chỉ định glob (nên dùng). Sử dụng `regex` để chỉ định Biểu thức chính quy RE2.
	`destination`	URL tĩnh mà trình duyệt sẽ thực hiện yêu cầu mới URL này có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.
	`type`	Mã phản hồi HTTPS Sử dụng loại `301` cho trạng thái "Đã di chuyển vĩnh viễn" Sử dụng loại `302` cho "Found" (Đã tìm thấy) (Chuyển hướng tạm thời)

Ghi lại phân đoạn URL để chuyển hướng

Không bắt buộc
Đôi khi, bạn có thể cần phải chụp các phân đoạn cụ thể trong URL của quy tắc chuyển hướng (giá trị source hoặc regex), sau đó sử dụng lại các phân đoạn này trong đường dẫn destination của quy tắc.

Ghi lại phân đoạn URL khi sử dụng khối cầu

Nếu bạn đang sử dụng trường source (tức là, chỉ định một hình ảnh cầu cho URL của bạn ), bạn có thể nắm bắt các phân đoạn bằng cách đưa tiền tố : vào để xác định phân khúc. Nếu bạn cũng cần lấy đường dẫn URL còn lại sau phân đoạn, bao gồm * ngay sau phân đoạn. Ví dụ:

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

Ghi lại phân đoạn URL khi sử dụng biểu thức chính quy RE2

Nếu bạn đang sử dụng trường regex (nghĩa là chỉ định biểu thức chính quy RE2 cho mẫu URL của mình), bạn có thể nắm bắt các phân đoạn bằng cách sử dụng tên hoặc chưa đặt tên Nhóm thu thập RE2. Bạn có thể dùng nhóm thu thập đã đặt tên trong trường destination có tiền tố :, trong khi các nhóm thu thập chưa đặt tên có thể được tham chiếu theo chỉ số dạng số trong giá trị regex, được lập chỉ mục từ 1. Ví dụ:

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

Định cấu hình tính năng viết lại

Không bắt buộc
Hãy dùng kỹ thuật viết lại để hiển thị cùng một nội dung cho nhiều URL. Các chữ viết lại là đặc biệt hữu ích với việc khớp mẫu, vì bạn có thể chấp nhận bất kỳ URL nào khớp với mẫu và để mã phía máy khách quyết định thông tin nào sẽ hiển thị.

Bạn cũng có thể sử dụng tính năng viết lại để hỗ trợ các ứng dụng sử dụng pushState HTML5 để điều hướng. Khi trình duyệt cố mở đường dẫn URL khớp với mẫu URL source hoặc regex đã chỉ định, thì trình duyệt sẽ được cấp nội dung của tệp tại URL destination.

Chỉ định việc viết lại URL bằng cách tạo thuộc tính rewrites có chứa một mảng số lượng đối tượng (được gọi là "quy tắc viết lại"). Trong mỗi quy tắc, hãy chỉ định mẫu URL nếu khớp với đường dẫn URL yêu cầu, kích hoạt Hosting để phản hồi như thể đã được cung cấp URL đích đã chỉ định.

Đây là cấu trúc cơ bản của thuộc tính rewrites. Ví dụ này phân phát index.html cho các yêu cầu đến tệp hoặc thư mục không tồn tại.

"hosting": {
  // ...

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

Xem ví dụ chi tiết hơn về thuộc tính rewrites

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

Thuộc tính rewrites chứa một mảng các quy tắc ghi lại, trong đó mỗi quy tắc phải bao gồm các trường trong bảng bên dưới.

Firebase Hosting chỉ áp dụng quy tắc ghi lại nếu một tệp hoặc thư mục không tồn tại tại một đường dẫn URL khớp với mẫu URL source hoặc regex được chỉ định. Khi một yêu cầu kích hoạt quy tắc ghi lại, trình duyệt sẽ trả về nội dung thực tế của tệp destination được chỉ định thay vì chuyển hướng HTTP.

Trường Mô tả

Trường	Mô tả
`rewrites`
	`source` (được đề xuất) hoặc `regex`	Mẫu URL mà, nếu khớp với URL yêu cầu ban đầu, sẽ kích hoạt Hosting để áp dụng câu trả lời viết lại Sử dụng `source` để chỉ định glob (nên dùng). Sử dụng `regex` để chỉ định một biểu thức chính quy RE2.
	`destination`	Phải có một tệp cục bộ URL này có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.

rewrites

source (được đề xuất)
hoặc regex

Mẫu URL mà, nếu khớp với URL yêu cầu ban đầu, sẽ kích hoạt Hosting để áp dụng câu trả lời viết lại

Sử dụng source để chỉ định glob (nên dùng).
Sử dụng regex để chỉ định một biểu thức chính quy RE2.

destination

Phải có một tệp cục bộ

URL này có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.

Chuyển hướng các yêu cầu đến một hàm

Bạn có thể sử dụng rewrites để phân phát một hàm từ URL Firebase Hosting. Chiến lược phát hành đĩa đơn ví dụ sau là một trích dẫn từ phân phát nội dung động bằng Cloud Functions.

Ví dụ: để chuyển hướng tất cả các yêu cầu từ trang /bigben trên trang web Hosting để thực thi hàm 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)
    }
  } ]
}

Cách region hoạt động trong khối function

Nếu region bị bỏ qua trong khối function của hosting.rewrites config, CLI Firebase cố gắng tự động phát hiện khu vực từ mã nguồn của hàm (nếu không chỉ định) sẽ đặt mặc định là us-central1. Nếu không có mã nguồn của hàm, CLI sẽ cố gắng phát hiện khu vực khỏi hàm được triển khai. Nếu hàm nằm ở nhiều khu vực, CLI yêu cầu chỉ định region trong hosting.rewrites config.

Cách thức pinTag hoạt động trong khối function

Tính năng pinTag chỉ có trong Cloud Functions for Firebase (thế hệ thứ 2). Với tính năng này, bạn có thể đảm bảo rằng mỗi hàm để tạo nội dung động của trang web luôn được đồng bộ hoá với các tài nguyên Hosting tĩnh của bạn và cấu hình Hosting. Ngoài ra, tính năng này cho phép bạn xem trước nội dung viết lại vào các hàm trên kênh xem trước Hosting.

Nếu bạn thêm "pinTag": true vào khối function của hosting.rewrites config, rồi đến biểu tượng "đã ghim" sẽ được triển khai cùng với Tài nguyên và cấu hình Hosting, ngay cả khi đang chạy firebase deploy --only hosting. Nếu bạn khôi phục một phiên bản trang web của bạn, phiên bản "được ghim" cũng được khôi phục.

Lưu ý: Nếu thêm pinTag vào một lệnh viết lại hiện có, trước tiên, bạn phải triển khai việc cập nhật nội dung ghi lại cho "sự kiện phát trực tiếp" của bạn. Sau khi triển khai, bạn có thể xem trước các thay đổi đối với mã của hàm trong Hosting kênh xem trước mà không ảnh hưởng đến quá trình sản xuất.

Tính năng này dựa vào Cloud Run thẻ, tối đa 1.000 thẻ cho mỗi dịch vụ và 2.000 thẻ cho mỗi khu vực. Chiến dịch này có nghĩa là sau hàng trăm lần triển khai, các phiên bản cũ nhất của trang web có thể ngừng hiệu quả.

Sau khi thêm quy tắc ghi lại này và triển khai cho Firebase (sử dụng firebase deploy), hàm của bạn có thể truy cập được qua các URL sau:

Các miền con Firebase của bạn:
PROJECT_ID.web.app/bigben và PROJECT_ID.firebaseapp.com/bigben
Bất kỳ miền tuỳ chỉnh nào đã kết nối:
CUSTOM_DOMAIN/bigben

Khi chuyển hướng yêu cầu đến các hàm bằng Hosting, yêu cầu HTTP được hỗ trợ là GET, POST, HEAD, PUT, DELETE, PATCH và OPTIONS. Các phương thức khác như REPORT hoặc PROFIND không được hỗ trợ.

Yêu cầu trực tiếp đến vùng chứa Cloud Run

Bạn có thể sử dụng rewrites để truy cập vào vùng chứa Cloud Run qua một URL Firebase Hosting. Ví dụ sau đây là một phần trích dẫn từ phân phát nội dung động bằng Cloud Run.

Ví dụ: để chuyển hướng tất cả các yêu cầu từ trang /helloworld trên trang web Hosting để kích hoạt quá trình khởi động và chạy một thực thể vùng chứa 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)
   }
 } ]
}

Cách pinTag hoạt động trong khối run

Với tính năng này, bạn có thể đảm bảo rằng bản sửa đổi của Cloud Run để tạo nội dung động trên trang web của bạn luôn được đồng bộ hoá với tài nguyên Hosting tĩnh và cấu hình Hosting. Ngoài ra, tính năng này cho phép bạn có thể xem trước các lượt viết lại cho Cloud Run vào ngày Hosting các kênh.

Nếu bạn thêm "pinTag": true vào khối run của hosting.rewrites config, thì các tài nguyên và cấu hình Hosting tĩnh của bạn sẽ được ghim vào bản sửa đổi gần đây nhất của dịch vụ Cloud Run, tại thời điểm triển khai. Nếu bạn khôi phục một phiên bản trang web, thì bản sửa đổi của dịch vụ Cloud Run "được ghim" cũng sẽ được khôi phục.

Tính năng này dựa vào Cloud Run thẻ, tối đa 1.000 thẻ cho mỗi dịch vụ và 2.000 thẻ cho mỗi khu vực. Chiến dịch này có nghĩa là sau hàng trăm lần triển khai, các phiên bản cũ nhất của trang web có thể ngừng hiệu quả.

Sau khi thêm quy tắc ghi lại này và triển khai cho Firebase (sử dụng firebase deploy), thì có thể truy cập hình ảnh vùng chứa của bạn qua các URL sau:

Các miền con Firebase của bạn:
PROJECT_ID.web.app/helloworld và PROJECT_ID.firebaseapp.com/helloworld
Bất kỳ miền tuỳ chỉnh nào đã kết nối:
CUSTOM_DOMAIN/helloworld

Khi chuyển hướng các yêu cầu đến vùng chứa Cloud Run bằng Hosting, các phương thức yêu cầu HTTP được hỗ trợ là GET, POST, HEAD, PUT, DELETE, PATCH và OPTIONS. Các phương thức khác như REPORT hoặc PROFIND thì không được hỗ trợ.

Để đạt được hiệu suất tốt nhất, hãy đặt dịch vụ Cloud Run cùng với Hosting bằng cách sử dụng các khu vực sau:

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

Viết lại thành Cloud Run từ Hosting được hỗ trợ trong những khu vực sau:

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

Tạo miền tuỳ chỉnh Dynamic Links

Bạn có thể sử dụng rewrites để tạo miền tuỳ chỉnh Dynamic Links. Truy cập vào Dynamic Links tài liệu để biết thông tin chi tiết về thiết lập miền tuỳ chỉnh cho Dynamic Links.

Chỉ sử dụng miền tuỳ chỉnh cho 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
  } ]
}

Chỉ định tiền tố đường dẫn miền tuỳ chỉnh để sử dụng cho 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
  } ]
}

Để định cấu hình Dynamic Links trong tệp firebase.json, bạn cần có:

Trường		Mô tả
`appAssociation`		Bạn phải đặt thành `AUTO` Nếu bạn không bao gồm thuộc tính này trong cấu hình của mình, thì thuộc tính giá trị mặc định cho `appAssociation` là `AUTO`. Khi đặt thuộc tính này thành `AUTO`, Hosting có thể tự động tạo `assetlinks.json` và `apple-app-site-association` tệp khi được yêu cầu.
`rewrites`
	`source`	Đường dẫn mà bạn muốn sử dụng cho Dynamic Links Không giống như các quy tắc ghi lại đường dẫn đến URL, hãy viết lại các quy tắc cho Dynamic Links không thể chứa biểu thức chính quy.
	`dynamicLinks`	Bạn phải đặt thành `true`

Lưu ý quan trọng: Đối với Dynamic Links, hãy đặc biệt lưu ý đến thứ tự ưu tiên lưu trữ.

Đảm bảo rằng tiền tố URL Dynamic Links không xung đột với các cấu hình lưu trữ có mức độ ưu tiên cao hơn (ví dụ: nội dung tĩnh được lưu trữ luôn có mức độ ưu tiên cao hơn so với nội dung được viết lại).
Trong mỗi thuộc tính redirects và rewrites, Hosting áp dụng lệnh chuyển hướng hoặc ghi đè do quy tắc đầu tiên xác định bằng mẫu URL khớp với đường dẫn đã yêu cầu. Vì vậy, bạn cần cố ý sắp xếp các quy tắc trong mỗi Thuộc tính redirects và rewrites.

Để biết thông tin chi tiết, hãy tham khảo Dynamic Links tài liệu.

Định cấu hình tiêu đề

Không bắt buộc
Tiêu đề cho phép máy khách và máy chủ truyền thêm thông tin bằng một yêu cầu hoặc một phản hồi. Một số bộ tiêu đề có thể ảnh hưởng đến cách trình duyệt xử lý trang và nội dung của trang, bao gồm cả việc kiểm soát truy cập, xác thực, lưu vào bộ nhớ đệm và mã hoá.

Chỉ định tiêu đề phản hồi tuỳ chỉnh, dành riêng cho tệp bằng cách tạo thuộc tính headers chứa một mảng các đối tượng tiêu đề. Trong mỗi đối tượng, hãy chỉ định một mẫu URL nếu khớp với đường dẫn URL yêu cầu, sẽ kích hoạt Hosting để áp dụng tiêu đề phản hồi tuỳ chỉnh được chỉ định.

Dưới đây là cấu trúc cơ bản của thuộc tính headers. Ví dụ này áp dụng một Tiêu đề CORS cho tất cả các tệp phông chữ.

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

Xem ví dụ chi tiết hơn về thuộc tính headers

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

Thuộc tính headers chứa một mảng các định nghĩa, trong đó mỗi định nghĩa phải bao gồm các trường trong bảng dưới đây.

Trường			Mô tả
`headers`
	`source` (được đề xuất) hoặc `regex`		Một mẫu URL, nếu khớp với URL yêu cầu ban đầu, sẽ kích hoạt Hosting để áp dụng tiêu đề tuỳ chỉnh Sử dụng `source` để chỉ định glob (nên dùng). Sử dụng `regex` để chỉ định Biểu thức chính quy RE2. Để tạo tiêu đề khớp với trang 404 tuỳ chỉnh, hãy sử dụng `404.html` làm Giá trị `source` hoặc `regex`.
	mảng (sub-)`headers`		Tiêu đề tuỳ chỉnh mà Hosting áp dụng cho đường dẫn yêu cầu Mỗi tiêu đề phụ phải bao gồm một cặp `key` và `value` (xem hai hàng tiếp theo).
		`key`	Tên của tiêu đề, ví dụ: `Cache-Control`
		`value`	Giá trị cho tiêu đề, ví dụ: `max-age=7200`

Bạn có thể tìm hiểu thêm về Cache-Control trong Phần Hosting mô tả việc phân phát nội dung động và việc lưu trữ các dịch vụ vi mô. Bạn cũng có thể tìm hiểu thêm về Tiêu đề CORS.

Kiểm soát `.html` tiện ích

Không bắt buộc
Thuộc tính cleanUrls cho phép bạn kiểm soát việc có URL hay không phải bao gồm tiện ích .html.

Khi true, Hosting sẽ tự động loại bỏ phần mở rộng .html khỏi phần đã tải lên URL tệp. Nếu bạn thêm một phần mở rộng .html vào yêu cầu, thì Hosting sẽ thực hiện 301 chuyển hướng đến cùng một đường dẫn nhưng loại bỏ phần mở rộng .html.

Sau đây là cách kiểm soát việc đưa .html vào URL bằng cách thêm thuộc tính Thuộc tính cleanUrls:

"hosting": {
  // ...

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

Kiểm soát dấu gạch chéo ở cuối

Không bắt buộc
Thuộc tính trailingSlash cho phép bạn kiểm soát xem có trạng thái tĩnh hay không URL nội dung phải bao gồm dấu gạch chéo ở cuối.

Khi true, Hosting chuyển hướng URL để thêm dấu gạch chéo ở cuối.
Khi false, Hosting chuyển hướng URL để xoá dấu gạch chéo ở cuối.
Khi không chỉ định, Hosting chỉ sử dụng dấu gạch chéo ở cuối cho chỉ mục thư mục tệp (ví dụ: about/index.html).

Dưới đây là cách kiểm soát dấu gạch chéo ở cuối bằng cách thêm thuộc tính trailingSlash:

"hosting": {
  // ...

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

Thuộc tính trailingSlash không ảnh hưởng đến việc viết lại nội dung động do Cloud Functions hoặc Cloud Run phân phát.

So khớp mẫu glob

Tuỳ chọn cấu hình Firebase Hosting tận dụng tối đa so khớp mẫu hình cầu ký hiệu có đuôi extglob, tương tự như cách Git xử lý gitignore quy tắc và Bower xử lý các quy tắc ignore. Trang wiki này là một tài liệu tham khảo chi tiết hơn, nhưng sau đây là phần giải thích cho các ví dụ được sử dụng trên trang này:

firebase.json – Chỉ khớp với tệp firebase.json trong thư mục gốc của thư mục public
** – Khớp với mọi tệp hoặc thư mục trong một thư mục con tuỳ ý
* — Chỉ khớp các tệp và thư mục trong thư mục gốc của Thư mục public
**/.* — Đối sánh bất kỳ tệp nào bắt đầu bằng . (thường là các tệp ẩn, như trong thư mục .git) trong một thư mục con tuỳ ý
**/node_modules/** — Khớp với mọi tệp hoặc thư mục trong một tệp hoặc thư mục tuỳ ý thư mục con của một thư mục node_modules. Thư mục này có thể nằm trong một thư mục tuỳ ý thư mục con của thư mục public
**/*.@(jpg|jpeg|gif|png) — So khớp mọi tệp trong một tệp tuỳ ý thư mục con kết thúc bằng chính xác một trong các mã sau: .jpg, .jpeg, .gif hoặc .png

Ví dụ về cấu hình Hosting đầy đủ

Sau đây là ví dụ về cấu hình firebase.json đầy đủ cho Firebase Hosting. Xin lưu ý rằng tệp firebase.json cũng có thể chứa cấu hình cho các dịch vụ Firebase khác.

{
  "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",

  }
}