Check out what’s new from Firebase at Google I/O 2022. Learn more

Barındırma davranışını yapılandırın

Firebase Hosting ile sitenize gelen istekler için özelleştirilmiş barındırma davranışını yapılandırabilirsiniz.

Barındırma için ne yapılandırabilirsiniz?

  • Yerel proje dizininizdeki hangi dosyaları Firebase Hosting'e dağıtmak istediğinizi belirtin. Nasıl öğrenilir.

  • Özelleştirilmiş bir 404/Bulunamadı sayfası sunun. Nasıl öğrenilir.

  • Taşıdığınız veya sildiğiniz sayfalar için redirects ayarlayın. Nasıl öğrenilir.

  • Bu amaçlardan herhangi biri için rewrites :

    • Birden çok URL için aynı içeriği göster. Nasıl öğrenilir.

    • Barındırma URL'sinden bir işlev sunun veya bir Cloud Run kapsayıcısına erişin. Nasıl yapılacağını öğrenin: işlev veya kapsayıcı .

    • Özel bir etki alanı Dinamik Bağlantısı oluşturun. Nasıl öğrenilir.

  • Tarayıcıların sayfayı ve içeriğini nasıl işlemesi gerektiği (kimlik doğrulama, önbelleğe alma, kodlama vb.) gibi bir istek veya yanıtla ilgili ek bilgileri iletmek için headers ekleyin. Nasıl öğrenilir.

  • Bir kullanıcının dil tercihine ve/veya ülkesine göre belirli içeriği sunmak için uluslararasılaştırma (i18n) yeniden yazmalarını ayarlayın. Nasıl yapılacağını öğrenin (farklı sayfa).

Barındırma yapılandırmanızı nerede tanımlarsınız?

Firebase Barındırma 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 firebase.json dosyanızı otomatik olarak oluşturur.

Tam bir firebase.json yapılandırma örneğini (yalnızca Firebase Hosting'i kapsar) bu sayfanın altında bulabilirsiniz. Bir firebase.json dosyasının diğer Firebase hizmetleri için yapılandırmaları da içerebileceğini unutmayın.

Barındırma REST API'sini kullanarak dağıtılan firebase.json içeriğini kontrol edebilirsiniz.

Barındırma yanıtlarının öncelik sırası

Bu sayfada açıklanan farklı Firebase Barındırma yapılandırma seçenekleri bazen çakışabilir. Bir çakışma varsa, Hosting aşağıdaki öncelik sırasını kullanarak yanıtını belirler:

  1. /__/* yol kesimi ile başlayan ayrılmış ad alanları
  2. Yapılandırılmış yönlendirmeler
  3. Tam eşleşen statik içerik
  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 öncelik sırası, "i18n içeriğinize" uyum sağlamak için kapsam olarak genişletilir.

Hangi dosyaların dağıtılacağını belirtin

Varsayılan firebase.json dosyasına dahil edilen varsayılan öznitelikler ( public ve ignore ), 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/**"
  ]
}

halka açık

Gerekli
public özelliği, Firebase Hosting'e hangi dizinin dağıtılacağını belirtir. Varsayılan değer public adlı bir dizindir, ancak proje dizininizde olduğu sürece herhangi bir dizinin yolunu belirtebilirsiniz.

Dağıtılacak dizinin varsayılan belirtilen adı aşağıdadır:

"hosting": {
  "public": "public"

  // ...
}

Dağıtmak istediğiniz dizine varsayılan değeri değiştirebilirsiniz:

"hosting": {
  "public": "dist/app"

  // ...
}

göz ardı etmek

İsteğe bağlı
ignore özelliği, dağıtımda yoksayılacak dosyaları belirtir. Git'in .gitignore'u işlediği şekilde .gitignore .

Dosyaların yoksayılması gereken varsayılan değerler şunlardır:

"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ştirin

İ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, onu 404.html olarak adlandırın, ardından özel 404 Not Found içeriğinizi dosyaya ekleyin.

Bir tarayıcı etki alanınızda veya alt etki alanınızda bir 404 Not Found hatasını tetiklerse, Firebase Hosting bu özel 404.html sayfasının içeriğini görüntüler.

Yönlendirmeleri yapılandır

İsteğe bağlı
Bir sayfayı taşıdıysanız veya URL'leri kısaltmak için kopuk bağlantıları önlemek için bir URL yönlendirmesi kullanın. Örneğin, bir tarayıcıyı example.com/about.html example.com/team yönlendirebilirsiniz.

Bir dizi nesne ("yönlendirme kuralları" olarak adlandırılır) içeren bir redirects özniteliği oluşturarak URL yönlendirmelerini belirtin. Her kuralda, istek URL yolu ile eşleştirilirse Barındırma'yı belirtilen hedef URL'ye bir yönlendirmeyle yanıt vermesi için tetikleyen bir URL kalıbı belirtin.

redirects özniteliği için temel yapı buradadır. Bu örnek, /bar öğesine yeni bir istek yaparak istekleri /foo yönlendirir.

"hosting": {
  // ...

  // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
  "redirects": [ {
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  } ]
}

redirects özniteliği, her kuralın aşağıdaki tablodaki alanları içermesi gereken bir dizi yönlendirme kuralı içerir.

Firebase Hosting, her isteğin başlangıcında (tarayıcı bu yolda bir dosya veya klasör olup olmadığını belirlemeden önce) source veya regex ifade değerini tüm URL yollarıyla karşılaştırır. Bir eşleşme bulunursa, Firebase Hosting kaynak sunucusu, tarayıcıya destination URL'de yeni bir istek yapmasını söyleyen bir HTTPS yönlendirme yanıtı gönderir.

Alan Açıklama
redirects
source (önerilir)
veya regex

İlk istek URL'si ile eşleştirilirse, yönlendirmeyi uygulamak için Hosting'i tetikleyen bir URL kalıbı

  • Bir küre belirtmek için source kullanın (önerilir) .
  • Bir RE2 normal ifadesi belirtmek için regex ifadeyi kullanın.
destination

Tarayıcının yeni bir istekte bulunması gereken statik bir 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
  • 'Bulunan' için bir 302 türü kullanın (Geçici Yönlendirme)

Yönlendirmeler için URL segmentlerini yakalayın

İsteğe bağlı
Bazen, bir yönlendirme kuralının URL modelinin ( source veya regex ifade değeri) belirli bölümlerini yakalamanız ve ardından bu bölümleri kuralın destination yolunda yeniden kullanmanız gerekebilir.

Yeniden yazmaları yapılandır

İsteğe bağlı
Birden çok URL için aynı içeriği göstermek için yeniden yazma kullanın. Kalıpla eşleşen herhangi bir URL'yi kabul edebileceğiniz ve neyin görüntüleneceğine istemci tarafı kodunun karar vermesine izin verebildiğiniz için, yeniden yazma işlemleri özellikle kalıp eşleştirmede kullanışlıdır.

Gezinme için HTML5 pushState kullanan uygulamaları desteklemek için yeniden yazmaları da kullanabilirsiniz. Bir tarayıcı, belirtilen source veya regex ifade URL modeliyle eşleşen bir URL yolu açmaya çalıştığında, tarayıcıya bunun yerine dosyanın içeriği destination URL'de verilir.

Bir dizi nesne ("yeniden yazma kuralları" olarak adlandırılır) içeren bir yeniden rewrites özelliği oluşturarak URL yeniden yazmalarını belirtin. Her kuralda, istek URL yolu ile eşleştirilirse Barındırma'yı hizmete belirtilen hedef URL verilmiş gibi yanıt vermesini tetikleyen bir URL kalıbı belirtin.

İşte bir rewrites özelliğinin temel yapısı. Bu örnek, var olmayan dosyalara veya dizinlere yapılan istekler için index.html sunar.

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

rewrites özniteliği, her kuralın aşağıdaki tablodaki alanları içermesi gereken bir dizi yeniden yazma kuralı içerir.

Firebase Hosting, yalnızca belirtilen source veya regex ifade URL modeliyle eşleşen bir URL yolunda bir dosya veya dizin yoksa yeniden yazma kuralı uygular. Bir istek bir yeniden yazma kuralını tetiklediğinde, tarayıcı bir HTTP yeniden yönlendirmesi yerine belirtilen destination dosyanın gerçek içeriğini döndürür.

Alan Açıklama
rewrites
source (önerilir)
veya regex

İlk istek URL'si ile eşleştirilirse, yeniden yazma işlemini uygulamak için Hosting'i tetikleyen bir URL kalıbı

  • Bir küre belirtmek için source kullanın (önerilir) .
  • Bir RE2 normal ifadesi belirtmek için regex ifadeyi kullanın.
destination

Var olması gereken yerel bir dosya

Bu URL, göreli veya mutlak bir yol olabilir.

Bir işleve doğrudan istekler

Bir Firebase Barındırma URL'sinden bir işlev sunmak için rewrites kullanabilirsiniz. Aşağıdaki örnek, Cloud Functions kullanılarak dinamik içerik sunumundan bir alıntıdır.

Örneğin Barındırma sitenizdeki /bigben sayfasından gelen tüm istekleri bigben işlevini yürütmeye yönlendirmek için:

"hosting": {
  // ...

  // Directs all requests from the page `/bigben` to execute the `bigben` function
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben"
  } ]
}

Bu yeniden yazma kuralını ekledikten ve firebase deploy kullanarak), işlevinize aşağıdaki URL'ler aracılığıyla erişilebilir:

  • Firebase alt alanlarınız:
    PROJECT_ID .web.app/bigben ve PROJECT_ID .firebaseapp.com/bigben

  • Bağlı herhangi bir özel alan :
    CUSTOM_DOMAIN /bigben

İstekleri Barındırma ile işlevlere yeniden yönlendirirken, desteklenen HTTP istek yöntemleri GET , POST , HEAD , PUT , DELETE , PATCH ve OPTIONS . REPORT veya PROFIND gibi diğer yöntemler desteklenmez.

Cloud Run kapsayıcısına doğrudan istekler

Firebase Barındırma 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 sunmaktan bir alıntıdır.

Örneğin, Hosting sitenizdeki /helloworld sayfasından gelen tüm istekleri bir helloworld kapsayıcı örneğinin başlatılmasını ve çalıştırılmasını tetiklemek için 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 deploy kullanarak), kapsayıcı resminize aşağıdaki URL'ler aracılığıyla erişilebilir:

  • Firebase alt alanlarınız:
    PROJECT_ID .web.app/helloworld ve PROJECT_ID .firebaseapp.com/helloworld

  • Bağlı herhangi bir özel alan :
    CUSTOM_DOMAIN /helloworld

İstekleri Hosting ile Cloud Run kapsayıcılarına yeniden yönlendirirken, desteklenen HTTP istek yöntemleri GET , POST , HEAD , PUT , DELETE , PATCH ve OPTIONS şeklindedir. REPORT veya PROFIND gibi diğer yöntemler desteklenmez.

Şu anda, Cloud Run yeniden yazma işlemlerini Barındırma ile aşağıdaki bölgelerde kullanabilirsiniz:

  • asia-east1
  • asia-east2
  • asia-northeast1
  • asia-northeast2
  • asia-northeast3
  • asia-south1
  • asia-southeast1
  • asia-southeast2
  • australia-southeast1
  • europe-north1
  • europe-west1
  • europe-west2
  • europe-west3
  • europe-west4
  • europe-west6
  • northamerica-northeast1
  • southamerica-east1
  • us-central1
  • us-east1
  • us-east4
  • us-west1

Özel etki alanı Dinamik Bağlantıları oluşturmak için rewrites kullanabilirsiniz. Dinamik Bağlantılar için özel bir etki alanı ayarlama hakkında ayrıntılı bilgi için Dinamik Bağlantılar 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
      } ]
    }
    
  • Dinamik Bağlantılar 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 aşağıdakiler gerekir:

Alan Açıklama
appAssociation

AUTO olarak ayarlanmalıdır

  • Bu özniteliği yapılandırmanıza dahil etmezseniz, appAssociation için varsayılan değer AUTO .
  • Bu özniteliği AUTO olarak ayarlayarak, Hosting istendiğinde dinamik olarak assetlinks.json ve apple-app-site-association dosyaları oluşturabilir.
rewrites
source

Dinamik Bağlantılar için kullanmak istediğiniz bir yol

URL'lere giden yolları yeniden yazan kuralların aksine, Dinamik Bağlantılar için yeniden yazma kuralları normal ifadeler içeremez.

dynamicLinks true olarak ayarlanmalıdır

Başlıkları yapılandır

İsteğe bağlı
Başlıklar, istemcinin ve sunucunun bir istek veya yanıtla birlikte ek bilgileri iletmesine izin verir. Erişim denetimi, kimlik doğrulama, önbelleğe alma ve kodlama dahil olmak üzere bazı başlık grupları, tarayıcının sayfayı ve içeriğini nasıl işleyeceğini etkileyebilir.

Bir dizi başlık nesnesi içeren bir headers özniteliği oluşturarak özel, dosyaya özgü yanıt üstbilgilerini belirtin. Her nesnede, istek URL yolu ile eşleştirilirse, belirtilen özel yanıt başlıklarını uygulamak için Barındırma'yı tetikleyen bir URL kalıbı belirtin.

Bir headers özniteliği için temel yapı buradadır. Bu örnek, tüm yazı tipi dosyaları için bir CORS başlığı uygular.

"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 tablodaki alanları içermesi gereken bir dizi tanım içerir.

Alan Açıklama
headers
source (önerilir)
veya regex

İlk istek URL'si ile eşleştirilirse, özel başlığı uygulamak için Hosting'i tetikleyen bir URL modeli

  • Bir küre belirtmek için source kullanın (önerilir) .
  • Bir RE2 normal ifadesi belirtmek için regex ifadeyi kullanın.

Özel 404 sayfanızla eşleşecek bir başlık oluşturmak için source veya regex ifade değeriniz olarak 404.html kullanın.

(alt) headers dizisi

Barındırma'nın istek yoluna uyguladığı özel başlıklar

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

key Başlığın adı, örneğin Cache-Control
value Başlık değeri, örneğin max-age=7200

Dinamik içerik sunma ve mikro hizmetleri 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ılarını kontrol edin

İsteğe bağlı
cleanUrls özelliği, URL'lerin .html uzantısını içerip içermemesi gerektiğini kontrol etmenize olanak tanır.

true olduğunda, Hosting yüklenen dosya URL'lerinden .html uzantısını otomatik olarak kaldırır. İstekte bir .html uzantısı eklenirse, Hosting aynı yola 301 yönlendirmesi gerçekleştirir ancak .html uzantısını ortadan kaldırır.

Bir cleanUrls özniteliği ekleyerek .html URL'lere dahil edilmesini nasıl kontrol edeceğiniz aşağıda açıklanmıştır:

"hosting": {
  // ...

  // Drops `.html` from uploaded URLs
  "cleanUrls": true
}

Sondaki eğik çizgileri kontrol edin

İsteğe bağlı
trailingSlash özelliği, statik içerik URL'lerinin sonunda eğik çizgi içerip içermediğini kontrol etmenize olanak tanır.

  • true olduğunda, Hosting, sonuna eğik çizgi eklemek için URL'leri yeniden yönlendirir.
  • false olduğunda, Hosting sondaki eğik çizgiyi kaldırmak için URL'leri yeniden yönlendirir.
  • Belirtilmediğinde, Hosting yalnızca dizin dizin dosyaları için sondaki eğik çizgileri kullanır (örneğin, about/index.html ).

Sondaki eğik çizgileri, bir 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çeriğe yeniden yazma işlemlerini etkilemez.

Küre desen eşleştirme

Firebase Barındırma yapılandırma seçenekleri, gitignore kurallarını ve Bower'ın ignore kurallarını işlemesine benzer şekilde, extglob ile glob desen eşleştirme gösteriminden kapsamlı bir şekilde yararlanır. Bu wiki sayfası daha ayrıntılı bir referanstır, ancak aşağıdakiler bu sayfada kullanılan örneklerin açıklamalarıdır:

  • firebase.json — Yalnızca public dizinin kökündeki firebase.json dosyasıyla eşleşir

  • ** - İsteğe bağlı bir alt dizindeki herhangi bir dosya veya klasörle eşleşir

  • * - Yalnızca public dizinin kökündeki dosya ve klasörlerle eşleşir

  • **/.* — İle başlayan herhangi bir dosyayla eşleşir . (genellikle .git klasöründeki gibi gizli dosyalar) keyfi bir alt dizinde

  • **/node_modules/** — Bir node_modules klasörünün rastgele bir alt dizinindeki herhangi bir dosya veya klasörle eşleşir; bu, kendisi de public dizinin rastgele bir alt dizininde olabilir

  • **/*.@(jpg|jpeg|gif|png) — Tam olarak aşağıdakilerden biriyle biten rastgele bir alt dizindeki 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 hizmetleri için 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",

  }
}