Với Firebase Hosting, bạn có thể định cấu hình hành vi lưu trữ tuỳ chỉnh cho các yêu cầu đến trang web của mình.
Bạn có thể định cấu hình 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 đến 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ừ URL Hosting. Tìm hiểu cách: hàm hoặc vùng chứa.
Tạo 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 viết lại quốc tế hoá (i18n) để phân phát nội dung cụ thể dựa trên ngôn ngữ ưu tiên 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 tệp firebase.json
. Firebase sẽ 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ụ về cấu hình firebase.json
đầy đủ (chỉ bao gồm Firebase Hosting) ở cuối trang này. 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.
Bạn có thể kiểm tra nội dung firebase.json
đã triển khai bằng cách sử dụng Hosting REST API.
Thứ tự ưu tiên của các phản hồi Hosting
Các tuỳ chọn cấu hình Firebase Hosting đượ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 bằng cách sử dụng thứ tự ưu tiên sau:
- Không gian tên được đặt trước bắt đầu bằng một phân đoạn đường dẫn
/__/*
- Đã định cấu hình lệnh chuyển hướng
- Nội dung tĩnh khớp chính xác
- Đã định cấu hình tính năng viết lại
- Trang 404 tuỳ 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ì thứ tự ưu tiên xử lý lỗi 404 và kiểu khớp chính xác sẽ được mở rộng phạm vi để phù hợp với "nội dung i18n" của bạn.
Chỉ định tệp cần 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 những tệp trong thư mục dự án sẽ được triển khai cho dự án Firebase.
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 cần triển khai đến Firebase Hosting. Giá trị mặc định là một 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à thư mục đó tồn tại trong thư mục dự án.
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. Phương thức này có thể nhận glob theo cách tương tự như Git xử lý .gitignore
.
Sau đây là các giá trị mặc định cho các tệp cần 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, đặt tên là 404.html
, sau đó thêm nội dung 404 Not Found
tuỳ chỉnh 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 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
Sử 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 trình duyệt từ example.com/team
sang example.com/about.html
.
Chỉ định lệnh chuyển hướng URL bằng cách tạo một thuộc tính redirects
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, mẫu này sẽ kích hoạt Hosting để phản hồi bằng lệnh chuyển hướng đến URL đích đã chỉ định.
Dưới đây là cấu trúc cơ bản của thuộc tính redirects
. Ví dụ này chuyển hướng các yêu cầu đến /foo
bằng cách tạo 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
} ]
}
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ả đường dẫn URL ở đầu mỗi yêu cầu (trước khi trình duyệt xác định xem có một tệp hoặc thư mục nào tồn tại ở đường dẫn đó hay không). Nếu tìm thấy kết quả trùng khớp, thì máy chủ gốc Firebase Hosting sẽ gửi phản hồi chuyển hướng HTTPS để yêu cầu trình duyệt tạo một yêu cầu mới tại URL destination
.
Trường | Mô tả | |
---|---|---|
redirects |
||
source (nên dùng) 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 lệnh chuyển hướng
|
|
destination |
URL tĩnh mà trình duyệt sẽ tạo một 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
|
Ghi lại các phân đoạn URL cho lệnh chuyển hướng
Không bắt buộc
Đôi khi, bạn có thể cần thu thập 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 dẫn destination
của quy tắc.
Định cấu hình tính năng 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. Tính năng viết lại đặc biệt hữu ích với tính năng so khớp mẫu, vì bạn có thể chấp nhận mọi URL khớp với mẫu và để mã phía máy khách quyết định nội dung cần 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 một trình duyệt cố gắng mở một đường dẫn URL khớp với mẫu URL source
hoặc regex
đã chỉ định, trình duyệt sẽ được cung 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 một thuộc tính rewrites
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 mà nếu khớp với đường dẫn URL yêu cầu, sẽ kích hoạt Hosting phản hồi như thể dịch vụ được cung cấp URL đích đã chỉ định.
Dưới đâ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"
} ]
}
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 viết lại nếu một tệp hoặc thư mục không tồn tại tại đường dẫn URL khớp với mẫu URL source
hoặc regex
đã 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ì lệnh chuyển hướng HTTP.
Trường | Mô tả | |
---|---|---|
rewrites |
||
source (nên dùng) 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 tính năng viết lại
|
|
destination |
Tệp cục bộ phải tồn tại 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. Ví dụ sau đây là một đoạn trích từ phần 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)
}
} ]
}
Sau khi thêm quy tắc viết lại này và triển khai lên Firebase (bằng cách sử dụng firebase deploy
), bạn có thể truy cập vào hàm của mình thông qua các URL sau:
Miền con Firebase:
PROJECT_ID.web.app/bigben
vàPROJECT_ID.firebaseapp.com/bigben
Mọi miền tuỳ chỉnh đã kết nối:
CUSTOM_DOMAIN/bigben
Khi chuyển hướng các yêu cầu đến các hàm 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
không được hỗ trợ.
Chuyển 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 từ một URL Firebase Hosting. Ví dụ sau đây là một đoạn trích từ phần 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)
}
} ]
}
Sau khi thêm quy tắc viết lại này và triển khai lên Firebase (bằng firebase deploy
), bạn có thể truy cập vào hình ảnh vùng chứa thông qua các URL sau:
Miền con Firebase:
PROJECT_ID.web.app/helloworld
vàPROJECT_ID.firebaseapp.com/helloworld
Mọi miền tuỳ chỉnh đã 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
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ệc ghi lại 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 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 tài liệu về Dynamic Links để biết thông tin chi tiết về cách 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 |
Phải được đặt thành
|
|
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 viết lại đường dẫn đến URL, quy tắc viết lại cho Dynamic Links không được chứa biểu thức chính quy. |
|
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 ứng dụng và máy chủ truyền thêm thông tin cùng với một yêu cầu hoặc phản hồi. Một số nhóm 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 quyền 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 một 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, mẫu này sẽ kích hoạt Hosting để áp dụng các tiêu đề phản hồi tuỳ chỉnh đã 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 tiêu đề CORS cho tất 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": "*"
} ]
} ]
}
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 (nên dùng) 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
Để tạo tiêu đề khớp với trang 404 tuỳ chỉnh, hãy sử dụng |
||
mảng (phụ)headers |
Các 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 |
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ả cách phân phát nội dung động và 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 tiện ích .html
Không bắt buộc
Thuộc tính cleanUrls
cho phép bạn kiểm soát việc URL có bao gồm phần mở rộng .html
hay không.
Khi true
, Hosting sẽ tự động xoá phần mở rộng .html
khỏi URL của tệp đã tải lên. Nếu bạn thêm phần mở rộng .html
vào yêu cầu, Hosting sẽ thực hiện lệnh chuyển hướng 301
đến cùng một đường dẫn nhưng xoá 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 thêm 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 việc liệu URL nội dung tĩnh có chứa 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 để xoá 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 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
Các tuỳ chọn cấu hình Firebase Hosting sử dụng rộng rãi ký hiệu khớp mẫu glob 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à tài liệu tham khảo chi tiết hơn, nhưng sau đây là nội dung 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 với mọi tệp hoặc thư mục trong một thư mục con tuỳ ý*
– Chỉ khớp với các tệp và thư mục trong thư mục gốc của thư mụcpublic
**/.*
– Khớp với mọi tệp 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 thư mục con tuỳ ý của thư mụcnode_modules
, thư mục con này có thể nằm trong một thư mục con tuỳ ý của thư mụcpublic
**/*.@(jpg|jpeg|gif|png)
– Khớp với mọi tệp trong một thư mục con bất kỳ kết thúc bằng đúng một trong các tệp 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",
}
}