Hosting davranışını yapılandırın

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:

1. /__/* yol segmentiyle başlayan ayrılmış ad alanları
2. Yapılandırılmış yönlendirmeler
3. Tam eşlemeli statik içerik
4. Yapılandırılmış yeniden yazmalar
5. Custom 404 (Özel 404 sayfası)
6. 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
  } ]
}

"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 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.

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.

"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ı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"
  } ]
}

"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 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.

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

Ü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": "*"
    } ]
  } ]
}

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

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ı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 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",

  }
}