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

Firebase Hosting ile aşağıdakiler için özelleştirilmiş barındırma davranışını yapılandırabilirsiniz: istekleriniz neler?

Hosting için neleri yapılandırabilirsiniz?

Hosting yapılandırmanızı nerede tanımlarsınız?

Firebase Hosting yapılandırmanızı firebase.json dosyası olarak kaydedin. Firebase firebase.json dosyanızı projenizin kök düzeyinde otomatik olarak oluşturur dizinini çalıştırın. firebase init komutundan sonra ekleyebilirsiniz.

Daha fazla tam firebase.json yapılandırma örneği (yalnızca Firebase Hosting kapsama dahil)), bu sayfanın alt kısmına gidin. firebase.json dosyalarının diğer Firebase hizmetlerinin yapılandırmalarını da içerebileceğini unutmayın.

Dağıtılan firebase.json içeriğini Hosting REST API.

Hosting yanıtın öncelik sırası

Bu sayfada açıklanan farklı Firebase Hosting yapılandırma seçenekleri zaman zaman ç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. Statik içerikle tam eşleme
  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 sevkiyata hazırlık önceliği sıralaması, "i18n içerik".

Dağıtılacak dosyaları belirtme

Varsayılan özellikler (public ve ignore) dahil değeri, varsayılan firebase.json dosyasında proje dizininizdeki hangi dosyaların olduğunu tanımlar. Firebase projenize dağıtılmalıdır.

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 projenizde bulunduğu sürece herhangi bir dizinin yolunu belirtebilir dizin.

Yayınlanacak dizinin varsayılan olarak belirtilen adı aşağıda verilmiştir:

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

  // ...
}

Varsayılan değeri, dağıtmak istediğiniz dizin olarak değiştirebilirsiniz:

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

  // ...
}

yoksay

İsteğe bağlı
ignore özelliği, dağıtımda yoksayılacak dosyaları belirtir. Bir glob'ları aynı şekilde Git .gitignore işleyicilerini işler.

Aşağıda, dosyalar için yoksayılacak 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ı
Kullanıcı bir sayfaya erişmeye çalıştığında özel 404 Not Found hatası sunabilirsiniz daha fazla bilgi edindiniz.

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.

Firebase Hosting, şu durumlarda bu özel 404.html sayfasının içeriğini görüntüler: Bir tarayıcı, alan adınızda veya alt alan adınızda 404 Not Found hatasını tetikler.

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.

Dizi içeren bir redirects özelliği oluşturarak URL yönlendirmeleri belirtin ("yönlendirme kuralları" olarak adlandırılır). Her kuralda, şu özelliklere sahip bir URL kalıbı belirtin: istek URL'sinin yoluyla eşleştirilirse yönlendirmeyle yanıt vermesi için Hosting öğesini tetikler belirtilen hedef URL'ye yönlendirmelidir.

Bir redirects özelliğinin temel yapısını burada görebilirsiniz. Bu örnek, /bar hesabından yeni bir istekte bulunarak /foo için istek.

"hosting": {
  // ...

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

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ı bu 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.

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

İlk istek URL'si ile eşleştirilmesi halinde tetiklenen bir URL kalıbı Yönlendirmeyi uygulamak için Hosting

  • Şunları belirtmek için source kullanın: glob (önerilir).
  • Şunları belirtmek için regex kullanın: RE2 normal ifadesi.
destination

Tarayıcının yeni bir istekte bulunması gereken statik 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 yakalama

İsteğe bağlı
Bazen, yönlendirme kuralının URL'sinin belirli segmentlerini yakalamanız gerekebilir. (source veya regex değeri) diyorsanız bu segmentleri, kuralının destination yolunu açar.

Yeniden yazmaları yapılandır

İsteğe bağlı
Aynı içeriği birden fazla URL için göstermek üzere yeniden yazma özelliğini kullanın. Yeniden yazılanlar Kalıp eşleştirmede özellikle işe yarar çünkü kalıpla eşleşir ve neyin gösterileceğine istemci taraflı kod karar verir.

Yeniden yazma özelliğini kullanan uygulamaları desteklemek için de HTML5 pushState tercih edebilirsiniz. Tarayıcı, source veya regex URL kalıbı belirtilirse, tarayıcıya bunun yerine dosyanın içeriğini destination URL'sine atar.

Dizi içeren bir rewrites özelliği oluşturarak yeniden yazılan URL'leri belirtin ("yeniden yazma kuralları" olarak adlandırılır). Her kuralda, şu özelliklere sahip bir URL kalıbı belirtin: URL'nin istek URL yoluyla eşleştirilmesi durumunda Hosting, hizmetine belirtilen hedef URL verildi.

Bir rewrites özelliğinin temel yapısını burada görebilirsiniz. Bu örnekte yayınlananlar Mevcut olmayan dosya veya dizinlere yönelik istekler için index.html.

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "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, yeniden yazma kuralını yalnızca bir dosya veya dizin uygulanmazsa uygular belirtilen source veya regex URL kalıbıyla eşleşen bir URL yolunda mevcut. Bir istek yeniden yazma kuralını tetiklediğinde, tarayıcı asıl içeriği döndürür bir HTTP yönlendirmesi yerine belirtilen destination dosyası için bir değer gösterir.

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

İlk istek URL'si ile eşleştirilmesi halinde tetiklenen bir URL kalıbı Yeniden yazmayı uygulamak için Hosting
destination

Var olması gereken yerel bir dosya

Bu URL göreli veya mutlak bir yol olabilir.

İşleve doğrudan istekler

Firebase Hosting URL'sinden bir işlev sunmak için rewrites kullanabilirsiniz. İlgili içeriği oluşturmak için kullanılan aşağıdaki örnekte Cloud Functions kullanarak dinamik içerik sunma.

Örneğin, /bigben sayfasından gelen tüm istekleri yönlendirmek için bigben işlevini yürütecek Hosting sitesi:

"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), işlevinize aşağıdaki URL'ler aracılığıyla ulaşılabilir:

  • 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

İstekler Hosting ile işlevlere yönlendirilirken, desteklenen HTTP isteği yöntemleri şunlardır: GET, POST, HEAD, PUT, DELETE, PATCH ve OPTIONS. REPORT veya PROFIND gibi diğer yöntemler desteklenmez.

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

Şuradan Cloud Run kapsayıcısına erişmek için rewrites kullanabilirsiniz: Firebase Hosting URL. Aşağıdaki örnekte Cloud Run kullanarak dinamik içerik sunma.

Örneğin, /helloworld sayfasından gelen tüm istekleri yönlendirmek için Bir helloworld kapsayıcısının başlatılmasını ve çalıştırılmasını tetiklemek için Hosting sitesi örnek:

"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) kullanıyorsanız kapsayıcı görüntünüze 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

  • Bağlı tüm özel alanlar:
    CUSTOM_DOMAIN/helloworld

İstekler Hosting ile Cloud Run kapsayıcılarına yönlendirilirken, desteklenen HTTP isteği yöntemleri şunlardır: GET, POST, HEAD, PUT, DELETE, PATCH ve OPTIONS. REPORT veya PROFIND gibi diğer yöntemler desteklenir.

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

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

Hosting kaynağından Cloud Run öğesine yeniden yazma işlemleri şurada desteklenmektedir: şu bölgelerde:

  • 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

Dynamic Links özel alan adı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 gerekenler:

Alan Açıklama
appAssociation

AUTO olarak ayarlanmalıdır

  • Bu özelliği yapılandırmanıza dahil etmezseniz appAssociation için varsayılan değer AUTO olur.
  • Bu özelliği AUTO olarak ayarladığınızda Hosting şunları yapabilir: dinamik olarak assetlinks.json ve apple-app-site-association dosyaları şu durumlarda bunu yapmanız gerekir.
rewrites
source

Dynamic Links için kullanmak istediğiniz yol

URL'lere giden yolları yeniden yazan kuralların aksine, Dynamic Links için kuralları yeniden yazın normal ifadeler içeremez.

dynamicLinks true olarak ayarlanmalıdır

Üstbilgileri yapılandırma

İsteğe bağlı
Başlıklar, istemcinin ve sunucunun ek bilgiler iletmesine olanak tanır. yanıt gönderebilirsiniz. Bazı üstbilgi grupları, tarayıcının dahil olmak üzere sayfayı ve içeriğini işler. önbellek kullanımı ve kodlama.

headers özelliği oluşturarak özel, dosyaya özgü yanıt üstbilgilerini belirleyin. içerir. Her nesnede, istek URL yoluyla eşleşirse belirtilen özel yanıt başlıklarını 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 CORS başlığı.

"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 burada gösterildiği bir tanım dizisi içerir. aşağıdaki tabloda bulunan alanları içermelidir.

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

İlk istek URL'siyle eşleşirse özel başlığı uygulamak için Hosting'yi tetikleyen bir URL kalıbı

  • Şunları belirtmek için source kullanın: glob (önerilir).
  • RE2 normal ifadesi belirtmek için regex kullanın.

Aramanızla eşleşecek bir başlık oluşturmak için custom 404 sayfası, 404.html source veya regex değeri.

(alt)headers dizisi

Hosting özelliğinin 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 Üstbilginin adı (örneğin, Cache-Control)
value Üstbilginin değeri (örneğin, max-age=7200)

Cache-Control hakkında daha fazla bilgiye şuradan ulaşabilirsiniz: Dinamik içerik sunma ve barındırmanın açıklandığı Hosting bölümü mikro hizmetlere erişebilir. Ayrıca, CORS başlıkları

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

.html öğesinin URL'lere dahil edilip edilmeyeceğini kontrol etmek için cleanUrls özelliği:

"hosting": {
  // ...

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

Sonundaki eğik çizgileri kontrol etme

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

  • true durumunda Hosting, URL'leri sonuna eğik çizgi ekleyerek yönlendirir.
  • false olduğunda Hosting, URL'leri sondaki eğik çizgiyi kaldıracak şekilde 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 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, dinamik içeriğe yeniden yazma işlemlerini etkilemez Cloud Functions veya Cloud Run tarafından yayınlanıyor.

Glob kalıp eşleştirme

Firebase Hosting yapılandırma seçenekleri, glob kalıp eşleştirme extglob ile notasyon, Git'in işleme şekline benzer şekilde gitignore kural ve Bower, ignore kurallarını işler. 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 kökteki firebase.json dosyasıyla eşleşir. public dizininden

  • **: Rastgele bir alt dizindeki herhangi bir dosya veya klasörle eşleşir.

  • * — Yalnızca kök dizindeki dosya ve klasörleri eşleştirir public dizin

  • **/.* — . ile başlayan tüm dosyalarla eşleşir (genellikle gizli dosyalar, .git klasöründeki gibi) rastgele bir alt dizinde

  • **/node_modules/**: Rastgele bir dosya veya klasörle eşleşir. bir node_modules klasörünün alt dizini (kendisi isteğe bağlı olabilir) public dizininin alt dizini

  • **/*.@(jpg|jpeg|gif|png): Rastgele bir dosyayla eşleşir. şunlardan biriyle biten bir alt dizindir: .jpg, .jpeg, .gif veya .png

Tam Hosting yapılandırma örneği

Aşağıdaki örnek için eksiksiz bir firebase.json yapılandırma örneği verilmiştir: Firebase Hosting. firebase.json dosyasının şunları da içerebileceğini unutmayın: diğer Firebase hizmetlerine yönelik yapılandırmalarla ilgili daha fazla bilgi edinin.

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

  }
}