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

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

Barındırma için neleri 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.

• rewrites şu amaçlardan herhangi biri için ayarlayın:

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

  • Bir işlevi sunun veya bir Barındırma URL'sinden 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 (kimlik doğrulama, önbelleğe alma, kodlama vb.) nasıl işlemesi gerektiği 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 dayalı olarak belirli içeriği sunmak için uluslararasılaştırma (i18n) yeniden yazmalarını ayarlayın. Nasıl yapıldığı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, firebase.json dosyanızı proje dizininizin kökünde otomatik olarak oluşturur.

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

Dağıtılan firebase.json içeriğini Hosting REST API'sini kullanarak 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 segmenti ile 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. Ö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" barındırmak 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/**"
  ]
}

halk

Gerekli
public özniteliği, Firebase Hosting'e hangi dizinin dağıtılacağını belirtir. Varsayılan değer, public adlı bir dizindir, ancak proje dizininizde var 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örmezden gelmek

İsteğe bağlı
ignore özniteliği, konuşlandırma sırasında yok sayılacak dosyaları belirtir. Glob'ları Git'in .gitignore ele aldığı şekilde alabilir.

Dosyaların yok sayılması için 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ş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, 404.html olarak adlandırın 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örüntüler.

Yönlendirmeleri yapılandır

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

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

İşte bir redirects özniteliği için temel yapı. Bu örnek, istekleri /foo yeni bir istek yaparak /bar 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 tablodaki alanları içermesi gereken bir dizi yönlendirme kuralı içerir.

Firebase Hosting, her isteğin başlangıcında (tarayıcı o yolda bir dosya veya klasörün var olup olmadığını belirlemeden önce) source veya 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'de yeni bir istek yapmasını söyleyen bir HTTPS yönlendirme yanıtı gönderir.

Yönlendirmeler için URL segmentlerini yakalayın

İsteğe bağlı
Bazen, bir yönlendirme kuralının URL modelinin ( source veya regex değeri) belirli bölümlerini yakalamanız, ardından bu bölümleri 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ı
Birden çok URL için aynı içeriği göstermek üzere yeniden yazma özelliğini kullanın. Yeniden yazmalar, kalıpla eşleşen herhangi bir URL'yi kabul edebileceğiniz ve neyin görüntüleneceğine istemci tarafı kodun karar vermesine izin verebileceğiniz için, kalıp eşleştirmede özellikle 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 URL modeliyle eşleşen bir URL yolunu açmaya çalıştığında, bunun yerine tarayıcıya destination URL'deki dosyanın içeriği verilir.

Bir dizi nesne içeren bir rewrites özelliği oluşturarak ("yeniden yazma kuralları" olarak adlandırılır) URL yeniden yazma işlemlerini belirtin. Her kuralda, istek URL'si yolu ile eşleşirse, Hizmete belirtilen hedef URL verilmiş gibi yanıt vermesi için Hosting'i tetikleyen bir URL modeli belirtin.

İşte bir rewrites özniteliği için temel yapı. Bu örnek, var olmayan dosyalara veya dizinlere yönelik 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"
  } ]
}

"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 ö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 URL modeliyle eşleşen bir URL yolunda bir dosya veya dizin yoksa yeniden yazma kuralı uygular. Bir istek yeniden yazma kuralını tetiklediğinde, tarayıcı HTTP yeniden yönlendirmesi yerine belirtilen destination dosyanın gerçek içeriğini döndürür.

Bir işleve doğrudan istekler

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

Örneğin, Hosting sitenizdeki /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": "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şilebilir:

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

• Tüm bağlı özel alanlar :
  CUSTOM_DOMAIN /bigben

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

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

Bir 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 kullanılarak dinamik içerik sunulmasından 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ı 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ı ekledikten ve Firebase'e dağıttıktan sonra ( firebase deploy kullanarak), kapsayıcı resminize 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

• Tüm bağlı özel alanlar :
  CUSTOM_DOMAIN /helloworld

Barındırma ile istekleri Cloud Run kapsayıcılarına yönlendirirken desteklenen HTTP istek yöntemleri şunlardır: GET , POST , HEAD , PUT , DELETE , PATCH ve OPTIONS . REPORT veya PROFIND gibi diğer yöntemler desteklenmez.

Şu anda Cloud Run yeniden yazma işlemlerini Hosting 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şturun

Ö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 etki alanı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 etki 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:

Başlıkları yapılandırın

İsteğe bağlı
Başlıklar, istemcinin ve sunucunun bir istek veya yanıtla birlikte ek bilgiler iletmesine izin verir. Bazı başlık 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 işleme biçimini etkileyebilir.

Bir dizi başlık nesnesi içeren bir headers özniteliği oluşturarak özel, dosyaya özgü yanıt başlıklarını belirtin. Her nesnede, istek URL'si yolu ile eşleşirse Hosting'i belirtilen özel yanıt başlıklarını uygulaması için tetikleyen bir URL modeli belirtin.

İşte bir headers özniteliği için temel yapı. 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 niteliği, her tanımın aşağıdaki tablodaki alanları içermesi gereken bir dizi tanım içerir.

Dinamik içerik sunmayı 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 özniteliğ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 çıkarır. İstekte bir .html uzantısı eklenirse, Hosting aynı yola bir 301 yönlendirmesi gerçekleştirir ancak .html uzantısını kaldırır.

Bir cleanUrls özniteliği ekleyerek .html URL'lere dahil edilmesini şu şekilde kontrol edebilirsiniz:

"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 çizgiler içermesi gerekip gerekmediğini kontrol etmenize olanak tanır.

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

Bir trailingSlash özniteliğ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 özniteliği, Cloud Functions veya Cloud Run tarafından sunulan dinamik içeriğin yeniden yazılmasını etkilemez.

Glob desen eşleştirme

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

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

• ** — İsteğe bağlı bir alt dizindeki herhangi bir dosya veya klasörü eşleştirir

• * — Yalnızca public dizinin kök dizinindeki dosya ve klasörlerle eşleşir

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

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

• **/*.@(jpg|jpeg|gif|png) — Rastgele bir alt dizinde tam olarak aşağıdakilerden biriyle biten herhangi bir dosyayı eşleştirir: .jpg , .jpeg , .gif veya .png

Tam Barındırma yapılandırma örneği

Aşağıda, Firebase Barındırma için eksiksiz bir firebase.json yapılandırma örneği yer almaktadır. 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",

  }
}