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?

• Yerel proje dizininizde Firebase Hosting'ya dağıtmak istediğiniz dosyaları belirtin. Nasıl yapılacağını öğrenin.

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

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

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

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

  • Bir işlevi kullanın veya Hosting URL'sinden Cloud Run kapsayıcısına erişin. Nasıl yapılacağını öğrenin: işlev veya kapsayıcı.

  • Özel alan oluşturma Dynamic Link. Nasıl yapılacağını öğrenin.

• Tarayıcıların sayfayı ve içeriğini nasıl ele alması 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 yapılacağını öğrenin.

• Kullanıcının dil tercihine ve/veya ülkesine göre belirli içerikler sunmak için uluslararasılaştırma (i18n) yeniden yazma işlemlerini 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, firebase init komutunu çalıştırdığınızda projenizin kök dizininde firebase.json dosyanızı otomatik olarak oluşturur.

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

Dağıtılan firebase.json içeriği 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. Tam eşleşen statik içerik
4. Yapılandırılmış yeniden yazma
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" barındıracak şekilde kapsamı genişletilir.

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

Varsayılan firebase.json dosyasında bulunan varsayılan özellikler (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ı ş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, hangi dizine dağıtım yapılacağını belirtir Firebase Hosting. Varsayılan değer public adlı bir dizindir ancak projenizdeki dizinlerde bulunduğu sürece herhangi bir dizinin yolunu belirtebilirsiniz.

Dağıtılacak dizinin varsayılan olarak belirtilen adı şöyledir:

"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ım sırasında yoksayılacak dosyaları belirtir. Git'in .gitignore'i ele aldığı şekilde globları ele alabilir.

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ı, mevcut olmayan bir sayfaya erişmeye çalıştığında özel bir 404 Not Found hatası gösterebilirsiniz.

Projenizin public dizininde yeni bir dosya oluşturun, dosyayı 404.html olarak adlandırın ve dosyaya özel 404 Not Found içeriğinizi ekleyin.

Firebase Hosting, bir tarayıcı alanınızda veya alt alan adınızda 404 Not Found hatası tetiklediğinde 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.

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'si yoluyla eşleşmesi durumunda Hosting'nın belirtilen hedef URL'ye yönlendirme yanıtı vermesini tetikleyen bir URL kalıbı belirtin.

redirects özelliğinin temel yapısı aşağıda verilmiştir. Bu örnek, /bar için yeni bir istek oluşturarak /foo isteklerini 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, yönlendirme kuralları dizisini içerir. Her kural, aşağıdaki tablodaki alanları içermelidir.

Firebase Hosting, her isteğin başında (tarayıcı, bu 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. Bir eşleşme bulunursa Firebase Hosting kaynak sunucusu, tarayıcıya destination URL'sinde yeni bir istekte bulunmasını söyleyen 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 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 çok URL için aynı içeriği göstermek üzere yeniden yazma kullanın. Yeniden yazma, kalıp eşleştirme ile özellikle yararlıdır. Kalıpla eşleşen tüm URL'leri kabul edebilir ve neyin gösterileceğine istemci tarafı kodun karar vermesini sağlayabilirsiniz.

Ayrıca, gezinme için HTML5 pushState kullanan uygulamaları desteklemek üzere yeniden yazma işlemlerini 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.

Nesne dizisi içeren bir rewrites özelliği oluşturarak URL yeniden yazma işlemlerini belirtin (nesne dizisine "yeniden yazma kuralları" adı verilir). Her kuralda, istek URL'si yoluyla eşleşmesi durumunda Hosting'nın hizmete belirtilen hedef URL verilmiş gibi yanıt vermesini tetikleyen bir URL kalıbı belirtin.

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

"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, yeniden yazma kurallarından oluşan bir dizi içerir. Her kural, aşağıdaki tablodaki alanları içermelidir.

Firebase Hosting yalnızca bir dosya veya dizin, belirtilen source ya da regex URL kalıbıyla eşleşen bir URL yolunda yoksa yeniden yazma kuralı 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.

Doğrudan bir işleve yapılan istekler

rewrites kullanarak Firebase Hosting URL'sinden bir işlev sunabilirsiniz. Aşağıdaki örnek, Cloud Functions kullanarak dinamik içerik sunma başlıklı makaleden alınmıştı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 sonra (firebase deploy kullanarak) işlevinize aşağıdaki URL'ler üzerinden erişilebilir:

• Firebase alt alanları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 istek yöntemleri GET, POST, HEAD, PUT, DELETE, PATCH ve OPTIONS'dür. REPORT veya PROFIND gibi diğer yöntemler desteklenmez.

Cloud Run kapsayıcısına doğrudan istek gönderme

rewrites URL'sinden Firebase Hosting kapsayıcısına erişmek için rewrites kullanabilirsiniz.Cloud Run Aşağıdaki örnek, Cloud Run kullanarak dinamik içerik sunma başlıklı makaleden alınmıştır.

Örneğin, /helloworld sayfasından gelen tüm istekleri Hosting sitenizde bir helloworld kapsayıcı örneğinin başlatılmasını ve çalıştırılması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 sonra (firebase deploy kullanarak) kapsayıcı görüntünüze aşağıdaki URL'ler üzerinden erişilebilir:

• Firebase alt alanları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 desteklenen HTTP istek yöntemleri GET, POST, HEAD, PUT, DELETE, PATCH ve OPTIONS'dır. 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 konumlandırın:

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

Hosting dilinden Cloud Run diline yeniden yazma 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

rewrites kullanarak özel alan Dynamic Links oluşturabilirsiniz. Dynamic Links Dynamic Links için özel alan adı ayarlama hakkında ayrıntılı bilgi edinmek için dokümanları inceleyin.

• Özel alanınızı Dynamic Links için yalnızca kullanma

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

Dynamic Links öğesini firebase.json dosyanızda yapılandırmak 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 kümeleri, erişim kontrolü, kimlik doğrulama, önbelleğe alma ve kodlama dahil olmak üzere tarayıcının sayfayı ve içeriğini nasıl işlediğini 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'si yoluyla eşleşirse Hosting'nın belirtilen özel yanıt başlıklarını uygulamasına neden olacak bir URL kalıbı belirtin.

headers özelliğinin temel yapısı aşağıda verilmiştir. 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": "*"
    } ]
  } ]
}

"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, tanımlar dizisini içerir. Her tanım, aşağıdaki tablodaki alanları içermelidir.

Cache-Control hakkında daha fazla bilgiyi dinamik içerik sunma ve mikro hizmetleri barındırma işlemlerini açıklayan Hosting bölümünde bulabilirsiniz. Ayrıca CORS üstbilgileri hakkında 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, Hosting yüklenen dosya URL'lerinden .html uzantısını otomatik olarak kaldırır. İsteğe .html uzantısı eklenirse Hosting, aynı yola 301 yönlendirmesi yapar ancak .html uzantısını kaldırır.

Aşağıda, .html özelliğini ekleyerek URL'lere cleanUrls karakterinin dahil edilmesini nasıl kontrol edeceğiniz açıklanmaktadır:

"hosting": {
  // ...

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

Sondaki eğik çizgileri kontrol etme

İsteğe bağlı
trailingSlash özelliği, statik içerik URL'lerinin sonunda eğik çizgi olup olmayacağını kontrol etmenizi sağlar.

• true, Hosting URL'leri yönlendirerek URL'lere sondaki eğik çizgiyi ekler.
• false, Hosting yönlendirmeleri, URL'lerin sonundaki eğik çizgiyi kaldırır.
• Belirtilmediğinde Hosting yalnızca dizin dizini dosyaları için 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çerikteki yeniden yazma işlemlerini etkilemez.

Glob kalıp eşleştirme

Firebase Hosting yapılandırma seçeneklerinde, Git'in gitignore kurallarını ve Bower'ın ignore kurallarını ele alma şekline benzer şekilde, extglob ile glob pattern matching (glob deseni eşleştirme) gösterimi yoğun olarak kullanılır. Bu wiki sayfası daha ayrıntılı bir referanstır ancak aşağıda bu sayfada kullanılan örneklerin açıklamaları 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ündeki dosya ve klasörlerle eşleşir.

• **/.*: Rastgele bir alt dizinde . ile başlayan herhangi bir dosyayla (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 klasör de public dizininin rastgele bir alt dizininde olabilir.

• **/*.@(jpg|jpeg|gif|png): Rastgele bir alt dizinde, tam olarak şu karakterlerden biriyle biten tüm dosyalarla eşleşir: .jpg, .jpeg, .gif veya .png

Tam Hosting yapılandırma örneği

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

  }
}