Với Firebase Hosting, bạn có thể định cấu hình hành vi lưu trữ tùy chỉnh cho các yêu cầu tới trang web của mình.
Bạn có thể cấu hình gì cho Hosting?
Chỉ định tệp nào trong thư mục dự án cục bộ mà bạn muốn triển khai lên Firebase Hosting. Tìm hiểu làm thế nào.
Phục vụ trang 404/Không tìm thấy tùy chỉnh. Tìm hiểu làm thế nào.
Thiết lập
redirects
cho các trang bạn đã di chuyển hoặc xóa. Tìm hiểu làm thế nào.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 làm thế nào.
Phục vụ một chức năng hoặc truy cập vùng chứa Cloud Run từ URL lưu trữ. Tìm hiểu cách thực hiện: hàm hoặc vùng chứa .
Tạo một miền tùy chỉnh Liên kết động. Tìm hiểu làm thế nào.
Thêm
headers
để chuyển thông tin bổ sung về 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, bộ nhớ đệm, mã hóa, v.v.). Tìm hiểu làm thế nào.Thiết lập viết lại quốc tế hóa (i18n) để phục vụ nội dung cụ thể dựa trên tùy 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 của mình ở đâu?
Bạn xác định cấu hình Firebase Hosting trong tệp firebase.json
của mình. Firebase tự động tạo tệp firebase.json
ở thư mục gốc của dự án khi bạn chạy 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. 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 .
Bạn có thể kiểm tra nội dung firebase.json
đã triển khai bằng API Hosting REST .
Thứ tự ưu tiên của phản hồi Hosting
Các tùy chọn cấu hình Firebase Hosting khác nhau được mô tả trên trang này đôi khi có thể trùng lặp. Nếu có xung đột, Hosting sẽ xác định phản hồi của mình theo thứ tự ưu tiên sau:
- Các vùng tên dành riêng bắt đầu bằng phân đoạn đường dẫn
/__/*
- Chuyển hướng được định cấu hình
- Nội dung tĩnh khớp chính xác
- Viết lại cấu hình
- Trang 404 tùy chỉnh
- Trang 404 mặc định
Nếu bạn đang sử dụng tính năng viết lại i18n , thứ tự ưu tiên xử lý 404 và khớp chính xác sẽ được mở rộng trong phạm vi để phù hợp với "nội dung i18n" của bạn.
Chỉ định tệp nào sẽ triển khai
Các thuộc tính mặc định - public
và ignore
- có trong tệp firebase.json
mặc định xác định tệp nào trong thư mục dự á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
trông như thế này:
"hosting": {
"public": "public", // the only required attribute for Hosting
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
công cộng
Yêu cầu
Thuộc tính public
chỉ định thư mục nào sẽ triển khai lên 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 của bất kỳ thư mục nào, miễn là nó tồn tại trong thư mục dự án của bạn.
Sau đây là tên được chỉ định mặc định của thư mục sẽ triển khai:
"hosting": {
"public": "public"
// ...
}
Bạn có thể thay đổi giá trị mặc định cho thư mục mà bạn muốn triển khai:
"hosting": {
"public": "dist/app"
// ...
}
phớt lờ
Không bắt buộc
Thuộc ignore
chỉ định các tệp cần bỏ qua khi triển khai. Nó có thể mất các khối 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
]
}
Tùy chỉnh trang 404/Không tìm thấy
Không bắt buộc
Bạn có thể đưa ra lỗi 404 Not Found
tùy chỉnh khi người dùng cố gắng truy cập 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, đặt tên là 404.html
, sau đó thêm nội dung 404 Not Found
tùy chỉnh của bạn vào tệp.
Firebase Hosting sẽ hiển thị nội dung của trang 404.html
tùy chỉnh này nếu trình duyệt gây ra lỗi 404 Not Found
trên tên miền hoặc tên miền phụ của bạn.
Định cấu hình chuyển hướng
Không bắt buộc
Sử dụng chuyển hướng URL để ngăn chặn các 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 trình duyệt từ example.com/team
sang example.com/about.html
.
Chỉ định chuyển hướng URL bằng cách tạo thuộc tính redirects
có chứa một mảng đối tượng (được gọi là "quy tắc chuyển hướng"). Trong mỗi quy tắc, 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 Dịch vụ lưu trữ phản hồi bằng chuyển hướng đến URL đích đã chỉ định.
Đây là cấu trúc cơ bản cho thuộc tính redirects
. Ví dụ này chuyển hướng yêu cầu đến /foo
bằng cách gửi yêu cầu mới tới /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
} ]
}
Thuộc tính redirects
chứa một loạt 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ả các đường dẫn URL khi bắt đầu mọi yêu cầu (trước khi trình duyệt xác định xem tệp hoặc thư mục có tồn tại ở đường dẫn đó hay không). Nếu tìm thấy kết quả khớp thì máy chủ gốc của Firebase Hosting sẽ gửi phản hồi chuyển hướng HTTPS để yêu cầu trình duyệt thực hiện yêu cầu mới tại URL destination
.
Cánh đồng | Sự miêu tả | |
---|---|---|
redirects | ||
source (được khuyến nghị)hoặc regex | Mẫu URL, nếu khớp với URL yêu cầu ban đầu, sẽ kích hoạt Dịch vụ lưu trữ áp dụng chuyển hướng
| |
destination | Một URL tĩnh nơi trình duyệt sẽ đưa ra yêu cầu mới URL này có thể là đường dẫn tương đối hoặc tuyệt đối. | |
type | Mã phản hồi HTTPS
|
Nắm bắt các phân đoạn URL để chuyển hướng
Không bắt buộc
Đôi khi, bạn có thể cần nắm bắt các phân đoạn cụ thể của mẫu 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 destination
của quy tắc.
Nếu bạn đang sử dụng trường source
(nghĩa là chỉ định hình cầu 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 bao gồm tiền tố :
để xác định phân đoạn. Nếu bạn cũng cần nắm bắt đường dẫn URL còn lại sau phân đoạn, hãy 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 } ] }
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ể chụp các phân đoạn bằng cách sử dụng các nhóm chụp RE2 được đặt tên hoặc chưa được đặt tên. Các nhóm chụp được đặt tên có thể được sử dụng trong trường destination
với tiền tố :
, trong khi các nhóm chụp không được đặt tên có thể được tham chiếu bằng chỉ mục số của chúng 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 } ] }
Cấu hình viết lại
Không bắt buộc
Sử dụng tính năng viết lại để hiển thị cùng một nội dung cho nhiều URL. Việc viết lại đặ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 nội dung 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 HTML5 pushState để điều hướng. Khi trình duyệt cố gắng mở đường dẫn URL khớp với mẫu URL source
hoặc biểu thức regex
, thay vào đó, trình duyệt sẽ được cung cấp nội dung của tệp tại URL destination
.
Chỉ định việc ghi lại URL bằng cách tạo thuộc tính rewrites
có chứa một mả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ột mẫu URL, nếu khớp với đường dẫn URL yêu cầu, sẽ kích hoạt Dịch vụ lưu trữ phản hồi như thể dịch vụ được cung cấp URL đích đã chỉ định.
Đây là cấu trúc cơ bản cho thuộc tính rewrites
. Ví dụ này phục vụ index.html
cho các yêu cầu tới các 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"
} ]
}
"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 viết 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 tệp hoặc thư mục không tồn tại ở đường dẫn URL khớp với mẫu URL source
hoặc biểu thức regex
được chỉ định. Khi một yêu cầu kích hoạt quy tắc viết 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.
Cánh đồng | Sự miêu tả | |
---|---|---|
rewrites | ||
source (được khuyến nghị)hoặc regex | 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 việc viết lại
| |
destination | Một tập tin cục bộ phải tồn tại URL này có thể là đường dẫn tương đối hoặc tuyệt đối. |
Yêu cầu trực tiếp đến một chức năng
Bạn có thể sử dụng rewrites
để phục vụ một chức năng từ URL Lưu trữ Firebase. Ví dụ sau đây là đoạn trích từ việc cung cấp nội dung động bằng Cloud Functions .
Ví dụ: để hướng tất cả các yêu cầu từ trang /bigben
trên trang web Lưu trữ của bạn thực thi chức năng 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)
}
} ]
}
Nếu
region
bị bỏ qua khỏi khốifunction
của cấu hìnhhosting.rewrites
, Firebase CLI sẽ cố gắng tự động phát hiện vùng đó từ mã nguồn của hàm, nếu không được chỉ định thì mặc định làus-central1
. Nếu mã nguồn của hàm không có sẵn, CLI sẽ cố gắng phát hiện vùng từ hàm được triển khai. Nếu chức năng nằm ở nhiều vùng, CLI yêu cầu phải chỉ địnhregion
trong cấu hìnhhosting.rewrites
.
Tính năng
pinTag
chỉ khả dụng trong Cloud Functions cho Firebase (thế hệ 2). Với tính năng này, bạn có thể đảm bảo rằng mỗi chức năng tạo nội dung động cho trang web của bạn đều được đồng bộ hóa với tài nguyên Lưu trữ tĩnh và cấu hình Lưu trữ. Ngoài ra, tính năng này cho phép bạn xem trước các bản ghi lại của mình đối với các chức năng trên các kênh xem trước Hosting.Nếu bạn thêm
"pinTag": true
vào khốifunction
của cấu hìnhhosting.rewrites
thì chức năng "được ghim" sẽ được triển khai cùng với cấu hình và tài nguyên Lưu trữ tĩnh của bạn, ngay cả khi chạy. Nếu bạn khôi phục một phiên bản trang web của mình, chức năng "được ghim" cũng được khôi phục.
firebase deploy --only hosting Tính năng này dựa trên thẻ Cloud Run , có giới hạn 1000 thẻ cho mỗi dịch vụ và 2000 thẻ cho mỗi khu vực. Điều 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 hoạt động.
Sau khi thêm quy tắc viết lại này và triển khai lên Firebase (sử dụng firebase deploy
), chức năng của bạn có thể truy cập được thông qua các URL sau:
Tên miền phụ Firebase của bạn:
PROJECT_ID .web.app/bigben
vàPROJECT_ID .firebaseapp.com/bigben
Bất kỳ miền tùy chỉnh nào được kết nối :
CUSTOM_DOMAIN /bigben
Khi chuyển hướng yêu cầu đến các chức năng 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 pháp khác như REPORT
hoặc PROFIND
không được hỗ trợ.
Yêu cầu trực tiếp tới vùng chứa Cloud Run
Bạn có thể sử dụng rewrites
để truy cập vùng chứa Cloud Run từ URL Lưu trữ Firebase. Ví dụ sau đây là đoạn trích từ việc cung cấp 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 Lưu trữ của bạn nhằm kích hoạt quá trình khởi động và chạy phiên bản 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)
}
} ]
}
Với tính năng này, bạn có thể đảm bảo rằng bản sửa đổi dịch vụ Cloud Run để tạo nội dung động cho trang web của bạn được đồng bộ hóa với tài nguyên Lưu trữ tĩnh và cấu hình Lưu trữ. Ngoài ra, tính năng này cho phép bạn xem trước các bản viết lại của mình lên Cloud Run trên các kênh xem trước của Hosting.
Nếu bạn thêm
"pingTag": true
vào khốirun
của cấu hìnhhosting.rewrites
, tài nguyên và cấu hình Lưu trữ tĩnh của bạn sẽ được ghim vào bản sửa đổi mới 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 của mình, bản sửa đổi của dịch vụ Cloud Run "được ghim" cũng được khôi phục.Tính năng này dựa trên thẻ Cloud Run , có giới hạn 1000 thẻ cho mỗi dịch vụ và 2000 thẻ cho mỗi khu vực. Điều 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 hoạt động.
Sau khi thêm quy tắc viết lại này và triển khai lên Firebase (sử dụng firebase deploy
), hình ảnh vùng chứa của bạn có thể truy cập được thông qua các URL sau:
Tên miền phụ Firebase của bạn:
PROJECT_ID .web.app/helloworld
vàPROJECT_ID .firebaseapp.com/helloworld
Bất kỳ miền tùy chỉnh nào được kết nối :
CUSTOM_DOMAIN /helloworld
Khi chuyển hướng 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 pháp khác như REPORT
hoặc PROFIND
không được hỗ trợ.
Để có hiệu suất tốt nhất, hãy đặt dịch vụ Cloud Run của bạn với Hosting bằng các khu vực sau:
-
us-west1
-
us-central1
-
us-east1
-
europe-west1
-
asia-east1
Việc ghi lại vào Cloud Run từ Hosting được hỗ trợ ở các 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 liên kết động miền tùy chỉnh
Bạn có thể sử dụng rewrites
để tạo Liên kết động cho miền tùy chỉnh. Hãy truy cập tài liệu Liên kết động để biết thông tin chi tiết về cách thiết lập miền tùy chỉnh cho Liên kết động .
Chỉ sử dụng miền tùy chỉnh của bạn cho Liên kết động
"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 tên miền tùy chỉnh để sử dụng cho Liên kết động
"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 } ] }
Việc định cấu hình Liên kết động trong tệp firebase.json
của bạn yêu cầu những điều sau:
Cánh đồng | Sự miêu tả | |
---|---|---|
appAssociation | Phải được đặt thành
| |
rewrites | ||
source | Đường dẫn mà bạn muốn sử dụng cho Liên kết động Không giống như các quy tắc viết lại đường dẫn tới URL, quy tắc viết lại cho Liên kết động không được chứa biểu thức thông thường. | |
dynamicLinks | Phải được đặt thành true |
Đị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ủ chuyển thông tin bổ sung cùng với yêu cầu hoặc 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 nó, bao gồm kiểm soát truy cập, xác thực, bộ nhớ đệm và mã hóa.
Chỉ định tiêu đề phản hồi tùy chỉnh, dành riêng cho tệp bằng cách tạo thuộc tính headers
có chứa một mảng đố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 Dịch vụ lưu trữ áp dụng các tiêu đề phản hồi tùy chỉnh đã chỉ định.
Đây là cấu trúc cơ bản cho thuộc tính headers
. Ví dụ này áp dụng 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": "*"
} ]
} ]
}
"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 headers
chứa một mảng định nghĩa, trong đó mỗi định nghĩa phải bao gồm các trường trong bảng bên dưới.
Cánh đồng | Sự miêu tả | ||
---|---|---|---|
headers | |||
source (được khuyến nghị)hoặc regex | Mẫu URL, nếu khớp với URL yêu cầu ban đầu, sẽ kích hoạt Dịch vụ lưu trữ áp dụng tiêu đề tùy chỉnh
Để tạo tiêu đề phù hợp với trang 404 tùy chỉnh của bạn, hãy sử dụng | ||
headers (phụ) | Các tiêu đề tùy 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 | 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 Lưu trữ mô tả việc phân phát nội dung động và lưu trữ các vi dịch vụ. Bạn cũng có thể tìm hiểu thêm về tiêu đề CORS .
Kiểm soát tiện ích mở rộng .html
Không bắt buộc
Thuộc tính cleanUrls
cho phép bạn kiểm soát xem URL có nên bao gồm phần mở rộng .html
hay không.
Khi true
, Hosting sẽ tự động loại bỏ phần mở rộng .html
khỏi URL của tệp đã tải lên. Nếu phần mở rộng .html
được thêm vào yêu cầu, Hosting sẽ thực hiện chuyển hướng 301
đến cùng một đường dẫn nhưng loại bỏ phần mở rộng .html
.
Dưới đây là cách kiểm soát việc đưa .html
vào URL bằng cách đưa 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 URL nội dung tĩnh có bao gồm dấu gạch chéo ở cuối hay không.
- Khi
true
, Hosting sẽ chuyển hướng URL để thêm dấu gạch chéo ở cuối. - Khi
false
, Hosting sẽ chuyển hướng URL để loại bỏ dấu gạch chéo ở cuối. - Khi không được chỉ định, Hosting chỉ sử dụng dấu gạch chéo ở cuối cho các tệp chỉ mục thư mục (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 ghi lại nội dung động do Cloud Functions hoặc Cloud Run cung cấp.
Kết hợp mô hình toàn cầu
Tùy chọn cấu hình Firebase Hosting sử dụng rộng rãi ký hiệu khớp mẫu toàn cầu với extglob, tương tự như cách Git xử lý các quy tắc gitignore
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à giải thích về các ví dụ được sử dụng trên trang này:
firebase.json
- Chỉ khớp với tệpfirebase.json
trong thư mục gốc của thư mụcpublic
**
- Khớp bất kỳ tệp hoặc thư mục nào trong thư mục con tùy ý*
— Chỉ khớp các tập tin và thư mục trong thư mục gốc của thư mụcpublic
**/.*
— Khớp với 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 thư mục con tùy ý**/node_modules/**
- Khớp bất kỳ tệp hoặc thư mục nào trong thư mục con tùy ý của thư mụcnode_modules
, bản thân thư mục này có thể nằm trong thư mục con tùy ý của thư mụcpublic
**/*.@(jpg|jpeg|gif|png)
— Khớp bất kỳ tệp nào trong thư mục con tùy ý kết thúc bằng chính xác một trong các tệp sau:.jpg
,.jpeg
,.gif
hoặc.png
Ví dụ cấu hình Hosting đầy đủ
Sau đây là ví dụ về cấu hình firebase.json
đầy đủ cho Firebase Hosting. 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",
}
}