Hosting davranışını yapılandırma

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?

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:

  1. /__/* yol segmentiyle başlayan ayrılmış ad alanları
  2. Yapılandırılmış yönlendirmeler
  3. Statik içerikle tam eşleme
  4. Yapılandırılmış yeniden yazmalar
  5. Özel 404 sayfası
  6. 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

  • "Kalıcı Olarak Taşındı" için bir 301 türü kullanın
  • "Bulunamadı" için bir 302 türü kullanın (Geçici Yönlendirme)

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 ve PROJECT_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 ve PROJECT_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ş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

AUTO olarak ayarlanmalıdır

  • Bu özelliği yapılandırmanıza dahil etmezseniz appAssociation için varsayılan değer AUTO olur.
  • Bu özelliğin AUTO olarak ayarlanmasıyla, Hosting istendiğinde assetlinks.json ve apple-app-site-association dosyalarını dinamik olarak oluşturabilir.
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 source veya regex değeriniz olarak 404.html kullanın.

(sub-)headers dizisi

Hosting'in istek yoluna uyguladığı özel üstbilgiler

Her alt başlık bir key ve value çifti içermelidir (sonraki iki satırı inceleyin).

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ızca public dizininin kökündeki firebase.json dosyasıyla eşleşir

  • **: Rastgele bir alt dizindeki herhangi bir dosya veya klasörle eşleşir.

  • *: Yalnızca public 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 de public 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",

  }
}