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

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 dizininizde Firebase Hosting'ye dağıtmak istediğiniz dosyaları belirtin. Nasıl yapacağınızı öğrenin.

• Özelleştirilmiş bir 404/Bulunamadı sayfası sunun. Nasıl yapacağınızı öğrenin.

• Taşınmış veya silinmiş sayfalar için redirects ayarlayın. Nasıl yapacağınızı öğrenin.

• rewrites'ü aşağıdaki amaçlardan herhangi biri için ayarlayın:

  • Birden fazla URL için aynı içeriği gösterin. Nasıl yapılacağını öğrenin.

  • Bir işlevi yayınlama veya Hosting URL'sinden Cloud Run kapsayıcıya erişim İşlev veya kapsayıcı hakkında bilgi edinin.

  • Özel alan oluşturun Dynamic Link. Nasıl yapacağınızı öğrenin.

• Tarayıcıların sayfayı ve içeriğini nasıl işleyeceğ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 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 yapacağınızı öğrenin (farklı 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ünde otomatik olarak oluşturur.

Bu sayfanın en altında, tam firebase.json yapılandırma örneği (yalnızca Firebase Hosting'ı kapsar) bulabilirsiniz. firebase.json dosyalarının diğer Firebase hizmetlerinin yapılandırmalarını da içerebileceğini unutmayın.

Hosting REST API'yi kullanarak dağıtılan firebase.json içeriğini 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 varsa Hosting, yanıtını aşağıdaki öncelik sırasını kullanarak belirler:

1. /__/* yol segmentiyle başlayan ayrılmış ad alanları
2. Yapılandırılmış yönlendirmeler
3. Tam eşleşmeli statik içerik
4. Yapılandırılmış yeniden yazmalar
5. Özel 404 sayfası
6. Varsayılan 404 sayfası

i18n yeniden yazma özelliğini kullanıyorsanız tam eşleme ve 404 işleme öncelik sırası, "i18n içeriğinizi" içerecek şekilde kapsam olarak genişletilir.

Dağıtılacak dosyaları belirtme

Varsayılan firebase.json dosyasına dahil edilen 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 şekildedir:

"hosting": {
  "public": "public",  // the only required attribute for Hosting
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

herkese açık

Zorunlu
public özelliği, Firebase Hosting dizinine 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.

Yayınlanacak dizinin varsayılan olarak belirtilen adı aşağıda 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. Git'in .gitignore ile aynı şekilde glob alabilmesi

Yoksayılacak dosyaların varsayılan değerleri ş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ştirme

İsteğe bağlı
Kullanıcı var olmayan bir sayfaya erişmeye çalıştığında özel bir 404 Not Found hatası yayınlayabilirsiniz.

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ı 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 dizi nesne içeren bir redirects özelliği ("yönlendirme kuralları" olarak adlandırılır) oluşturarak URL yönlendirmelerini belirtin. Her kuralda, istek URL'si yoluyla eşleşirse Hosting'yi, belirtilen hedef URL'ye yönlendirmeyle yanıt verecek şekilde tetikleyen bir URL kalıbı belirtin.

redirects özelliğinin temel yapısı aşağıda verilmiştir. Bu örnekte, /bar adresine yeni bir istek göndererek istekler /foo adresine yönlendirilmektedir.

"hosting": {
  // ...

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

"hosting": {
  // ...

  // Add the "redirects" attribute within "hosting"
  "redirects": [ {
    // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  }, {
    // Returns a permanent redirect to "/bar" for requests to both "/foo" and "/foo/**"
    "source": "/foo{,/**}"
    "destination": "/bar"
    "type": 301
  }, {
    // Returns a temporary redirect for all requests to files or directories in the "firebase" directory
    "source": "/firebase/**",
    "destination": "https://firebase.google.com/",
    "type": 302
  }, {
    // A regular expression-based redirect equivalent to the above behavior
    "regex": "/firebase/.*",
    "destination": "https://firebase.google.com/",
    "type": 302
  } ]
}

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

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

Yönlendirmeler için URL segmentlerini yakalama

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

"hosting": {
  // ...

  "redirects": [ {
    "source": "/blog/:post*",  // captures the entire URL segment beginning at "post"
    "destination": "https://blog.myapp.com/:post", // includes the entire URL segment identified and captured by the "source" value
    "type": 301
  }, {
    "source": "/users/:id/profile",  // captures only the URL segment "id", but nothing following
    "destination": "/users/:id/newProfile",  // includes the URL segment identified and captured by the "source" value
    "type": 301
  } ]
}

"hosting": {
  // ...

  "redirects": [ {
    "regex": "/blog/(?P<post>.+)",  // if you're familiar with PCRE, be aware that RE2 requires named capture groups to begin with ?P
    "destination": "https://blog.myapp.com/:post",  // includes the entire URL segment identified and captured by the `regex` value
    "type": 301
  }, {
    "regex": "/users/(\d+)/profile",  // uses the \d directive to only match numerical path segments
    "destination": "/users/:1/newProfile",  // the first capture group to be seen in the `regex` value is named 1, and so on
    "type": 301
  } ]
}

Yeniden yazmaları yapılandırma

İsteğe bağlı
Birden fazla URL için aynı içeriği göstermek üzere yeniden yazma özelliğini kullanın. Kalıpla eşleşen tüm URL'leri kabul edip neyin gösterileceğine istemci tarafı kodunun karar vermesine izin verebildiğiniz için yeniden yazma özelliği özellikle kalıp eşleştirmede kullanışlıdır.

Navigasyon için HTML5 pushState kullanan uygulamaları desteklemek amacıyla da yeniden yazma özelliğini 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 bunun yerine destination URL'sindeki dosyanın içeriği verilir.

Bir nesne dizisi ("yeniden yazma kuralları" olarak adlandırılır) içeren bir rewrites özelliği oluşturarak URL yeniden yazmalarını belirtin. Her kuralda, istek URL yolu ile eşleşirse Hosting'ü, hizmete belirtilen hedef URL verilmiş gibi yanıt vermesi için tetikleyen bir URL kalıbı belirtin.

rewrites özelliğinin temel yapısı aşağıda verilmiştir. Bu örnekte, var olmayan dosya veya dizinlere yönelik istekler için index.html sunuluyor.

"hosting": {
  // ...

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

"hosting": {
// ...

// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
  // Serves index.html for requests to files or directories that do not exist
  "source": "**",
  "destination": "/index.html"
}, {
  // Serves index.html for requests to both "/foo" and "/foo/**"
  // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
  "source": "/foo{,/**}",
  "destination": "/index.html"
}, {
  // A regular expression-based rewrite equivalent to the above behavior
  "regex": "/foo(/.*)?",
  "destination": "/index.html"
}, {
  // Excludes specified pathways from rewrites
  "source": "!/@(js|css)/**",
  "destination": "/index.html"
} ]
}

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

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

İşlevlere doğrudan istek gönderme

Bir işlevi Firebase Hosting URL'sinden yayınlamak için rewrites'ü kullanabilirsiniz. Aşağıdaki örnek, Cloud Functions kullanarak dinamik içerik yayınlama bölümünden bir alıntıdır.

Örneğin, Hosting sitenizdeki /bigben sayfasından gelen tüm istekleri bigben işlevini yürütecek şekilde 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) sonra işlevinize aşağıdaki URL'ler üzerinden 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

İstekleri Hosting içeren işlevlere yönlendirirken desteklenen HTTP istek yöntemleri GET, POST, HEAD, PUT, DELETE, PATCH ve OPTIONS'tır. REPORT veya PROFIND gibi diğer yöntemler desteklenmez.

İstekleri bir Cloud Run kapsayıcısına yönlendirme

Firebase Hosting URL'sinden Cloud Run kapsayıcıya erişmek için rewrites'ü kullanabilirsiniz. Aşağıdaki örnek, Cloud Run kullanarak dinamik içerik yayınlama ile ilgili bir alıntıdır.

Örneğin, Hosting sitenizdeki /helloworld sayfasından gelen tüm isteklerini bir helloworld kapsayıcı örneğinin başlatılmasını ve çalışmasını tetikleyecek şekilde 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) sonra kapsayıcı resminize aşağıdaki URL'ler üzerinden 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

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

En iyi performans için Cloud Run hizmetinizi aşağıdaki bölgeleri kullanarak Hosting ile birlikte barındırın:

• us-west1
• us-central1
• us-east1
• europe-west1
• asia-east1

Hosting'dan Cloud Run'e 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 oluşturma Dynamic Links

Dynamic Links özel alanını oluşturmak için rewrites'ü kullanabilirsiniz. Dynamic Links için özel alan oluşturma hakkında ayrıntılı bilgi edinmek üzere Dynamic Links dokümanlarını ziyaret edin.

• Özel alanınızı yalnızca Dynamic Links 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 ön eklerinin belirtilmesi

  "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 yapılandırması için aşağıdakiler gerekir:

Üstbilgileri yapılandırma

İsteğe bağlı
Başlıklar, istemcinin ve sunucunun bir istek veya yanıtla birlikte ek bilgi iletmesine olanak tanır. Bazı üstbilgi grupları, tarayıcının sayfayı ve içeriğini işleme şeklini (erişim denetimi, kimlik doğrulama, önbelleğe alma ve kodlama dahil) etkileyebilir.

Bir başlık nesnesi dizisi içeren bir headers özelliği oluşturarak dosyaya özel özel yanıt başlıkları belirtin. Her nesnede, istek URL yolu ile eşleşirse belirtilen özel yanıt üstbilgilerini uygulamak için Hosting'ü tetikleyen bir URL kalıbı belirtin.

headers özelliğinin temel yapısı aşağıda verilmiştir. Bu örnekte, tüm yazı tipi dosyaları için bir CORS başlığı uygulanmaktadı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": "*"
    } ]
  } ]
}

"hosting": {
  // ...

  // Add the "headers" attribute within "hosting"
  "headers": [ {
    // Applies a CORS header for all font files
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "Access-Control-Allow-Origin",
      "value": "*"
    } ]
  }, {
    // Overrides the default 1 hour browser cache with a 2 hour cache for all image files
    "source": "**/*.@(jpg|jpeg|gif|png)",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=7200"
    } ]
  }, {
    // A regular expression-based rewrite equivalent to the above behavior
    "regex": ".+/\w+\.(jpg|jpeg|gif|png)$",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=7200"
    } ]
  }, {
    // Sets the cache header for 404 pages to cache for 5 minutes
    "source": "404.html",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=300"
    } ]
  } ]
}

headers özelliği, her tanımın aşağıdaki tablodaki alanları içermesi gereken bir dizi tanım içerir.

Dinamik içerik yayınlama ve mikro hizmet barındırma hakkında bilgi veren Hosting bölümünde Cache-Control hakkında daha fazla bilgi edinebilirsiniz. CORS üstbilgileri hakkında da daha fazla bilgi edinebilirsiniz.

.html uzantılarını kontrol etme

İ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, yüklenen dosya URL'lerinden .html uzantısını otomatik olarak kaldırır. İsteğe bir .html uzantısı eklenirse Hosting, aynı yola 301 yönlendirme yapar ancak .html uzantısını kaldırır.

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

"hosting": {
  // ...

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

Sonundaki eğik çizgileri kontrol etme

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

• true olduğunda Hosting, URL'leri yönlendirerek sonuna eğik çizgi ekler.
• false olduğunda Hosting, son eğik çizgiyi kaldırmak için URL'leri yönlendirir.
• Belirtilmezse Hosting yalnızca dizin dizini dosyaları için son eğik çizgi kullanır (örneğin, about/index.html).

trailingSlash özelliği ekleyerek son 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çerik için yeniden yazma işlemlerini etkilemez.

Glob kalıp eşleştirme

Firebase Hosting yapılandırma seçenekleri, Git'in gitignore kurallarını ve Bower'ın ignore kurallarını işleyiş şekline benzer şekilde, extglob ile glob kalıp eşleştirme notasyonunu yoğun şekilde kullanı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 dizininin kökündeki firebase.json dosyasıyla eşleşir.

• **: Belirli bir alt dizindeki tüm dosya veya klasörlerle eşleşir.

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

• **/.*: İsteğe bağlı bir alt dizinde . ile başlayan tüm dosyaları (genellikle .git klasöründeki gibi gizli dosyalar) eşleştirir.

• **/node_modules/**: node_modules klasörünün herhangi bir alt dizinindeki tüm dosya veya klasörlerle eşleşir. node_modules klasörü de public dizininin herhangi bir alt dizininde olabilir.

• **/*.@(jpg|jpeg|gif|png): Rastgele bir alt dizinde, şu değerlerden biriyle biten tüm dosyaları eşleştirir: .jpg, .jpeg, .gif veya .png

Tam Hosting yapılandırma örneği

Aşağıda, Firebase Hosting için tam bir firebase.json yapılandırma örneği verilmiştir. firebase.json dosyalarının diğer Firebase hizmetlerinin yapılandırmalarını 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",

  }
}