Firebase Hosting ile sitenize yapılan istekler için özelleştirilmiş barındırma davranışı yapılandırabilirsiniz.
Hosting için neleri yapılandırabilirsiniz?
Yerel proje dizininizde hangi dosyaları Firebase Hosting'e dağıtmak istediğinizi belirtin. Bunu nasıl yapacağınızı öğrenin.
Özelleştirilmiş bir 404/Bulunamadı sayfası sunun. Bunu nasıl yapacağınızı öğrenin.
Taşıdığınız veya sildiğiniz sayfalar için
redirects
özelliğini ayarlayın. Bunu nasıl yapacağınızı öğrenin.rewrites
kurulumunu şu amaçlardan herhangi biri için yapabilirsiniz:Aynı içeriği birden fazla URL için gösterin. Nasıl yapacağınızı öğrenin.
Hosting URL'sinden işlev sunun veya Cloud Run kapsayıcısına erişin. Nasıl yapılacağını öğrenin: işlev veya kapsayıcı.
Özel alan adı Dinamik Bağlantısı oluşturun. Bunu nasıl yapacağınızı öğrenin.
Bir istek veya yanıt hakkında, tarayıcıların sayfayı nasıl işlemesi gerektiği ve içeriği (kimlik doğrulama, önbelleğe alma, kodlama vb.) gibi ek bilgileri iletmek için
headers
ekleyin. Bunu nasıl yapacağınızı öğrenin.Kullanıcının dil tercihine ve/veya ülkesine göre belirli içeriği sunmak için uluslararasılaştırma (i18n) yeniden yazma işlemlerini 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, proje dizininizin kökünde otomatik olarak firebase.json
dosyanızı oluşturur.
Bu sayfanın alt kısmında tam firebase.json
yapılandırma örneğini (yalnızca Firebase Hosting'i kapsayan) bulabilirsiniz. Bir firebase.json
dosyasının diğer Firebase hizmetlerine yönelik 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. Çakışma olması durumunda Hosting, yanıtını aşağıdaki öncelik sırasına göre belirler:
/__/*
yol segmentiyle başlayan ayrılmış ad alanları- Yapılandırılmış yönlendirmeler
- Statik içerikle tam eşleme
- Yapılandırılmış yeniden yazmalar
- Özel 404 sayfası
- Varsayılan 404 sayfası
i18n yeniden yazma işlemlerini kullanıyorsanız tam eşleşme ve 404 işleme önceliği sıralaması, "i18n içeriğinizi" kapsayacak şekilde kapsam genişletilir.
Dağıtılacak dosyaları belirtin
Varsayılan firebase.json
dosyasında yer alan varsayılan özellikler (public
ve ignore
), proje dizininizdeki hangi dosyaların Firebase projenize dağıtılması gerektiğini tanımlar.
firebase.json
dosyasındaki varsayılan hosting
yapılandırması şu şekilde 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 dizinin belirtilen varsayılan adı verilmiştir:
"hosting": {
"public": "public"
// ...
}
Varsayılan değeri, dağıtmak istediğiniz dizin olarak 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
ile aynı şekilde alabilir.
Aşağıda, dosyalar için yoksayılacak 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ı
Kullanıcı mevcut olmayan bir sayfaya erişmeye çalıştığında özel 404 Not Found
hatası sunabilirsiniz.
Projenizin public
dizininde yeni bir dosya oluşturun, dosyayı 404.html
olarak adlandırın ve ardından özel 404 Not Found
içeriğinizi dosyaya ekleyin.
Bir tarayıcı, alan adınızda veya alt alan adı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 bozuk 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ştirilmesi durumunda, belirtilen hedef URL'ye yönlendirme ile yanıt vermesi için Hosting'i tetikleyen bir URL kalıbı belirtin.
Bir redirects
özelliğinin temel yapısını burada görebilirsiniz. Bu örnekte, /bar
adresine yeni bir istekte bulunarak istekler /foo
adresine yönlendirilir.
"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 (tarayıcı, söz konusu yolda bir dosya veya klasörün olup olmadığını belirlemeden önce) source
ya da regex
değerini tüm URL yollarıyla karşılaştırır. Eşleşme bulunursa Firebase Hosting kaynak sunucusu, tarayıcının destination
URL'sinde 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şmesi durumunda, yönlendirmeyi uygulamak için Hosting'i tetikleyen 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 yakalayıp bu segmentleri kuralın destination
yolunda yeniden kullanmanız gerekebilir.
Yeniden yazmaları yapılandır
İsteğe bağlı
Birden çok URL'de aynı içeriği göstermek için yeniden yazma özelliğini kullanın. Kalıpla eşleşen herhangi bir URL'yi kabul edebileceğiniz ve neyin gösterileceğine istemci taraflı kod karar vereceği için yeniden yazmalar özellikle kalıp eşleştirmede kullanışlıdır.
Gezinme için HTML5 pushState kullanan uygulamaları desteklemek için yeniden yazma özelliğini de kullanabilirsiniz. Tarayıcı, belirtilen source
veya regex
URL kalıbıyla eşleşen bir URL yolunu açmaya çalıştığında, dosyanın içerikleri bunun yerine destination
URL'sinde tarayıcıya verilir.
Bir nesne dizisi ("yeniden yazma kuralları") içeren bir rewrites
özelliği oluşturarak yeniden yazma URL'lerini belirtin. Her kuralda, istek URL yoluyla eşleştirilmesi durumunda Hosting'i, hizmete belirtilen hedef URL verilmiş gibi yanıt vermesi için tetikleyen bir URL kalıbı belirtin.
Bir rewrites
özelliğinin temel yapısını burada görebilirsiniz. Bu örnek, mevcut olmayan dosyalara veya dizinlere yönelik istekler için index.html
yayınlanır.
"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, yeniden yazma kuralını yalnızca bir dosya veya dizin, belirtilen source
veya regex
URL kalıbıyla eşleşen URL yolunda mevcut değilse 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şmesi durumunda, yeniden yazma işlemini uygulamak için Hosting'i tetikleyen URL kalıbı
|
|
destination |
Var olması gereken yerel bir dosya Bu URL göreli veya mutlak bir yol olabilir. |
İşleve doğrudan istekler
Firebase Barındırma URL'sinden işlev sunmak için rewrites
kullanabilirsiniz. Aşağıdaki örnek, Cloud Functions'ı kullanarak dinamik içerik sunma konulu bir alıntıdır.
Örneğin, barındırma sitenizde /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ı ekleyip Firebase'e dağıttıktan (firebase deploy
kullanarak) işlevinize aşağıdaki URL'ler aracılığıyla erişilebilir:
Firebase alt alan adlarınız:
PROJECT_ID.web.app/bigben
vePROJECT_ID.firebaseapp.com/bigben
Bağlı tüm özel alanlar:
CUSTOM_DOMAIN/bigben
İstekler, Hosting ile işlevlere yönlendirilirken desteklenen HTTP isteği yöntemleri şunlardır: GET
, POST
, HEAD
, PUT
, DELETE
, PATCH
ve OPTIONS
.
REPORT
veya PROFIND
gibi diğer yöntemler desteklenmez.
Cloud Run container'ına doğrudan istek gönderme
Firebase Hosting URL'sinden bir Cloud Run kapsayıcısına erişmek için rewrites
kullanabilirsiniz. Aşağıdaki örnek, Cloud Run kullanarak dinamik içerik sunma konulu bir alıntıdır.
Örneğin, Barındırma sitenizde /helloworld
sayfasından gelen tüm istekleri helloworld
kapsayıcı ö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ı ekleyip Firebase'e dağıttıktan (firebase deploy
kullanarak) kapsayıcı görüntünüze aşağıdaki URL'ler aracılığıyla erişilebilir:
Firebase alt alan adlarınız:
PROJECT_ID.web.app/helloworld
vePROJECT_ID.firebaseapp.com/helloworld
Bağlı tüm özel alanlar:
CUSTOM_DOMAIN/helloworld
İstekler, Hosting ile Cloud Run kapsayıcılarına yönlendirilirken GET
, POST
, HEAD
, PUT
, DELETE
, PATCH
ve OPTIONS
HTTP isteği yöntemleri desteklenir. REPORT
veya PROFIND
gibi diğer yöntemler desteklenmez.
En iyi performans için aşağıdaki bölgeleri kullanarak Cloud Run hizmetinizi Hosting ile birlikte kullanın:
us-west1
us-central1
us-east1
europe-west1
asia-east1
Hosting'den Cloud Run'a 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 adı Dinamik Bağlantıları oluşturmak için rewrites
kullanabilirsiniz. Dinamik Bağlantılar için özel alan adı ayarlama hakkında ayrıntılı bilgi için Dynamic Links belgelerini ziyaret edin.
Ö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 adı 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 Dynamic Links'i yapılandırabilmek için aşağıdakiler gerekir:
Alan | Açıklama | |
---|---|---|
appAssociation |
|
|
rewrites |
||
source |
Dynamic Links için kullanmak istediğiniz bir yol Yolları URL'lere yeniden yazan kuralların aksine, Dynamic Links için yeniden yazma kuralları normal ifadeler içeremez. |
|
dynamicLinks |
true olarak ayarlanmalıdır
|
Üstbilgileri yapılandırma
İsteğe bağlı
Başlıklar, 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ğini işleme şeklini (erişim denetimi, kimlik doğrulama, önbelleğe alma ve kodlama gibi) etkileyebilir.
Başlık nesneleri dizisi içeren bir headers
özelliği oluşturarak özel, dosyaya özgü yanıt başlıkları belirtin. Her nesnede, istek URL yoluyla eşleştirilmesi durumunda, belirtilen özel yanıt başlıklarını uygulamak için Hosting'i tetikleyen bir URL kalıbı belirtin.
Bir headers
özelliğinin temel yapısını burada görebilirsiniz. Bu örnekte, tüm yazı tipi dosyalarına 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 yer alan alanları içermesi gereken bir tanım dizisi içerir.
Alan | Açıklama | ||
---|---|---|---|
headers |
|||
source (önerilen) veya regex
|
İlk istek URL'siyle eşleşmesi durumunda, özel başlığı uygulamak için Hosting'i tetikleyen URL kalıbı
Özel 404 sayfanızla eşleşecek bir başlık oluşturmak için |
||
(sub-)headers dizisi |
Hosting'in istek yoluna uyguladığı özel üstbilgiler 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ırmanın açıklandığı 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ısını kontrol et
İsteğe bağlı
cleanUrls
özelliği, URL'lerin .html
uzantısını içerip içermediğini kontrol etmenize olanak tanır.
true
olduğunda, Hosting, .html
uzantısını yüklenen dosya URL'lerinden otomatik olarak bırakır. İsteğe .html
uzantısı eklenirse Hosting, aynı yola 301
yönlendirmesi gerçekleştirir ancak .html
uzantısını kaldırır.
cleanUrls
özelliği ekleyerek URL'lere .html
dahil edilmesinin nasıl kontrol edileceği aşağıda 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 sonlarında eğik çizgi içerip içermediğini kontrol etmenize olanak tanır.
true
olduğunda Hosting, URL'leri sonuna eğik çizgi ekleyerek yönlendirir.false
olduğunda Hosting, URL'leri sondaki eğik çizgiyi kaldırmak için yönlendirir.- Belirtilmediğinde Hosting, dizin dizini dosyaları için yalnızca sondaki eğik çizgileri kullanır (örneğin,
about/index.html
).
trailingSlash
özelliği ekleyerek sondaki eğik çizgileri 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çeriğin yeniden yazılmasını etkilemez.
Yerküre kalıbı eşleştirme
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 dizininde bulunan dosya ve klasörleri eşleştirir**/.*
— Rastgele bir alt dizinde.
ile başlayan tüm dosyalarla (genellikle.git
klasöründeki gibi gizli dosyalar) 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 dizinler depublic
dizininin rastgele bir alt dizininde yer alabilir.**/*.@(jpg|jpeg|gif|png)
— Rastgele bir alt dizinde bulunan ve tam olarak şunlardan biriyle biten herhangi bir dosyayla eşleşir:.jpg
,.jpeg
,.gif
veya.png
Tam Barındırma yapılandırma örneği
Aşağıda, Firebase Hosting için tam bir firebase.json
yapılandırma örneği verilmiştir. Bir firebase.json
dosyasının diğer Firebase hizmetlerine yönelik 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",
}
}