Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

  • Set up redirects taşınan veya sildiğinize sayfalar için. Nasıl öğrenilir.

  • Set up rewrites bu amaçlardan herhangi biri için:

  • Ekle headers tür tarayıcılar sayfamızı ve içeriğini (kimlik doğrulama, önbelleğe alma, kodlama, vs.) nasıl işlemesi gerektiğini gibi bir istek ya da tepki, hakkında ek bilgi iletmekten. Nasıl öğrenilir.

  • Bir kullanıcının dil tercihine ve/veya ülkesine göre belirli içeriği sunmak için uluslararasılaştırma (i18n) yeniden yazmalarını ayarlayın. Öğrenin (farklı sayfa).

Barındırma yapılandırmanızı nerede tanımlarsınız?

Eğer içinde Firebase Barındırma yapılandırmasını tanımlayan firebase.json dosyası. Firebase otomatik oluşturur firebase.json çalıştırdığınızda proje dizininin kökünde dosyayı firebase init komutunu.

Bir bulabilirsiniz tam firebase.json yapılandırma örneği bu sayfanın alt kısmında (sadece Firebase Hosting kapsayan). Bir o Not firebase.json dosyası da içerebilir diğer Firebase hizmetler için yapılandırmaları .

Sen dağıtmış kontrol edebilirsiniz firebase.json kullanarak içerik barındırma DİNLENME API .

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. Bir ile başlayan Ayrılmış ad /__/* yol parçasının
  2. Yapılandırılmış yönlendirmeleri
  3. Tam eşleşen statik içerik
  4. Yapılandırılmış yeniden yazar
  5. Özel 404 sayfa
  6. Varsayılan 404 sayfası

Eğer kullanıyorsanız i18n yeniden yazar olarak tam eşleşme ve 404 taşıma önceliği sırası sizin "i18n içeriği" karşılamak için kapsamı genişletilir.

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

Varsayılan niteliklerini - public ve ignore - varsayılan dahil firebase.json sizin Firebase projesi geçirmeleri yapılmalıdır proje dizininde hangi dosyaların tanımlamak dosyası.

Varsayılan hosting bir yapılandırmayı firebase.json böyle dosya görünüyor:

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

halka açık

Gerekli
public hangi dizinin niteliği belirtir Firebase Barındırma dağıtmak üzere. Varsayılan değer adında bir dizindir public , ancak sürece proje dizininde bulunuyorsa gibi herhangi dizinin yolu 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 dağıtmak üzerinde görmezden niteliği belirtir dosyaları. Bu alabilir Neználkovo aynı şekilde Git kolları .gitignore .

Aşağıdakiler, yoksayılacak dosyalar için varsayılan değerlerdir:

"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ştirin

İsteğe bağlı
Bir özel hizmet edebilir 404 Not Found kullanıcı çalışır varolmayan bir sayfaya erişmeye hata.

Projenizin yeni bir dosya oluşturun public dizine söyle, 404.html , daha sonra özel eklemek 404 Not Found dosyasına içerik.

Firebase bu özel içeriğini görüntüler Hosting 404.html Bir tarayıcı tetikler eğer sayfa 404 Not Found sizin alanda veya alt alanda hatayı.

Yönlendirmeleri yapılandır

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

Bir oluşturarak URL yönlendirmeleri belirtme redirects nesnelerinin bir dizisi içeren özelliği ( "yönlendirme kuralları" olarak adlandırılır). Her kuralda, istek URL yolu ile eşleştirilirse Barındırma'yı belirtilen hedef URL'ye bir yönlendirmeyle yanıt vermesi için tetikleyen bir URL kalıbı belirtin.

İşte temel yapı var redirects özniteliği. Bu örnek yönlendirmeler istekleri /foo yeni bir istek yaparak /bar .

"hosting": {
  // ...

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

redirects özellik, her kural aşağıdaki tabloda alanları içermelidir Yönlendirme kuralları, bir dizi içerir.

Firebase Barındırma karşılaştırır source veya regex her isteği başlangıcında tüm URL yolları karşı değerini (tarayıcı bir dosya veya klasör o yolda bulunduğunu belirler önce). Bir eşleşme bulunursa, o zaman Firebase Hosting kökenli sunucu yeni bir istek yapmak için tarayıcıyı anlatan bir HTTPS yönlendirme yanıtı gönderirken destination URL'ye.

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

İlk istek URL'si ile eşleştirilirse, yönlendirmeyi uygulamak için Hosting'i tetikleyen bir URL kalıbı

destination

Tarayıcının yeni bir istekte bulunması gereken statik bir URL

Bu URL, göreli veya mutlak bir yol olabilir.

type

HTTPS yanıt kodu

  • Karışımı kullanın 301 'Kalıcı Olarak Taşındı' için
  • Karışımı kullanın 302 için 'Bulunan' (Geçici Yeniden Yönlendirme)

Yönlendirmeler için URL segmentlerini yakalayın

İsteğe bağlı
Bazen, bir yönlendirme kuralın URL modelinden (yakalanması belirli segmentlerine gerekebilir source veya regex kuralın bu segmentleri yeniden kullanmak, değer) destination yolu.

Yeniden yazmaları yapılandır

İsteğe bağlı
Birden çok URL için aynı içeriği göstermek için yeniden yazma kullanın. Kalıpla eşleşen herhangi bir URL'yi kabul edebileceğiniz ve neyin görüntüleneceğine istemci tarafı kodunun karar vermesine izin verebildiğiniz için, yeniden yazmalar özellikle kalıp eşleştirmede kullanışlıdır.

Ayrıca kullandığınız uygulamaları desteklemek için yeniden yazar kullanabilirsiniz HTML5 pushState navigasyon için. Bir tarayıcı girişimleri belirtilen eşleşen bir URL yolu açmaya zaman source veya regex URL modelini, tarayıcı en dosyanın içeriğini verilecektir destination URL yerine.

URL oluşturarak yeniden yazar belirtme rewrites nesnelerinin bir dizisi içeren özelliği ( "yeniden yazma kuralları" olarak adlandırılır). Her kuralda, istek URL yolu ile eşleştirilirse Barındırma'yı hizmete belirtilen hedef URL verilmiş gibi yanıt vermesini tetikleyen bir URL kalıbı belirtin.

İşte temel yapı var rewrites özniteliği. Bu örnek vermektedir index.html var olmayan dosyalara veya dizinlere istekleri için.

"hosting": {
  // ...

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

rewrites özellik, her kural aşağıdaki tabloda alanları içermelidir yeniden yazma kuralları, bir dizi içerir.

Bir dosya veya dizin belirtilen eşleşen bir URL yolunda yoksa Firebase Barındırma sadece bir yeniden yazma kuralı uygular source veya regex URL kalıbı. Bir istek bir yeniden yazma kuralı tetikler, tarayıcı döner belirtilen fiili içeriği destination yerine bir HTTP yönlendirmesi ait dosyada.

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

İlk istek URL'si ile eşleştirilirse, yeniden yazma işlemini uygulamak için Hosting'i tetikleyen bir URL kalıbı

destination

Var olması gereken yerel bir dosya

Bu URL, göreli veya mutlak bir yol olabilir.

Bir işleve doğrudan istekler

Sen kullanabilirsiniz rewrites bir Firebase Hosting URL'den bir işlevi yerine getirmek için. Aşağıdaki örnek bir alıntıdır Bulut İşlevleri kullanarak dinamik içerik sunan .

Örneğin, sayfadaki tüm isteklerini yönlendirmek için /bigben yürütmek için Hosting sitesinde bigben fonksiyonu:

"hosting": {
  // ...

  // Directs all requests from the page `/bigben` to execute the `bigben` function
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben"
  } ]
}

Bu yeniden yazma kuralı ekleyerek ve (kullanarak Firebase dağıtma sonra firebase deploy ), sizin işlev aşağıdaki URL'ler üzerinden ulaşılabilir:

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

  • Herhangi bağlı özel alanlar :
    CUSTOM_DOMAIN /bigben

Hosting ile fonksiyonlara istekleri yönlendirip, desteklenen HTTP isteği yöntemleridir GET , POST , HEAD , PUT , DELETE , PATCH , ve OPTIONS . Gibi diğer yöntemler REPORT veya PROFIND desteklenmez.

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

Sen kullanabilirsiniz rewrites bir Firebase Hosting URL'den bir bulut Run kabı erişmek için. Aşağıdaki örnek bir alıntıdır Bulut Çalıştır kullanarak dinamik içerik sunan .

Örneğin sayfa gelen tüm istekleri doğrudan /helloworld başlangıç ve koşu tetiklemek için Hosting sitesinde helloworld konteyner örneği:

"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ı ekleyerek ve (kullanarak Firebase dağıtma sonra firebase deploy ), kapsayıcı görüntü aşağıdaki URL'ler üzerinden ulaşılabilir:

  • Firebase alt alanlarınız:
    PROJECT_ID .web.app/helloworld ve PROJECT_ID .firebaseapp.com/helloworld

  • Herhangi bağlı özel alanlar :
    CUSTOM_DOMAIN /helloworld

Barındırma ile Bulut Run kaplarda istekleri yönlendirme, desteklenen HTTP isteği yöntemleridir GET , POST , HEAD , PUT , DELETE , PATCH , ve OPTIONS . Gibi diğer yöntemler REPORT veya PROFIND desteklenmez.

Şu anda, Cloud Run yeniden yazma işlemlerini Barındırma 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

Sen kullanabilirsiniz rewrites özel etki alanı Dinamik bağlantıları oluşturmak için. Hakkında detaylı bilgi için Dinamik Linkler belgelerine ziyaret Dinamik bağlantılar için özel bir alan kurma .

  • Yalnızca Dinamik bağlantılar için özel alan adı 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 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
      } ]
    }
    

Senin Yapılandırma Dinamik Linkler firebase.json dosyasına aşağıdakileri gerektirir:

Alan Açıklama
appAssociation

Olarak ayarlanmalıdır AUTO

  • Eğer konfigürasyonda bu niteliğini dahil etmezseniz, varsayılan appAssociation olduğunu AUTO .
  • Bu özelliğin ayarlayarak AUTO dinamik üretebilir Barındırma, assetlinks.json ve apple-app-site-association onlar talep ederken dosyaları.
rewrites
source

Dinamik Bağlantılar için kullanmak istediğiniz bir yol

URL'lere giden yolları yeniden yazan kuralların aksine, Dinamik Bağlantılar için yeniden yazma kuralları normal ifadeler içeremez.

dynamicLinks Olarak ayarlanmalıdır true

Başlıkları yapılandır

İsteğe bağlı
Başlıklar, istemcinin ve sunucunun bir istek veya yanıtla birlikte ek bilgileri iletmesine izin verir. Erişim denetimi, kimlik doğrulama, önbelleğe alma ve kodlama dahil olmak üzere bazı başlık grupları, tarayıcının sayfayı ve içeriğini nasıl işleyeceğini etkileyebilir.

Bir oluşturarak, özel dosya özgü tepki başlıkları belirtme headers başlık nesneleri dizisini içeren özelliği. Her nesnede, istek URL yolu ile eşleştirilirse, belirtilen özel yanıt başlıklarını uygulamak için Barındırma'yı tetikleyen bir URL kalıbı belirtin.

İşte temel yapı var headers özniteliği. 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": "*"
    } ]
  } ]
}

headers özelliği, her bir tanım aşağıdaki tabloda alanları içermelidir tanımlar, bir dizi içerir.

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

İlk istek URL'si ile eşleştirilirse, özel başlığı uygulamak için Hosting'i tetikleyen bir URL kalıbı

Senin aleyhinde eşleştirmek için bir başlık oluşturmak için özel 404 sayfa , kullanmak 404.html senin kadar source veya regex değeri.

(alt) dizisi headers

Barındırma'nın istek yoluna uyguladığı özel başlıklar

Her bir alt-başlık bir içermelidir key ve value çifti (sonraki iki sıra bakınız).

key Örneğin, başlık adı, Cache-Control
value Örneğin, başlık değeri, max-age=7200

Sen hakkında daha fazla bilgi edinebilirsiniz Cache-Control dinamik içerik ve barındırma microservices hizmet açıklar Barındırma bölümünde. Ayrıca hakkında daha fazla bilgi edinebilirsiniz CORS başlıklarından.

Kontrolü .html uzantıları

İsteğe bağlı
cleanUrls ayrıntının URL'ler içermelidir olup olmadığını kontrol etmenizi sağlar .html uzantısı.

Ne zaman true , otomatik Barındırma damla .html yüklenen dosya URL'lerinden uzantısı. Bir ederse .html uzantısı gerçekleştiren bir Barındırma, istek eklenir 301 aynı yola yönlendirmeyi ama ortadan kaldırır .html uzantısını.

İşte dahil nasıl kontrol edileceği var .html bir ekleyerek URL'lerindeki cleanUrls niteliğini:

"hosting": {
  // ...

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

Sondaki eğik çizgileri kontrol edin

İsteğe bağlı
trailingSlash nitelik statik içerik URL'ler bölü çizgisi içermelidir olup olmadığını kontrol etmenizi sağlar.

  • Ne zaman true , yönlendirmeler URL'ler Barındırma eğik çizgi ekleyin.
  • Ne zaman false , yönlendirmeler URL'ler Barındırma eğik çizgi kaldırın.
  • Ne zaman dizin dizin dosyaları için belirtilmemiş, Barındırma sadece sondaki kullanır eğik çizgi (örneğin, about/index.html ).

İşte ekleyerek sonunda bölü nasıl kontrol var trailingSlash niteliğini:

"hosting": {
  // ...

  // Removes trailing slashes from URLs
  "trailingSlash": false
}

trailingSlash nitelik Bulut Fonksiyonlar veya Cloud Run tarafından sunulan dinamik içeriğe yeniden yazar etkilemez.

Küre desen eşleştirme

Firebase Barındırma yapılandırma seçenekleri geniş kullanımı yapmak glob desen eşleştirme Git kolları nasıl benzer extglob ile notasyonu gitignore kuralları ve Bower kolları ignore kuralları. Bu wiki sayfası daha detaylı referans olmakla şu bu sayfada kullanılan örnekler açıklamalar verilmiştir:

  • firebase.json - Sadece maçları firebase.json kök dosyanın public dizinde

  • ** - keyfi bir alt dizindeki herhangi bir dosya veya klasör Maçları

  • * - Yalnızca kök dosya ve klasörleri maçları public dizinde

  • **/.* - ile herhangi bir dosya başlangıcı Maçları . (genellikle olduğu gibi dosyalar gizli .git keyfi bir alt dizinde klasörde)

  • **/node_modules/** - bir keyfi alt dizindeki herhangi bir dosya veya klasör Maçları node_modules kendisinin keyfi alt dizininde olabilir klasör, public dizinde

  • **/*.@(jpg|jpeg|gif|png) - keyfi bir alt dizinde herhangi bir dosyayı Maçları olduğunu tam olarak bir Aşağıdakilerden ile biter: .jpg , .jpeg , .gif veya .png

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

Aşağıdaki bir dolu firebase.json Firebase Hosting için yapılandırma örneği. Bir o Not firebase.json dosyası da içerebilir diğer Firebase hizmetler için yapılandırmaları .

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

  }
}