Firebase Hosting ile sitenize gelen istekler için özelleştirilmiş barındırma davranışını yapılandırabilirsiniz.
Hosting için neleri yapılandırabilirsiniz?
Yerel proje dizininizdeki hangi dosyaları Firebase Hosting'e dağıtmak istediğinizi belirtin. Nasıl yapacağınızı öğrenin.
Özelleştirilmiş bir 404/Bulunamadı sayfası sunun. Nasıl yapacağınızı öğrenin.
Taşıdığınız veya sildiğiniz sayfalar için
redirects
özelliğini ayarlayın. Nasıl yapacağınızı öğrenin.Aşağıdaki amaçlar için
rewrites
hizmetini ayarlama:Birden fazla URL için aynı içeriği gösterin. Nasıl yapılacağını öğrenin.
Bir işlev sunun veya bir Hosting URL'sinden Cloud Run container'ına erişin. Nasıl yapılacağını öğrenin: function veya container.
Özel bir alan Dinamik Bağlantısı oluşturun. Nasıl yapacağınızı öğrenin.
Bir istek veya yanıt hakkında, tarayıcıların sayfayı ve içeriğini nasıl işlemesi gerektiği (kimlik doğrulama, önbelleğe alma, kodlama vb.) gibi ek bilgileri iletmek için
headers
ekleyin. Nasıl yapacağınızı öğrenin.Kullanıcının dil tercihine ve/veya ülkesine göre belirli içerikler sunmak için uluslararasılaştırma (i18n) yeniden yazmaları ayarlayın. Nasıl yapılacağını öğrenin (farklı bir sayfa).
Hosting yapılandırmanızı nerede tanımlarsınız?
Firebase Hosting yapılandırmanızı firebase.json
dosyanızda tanımlarsınız. firebase init
komutunu çalıştırdığınızda Firebase, firebase.json
dosyanızı proje dizininizin kök dizininde otomatik olarak oluşturur.
Bu sayfanın alt kısmında tam firebase.json
yapılandırma örneğini (yalnızca Firebase Hosting'i kapsar) bulabilirsiniz. firebase.json
dosyasının diğer Firebase hizmetlerinin yapılandırmaları da içerebileceğini unutmayın.
Dağıtılan firebase.json
içeriğini Hosting REST API'yi kullanarak kontrol edebilirsiniz.
Hosting yanıtlarının öncelik sırası
Bu sayfada açıklanan farklı Firebase Hosting yapılandırma seçenekleri bazen çakışabilir. Bir çakışma olması durumunda Hosting, yanıtını aşağıdaki öncelik sırasını kullanarak belirler:
/__/*
yol segmentiyle başlayan ayrılmış ad alanları- Yapılandırılmış yönlendirmeler
- Tam eşlemeli statik içerik
- Yapılandırılmış yeniden yazmalar
- Custom 404 (Özel 404 sayfası)
- Varsayılan 404 sayfası
i18n yeniden yazmalarını kullanıyorsanız tam eşleşme ve 404 işleme önceliği sırası, "i18n içeriğinizi" kapsayacak şekilde kapsam dahilinde genişletilir.
Dağıtılacak dosyaları belirtme
Varsayılan firebase.json
dosyasına dahil edilen public
ve ignore
varsayılan özellikleri, proje dizininizdeki hangi dosyaların Firebase projenize dağıtılması gerektiğini tanımlar.
Bir firebase.json
dosyasındaki varsayılan hosting
yapılandırması şöyle görünür:
"hosting": {
"public": "public", // the only required attribute for Hosting
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
herkese açık
Zorunlu
public
özelliği, Firebase Hosting'e hangi dizinin dağıtılacağını belirtir. Varsayılan değer public
adlı bir dizindir ancak proje dizininizde bulunduğu sürece herhangi bir dizinin yolunu belirtebilirsiniz.
Aşağıda, dağıtılacak dizin için belirtilen varsayılan ad verilmiştir:
"hosting": {
"public": "public"
// ...
}
Varsayılan değeri, dağıtmak istediğiniz dizinle değiştirebilirsiniz:
"hosting": {
"public": "dist/app"
// ...
}
yoksay
İsteğe bağlı
ignore
özelliği, dağıtımda yoksayılacak dosyaları belirtir. glob'ları, Git'in .gitignore
işlediği şekilde alabilir.
Aşağıda, dosyaların yoksayılması için varsayılan değerler verilmiştir:
"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/Bulunamadı sayfasını özelleştirme
İsteğe bağlı
Bir kullanıcı var olmayan bir sayfaya erişmeye çalıştığında özel bir 404 Not Found
hatası sunabilirsiniz.
Projenizin public
dizininde yeni bir dosya oluşturun, dosyaya 404.html
adını verin ve ardından özel 404 Not Found
içeriğinizi dosyaya ekleyin.
Bir tarayıcı, alanınızda veya alt alanınızda 404 Not Found
hatasını tetiklerse Firebase Hosting bu özel 404.html
sayfasının içeriğini gösterir.
Yönlendirmeleri yapılandırma
İsteğe bağlı
Bir sayfayı taşıdıysanız çalışmayan bağlantıları önlemek veya URL'leri kısaltmak için URL yönlendirmesi kullanın. Örneğin, bir tarayıcıyı example.com/team
adresinden example.com/about.html
adresine yönlendirebilirsiniz.
Bir nesne dizisi ("yönlendirme kuralları" olarak adlandırılır) içeren bir redirects
özelliği oluşturarak URL yönlendirmelerini belirtin. Her kuralda, istek URL yoluyla eşleşirse belirtilen hedef URL'ye yönlendirmeyle yanıt vermesi için Hosting'i tetikleyen bir URL kalıbı belirtin.
Aşağıda, bir redirects
özelliğinin temel yapısı verilmiştir. Bu örnek, /bar
öğesine yeni bir istekte bulunarak istekleri /foo
sayfasına yönlendirir.
"hosting": {
// ...
// Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
"redirects": [ {
"source": "/foo",
"destination": "/bar",
"type": 301
} ]
}
redirects
özelliği, her kuralın aşağıdaki tabloda bulunan alanları içermesi gereken bir yönlendirme kuralları dizisi içerir.
Firebase Hosting, her isteğin başında source
veya regex
değerini tüm URL yollarıyla karşılaştırır (tarayıcı bu yolda bir dosya veya klasör olup olmadığını belirlemeden önce). Eşleşme bulunursa Firebase Hosting kaynak sunucusu, tarayıcıya destination
URL'de yeni bir istek yapmasını bildiren bir HTTPS yönlendirme yanıtı gönderir.
Alan | Açıklama | |
---|---|---|
redirects |
||
source (önerilen) veya regex
|
İlk istek URL'siyle eşleşirse yönlendirmeyi uygulamak için Hosting'i tetikleyen bir URL kalıbı
|
|
destination |
Tarayıcının yeni bir istekte bulunması gereken statik URL Bu URL göreli veya mutlak bir yol olabilir. |
|
type |
HTTPS yanıt kodu
|
Yönlendirmeler için URL segmentlerini yakalama
İsteğe bağlı
Bazen bir yönlendirme kuralının URL kalıbının (source
veya regex
değeri) belirli segmentlerini yakalamanız, ardından bu segmentleri kuralın destination
yolunda yeniden kullanmanız gerekebilir.
Yeniden yazmaları yapılandır
İsteğe bağlı
Aynı içeriği birden çok URL'de göstermek için bir yeniden yazma işlevini kullanın. Kalıpla eşleşen herhangi bir URL'yi kabul edebileceğiniz ve neyi göstereceğinize istemci tarafı kodun karar vermesine izin verebileceğiniz için yeniden yazmalar özellikle kalıp eşleştirmede yararlıdır.
Gezinme için HTML5 pushState kullanan uygulamaları desteklemek için yeniden yazma işlemlerini de kullanabilirsiniz. Bir tarayıcı, belirtilen source
veya regex
URL kalıbıyla eşleşen bir URL yolunu açmaya çalıştığında tarayıcıya dosyanın içeriği bunun yerine destination
URL'sinde verilir.
Nesne dizisi ("yeniden yazma kuralları" olarak adlandırılır) içeren bir rewrites
özelliği oluşturarak URL yeniden yazma işlemlerini belirtin. Her kuralda bir URL kalıbı belirtin. Bu kalıp, istek URL yoluyla eşleşirse Service'e belirtilen hedef URL'yi verilmiş gibi yanıt vermesi için Hosting'i tetikler.
Aşağıda, bir rewrites
özelliğinin temel yapısı verilmiştir. Bu örnek, var olmayan dosya veya dizinlere yapılan istekler için index.html
hizmetini sunar.
"hosting": {
// ...
// Serves index.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
rewrites
özelliği, her kuralın aşağıdaki tabloda bulunan alanları içermesi gereken bir yeniden yazma kuralları dizisi içerir.
Firebase Hosting yalnızca bir dosya veya dizin, belirtilen source
ya da regex
URL kalıbıyla eşleşen bir URL yolunda bulunmuyorsa yeniden yazma kuralı uygular.
Bir istek bir yeniden yazma kuralını tetiklediğinde, tarayıcı bir HTTP yönlendirmesi yerine belirtilen destination
dosyasının gerçek içeriğini döndürür.
Alan | Açıklama | |
---|---|---|
rewrites |
||
source (önerilen) veya regex
|
İlk istek URL'siyle eşleşirse yeniden yazmayı uygulamak için Hosting'i tetikleyen bir URL kalıbı
|
|
destination |
Var olması gereken yerel bir dosya Bu URL göreli veya mutlak bir yol olabilir. |
İşleve doğrudan istekler
Firebase Hosting URL'sinden işlev sunmak için rewrites
kullanabilirsiniz. Aşağıdaki örnek, Cloud Functions kullanarak dinamik içerik sunma ile ilgili bir alıntıdır.
Örneğin, Barındırma sitenizin /bigben
sayfasından gelen tüm istekleri bigben
işlevini yürütmek üzere yönlendirmek için:
"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)
}
} ]
}
Bu yeniden yazma kuralını ekledikten ve Firebase'e dağıttıktan sonra (firebase deploy
kullanarak) işlevinize aşağıdaki URL'ler aracılığıyla erişebilirsiniz:
Firebase alt alanlarınız:
PROJECT_ID.web.app/bigben
vePROJECT_ID.firebaseapp.com/bigben
Bağlı özel alanlar:
CUSTOM_DOMAIN/bigben
İstekleri Hosting ile işlevlere yönlendirirken GET
, POST
, HEAD
, PUT
, DELETE
, PATCH
ve OPTIONS
desteklenir.
REPORT
veya PROFIND
gibi diğer yöntemler desteklenmez.
İstekleri bir Cloud Run container'ına yönlendirme
Firebase Hosting URL'sinden Cloud Run container'ına erişmek için rewrites
kullanabilirsiniz. Aşağıdaki örnek, Cloud Run kullanarak dinamik içerik sunma ile ilgili bir alıntıdır.
Örneğin, barındırma sitenizdeki /helloworld
sayfasından tüm istekleri, helloworld
container örneğinin başlatılmasını ve çalıştırılmasını tetiklemek üzere yönlendirmek için:
"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)
}
} ]
}
Bu yeniden yazma kuralını ekledikten ve Firebase'e (firebase deploy
kullanarak) dağıttıktan sonra kapsayıcı görüntünüze aşağıdaki URL'ler aracılığıyla erişebilirsiniz:
Firebase alt alanlarınız:
PROJECT_ID.web.app/helloworld
vePROJECT_ID.firebaseapp.com/helloworld
Bağlı özel alanlar:
CUSTOM_DOMAIN/helloworld
İstekleri Hosting ile Cloud Run container'larına yönlendirirken GET
, POST
, HEAD
, PUT
, DELETE
, PATCH
ve OPTIONS
HTTP istek yöntemleri desteklenir. REPORT
veya PROFIND
gibi diğer yöntemler desteklenmez.
En iyi performansı elde etmek için aşağıdaki bölgeleri kullanarak Cloud Run hizmetinizi Hosting ile ortak kullanın:
us-west1
us-central1
us-east1
europe-west1
asia-east1
Hosting'den Cloud Run'a yapılan yeniden yazma işlemleri aşağıdaki bölgelerde desteklenir:
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
Özel alan adı Dinamik Bağlantıları oluşturma
Özel alan Dinamik Bağlantıları oluşturmak için rewrites
kullanabilirsiniz. Dynamic Links için özel alan adı ayarlama hakkında ayrıntılı bilgi için Dynamic Links dokümanlarına bakın.
Özel alan adınızı yalnızca Dinamik Bağlantılar için kullanın
"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 için kullanılacak özel alan yolu öneklerini belirtin
"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
dosyanızda Dinamik Bağlantıları yapılandırmak için şunlar gerekir:
Alan | Açıklama | |
---|---|---|
appAssociation |
|
|
rewrites |
||
source |
Dynamic Links için kullanmak istediğiniz bir yol URL'lerin yollarını yeniden yazan kuralların aksine Dinamik Bağlantılar için yeniden yazma kuralları normal ifadeler içeremez. |
|
dynamicLinks |
true olarak ayarlanmalıdır
|
Üstbilgileri yapılandırma
İsteğe bağlı
Üstbilgiler, istemcinin ve sunucunun bir istek veya yanıtla birlikte ek bilgiler iletmesine olanak tanır. Bazı üst bilgi grupları, tarayıcının sayfayı ve içeriği (erişim denetimi, kimlik doğrulama, önbelleğe alma ve kodlama dahil) nasıl işleyeceğini etkileyebilir.
Başlık nesneleri dizisi içeren bir headers
özelliği oluşturarak özel, dosyaya özel yanıt başlıkları belirtin. Her nesnede, istek URL'si yoluyla eşleşmesi durumunda belirtilen özel yanıt başlıklarını uygulamak için Hosting'i tetikleyen bir URL kalıbı belirtin.
Aşağıda, bir headers
özelliğinin temel yapısı verilmiştir. Bu örnekte, tüm yazı tipi dosyaları için bir CORS başlığı uygulanır.
"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": "*"
} ]
} ]
}
headers
özelliği, her tanımın aşağıdaki tabloda bulunan alanları içermesi gereken bir tanım dizisi içerir.
Alan | Açıklama | ||
---|---|---|---|
headers |
|||
source (önerilen) veya regex
|
İlk istek URL'siyle eşleşirse özel üstbilgiyi uygulamak için Hosting'i tetikleyen bir URL kalıbı
Özel 404 sayfanızla eşleşecek bir başlık oluşturmak için |
||
(alt-)headers dizisi |
Hosting'in istek yoluna uyguladığı özel başlıklar Her alt başlık bir |
||
key |
Üstbilginin adı (örneğin, Cache-Control ) |
||
value |
Üstbilginin değeri (örneğin, max-age=7200 ) |
Dinamik içerik sunma ve mikro hizmetler barındırmayı açıklayan Barındırma bölümünde Cache-Control
hakkında daha fazla bilgi edinebilirsiniz. Ayrıca CORS başlıkları hakkında daha fazla bilgi edinebilirsiniz.
.html
uzantıyı kontrol et
İsteğe bağlı
cleanUrls
özelliği, URL'lerin .html
uzantısını içerip içermeyeceğini kontrol etmenize olanak tanır.
true
olduğunda Hosting, .html
uzantısını yüklenen dosya URL'lerinden otomatik olarak çıkarır. İstekte .html
uzantısı eklenirse Hosting, aynı yola 301
yönlendirmesi yapar ancak .html
uzantısını kaldırır.
Aşağıda, cleanUrls
özelliği ekleyerek URL'lere .html
dahil edilmesini nasıl kontrol edeceğiniz açıklanmıştır:
"hosting": {
// ...
// Drops `.html` from uploaded URLs
"cleanUrls": true
}
Sondaki eğik çizgileri kontrol et
İsteğe bağlı
trailingSlash
özelliği, statik içerik URL'lerinin sonunda eğik çizgi olup olmayacağını kontrol etmenize olanak tanır.
true
olduğunda Hosting, URL'leri yönlendirerek URL'lerin sonuna eğik çizgi ekler.false
olduğunda Hosting, URL'leri sondaki eğik çizgiyi kaldıracak şekilde yönlendirir.- Bu değer belirtilmediğinde, Hosting yalnızca dizin dizini dosyaları için sondaki eğik çizgileri kullanır (örneğin,
about/index.html
).
Sondaki eğik çizgileri, trailingSlash
özelliği ekleyerek nasıl kontrol edeceğiniz aşağıda açıklanmıştır:
"hosting": {
// ...
// Removes trailing slashes from URLs
"trailingSlash": false
}
trailingSlash
özelliği, Cloud Functions veya Cloud Run tarafından sunulan dinamik içeriklere yapılan yeniden yazma işlemlerini etkilemez.
Yerküre kalıbı eşleşmesi
Firebase Hosting yapılandırma seçenekleri, Git'in gitignore
kurallarını ve Bower'ın ignore
kurallarını işlemesine benzer şekilde, extglob ile glob kalıp eşleştirme gösterimini kapsamlı bir şekilde kullanır.
Bu wiki sayfası daha ayrıntılı bir referanstır, ancak bu sayfada kullanılan örneklerin açıklamaları aşağıda verilmiştir:
firebase.json
- Yalnızcapublic
dizininin kökündekifirebase.json
dosyasıyla eşleşir**
— Rastgele bir alt dizindeki herhangi bir dosya veya klasörle eşleşir.*
: Yalnızcapublic
dizininin kök dizinindeki dosya ve klasörleri eşleştirir**/.*
— Rastgele bir alt dizindeki.
ile başlayan tüm dosyalarla (genellikle gizli dosyalar,.git
klasörü gibi) eşleşir**/node_modules/**
—node_modules
klasörünün rastgele bir alt dizinindeki herhangi bir dosya veya klasörle eşleşir. Bu alt dizin,public
dizininin rastgele bir alt dizininde yer alabilir.**/*.@(jpg|jpeg|gif|png)
— Şunlardan tam olarak biriyle biten rastgele bir alt dizindeki herhangi bir dosyayla eşleşir:.jpg
,.jpeg
,.gif
veya.png
Full Hosting yapılandırması örneği
Aşağıda, Firebase Hosting için eksiksiz bir firebase.json
yapılandırma örneği verilmiştir. firebase.json
dosyasının diğer Firebase hizmetlerinin yapılandırmaları da içerebileceğini unutmayın.
{
"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",
}
}