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?

• Yerel proje dizininizdeki hangi dosyalara dağıtım yapmak istediğinizi belirtin Firebase Hosting Bunu nasıl yapacağınızı öğrenin.

• Özelleştirilmiş bir 404/Bulunamadı sayfası sunun. Bunu nasıl yapacağınızı öğrenin.

• Taşıdığınız veya sildiğiniz sayfalar için redirects özelliğini ayarlayın. Bunu nasıl yapacağınızı öğrenin.

• rewrites kurulumunu şu amaçlardan herhangi biri için yapabilirsiniz:

  • Aynı içeriği birden fazla URL için gösterin. Bunu nasıl yapacağınızı öğrenin.

  • Bir işlev sunun veya Hosting üzerinden bir Cloud Run kapsayıcısına erişin URL'yi tıklayın. İşlev veya kapsayıcı hakkında bilgi edinin.

  • Dynamic Link adlı özel alan oluşturun. Bunu nasıl yapacağınızı öğrenin.

• Bir istek veya istek hakkında ek bilgi iletmek için headers (tarayıcıların sayfayı ve içeriğini nasıl işlemesi gerektiği gibi) (kimlik doğrulama, önbelleğe alma, kodlama vb.). Nasıl yapılacağını öğrenin.

• Belirli içerikleri temel alarak sunmak için uluslararasılaştırma (i18n) yeniden yazma işlemlerini ayarlayın kullanıcının dil tercihine ve/veya ülkesine göre değiştirilebilir. 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 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
  } ]
}

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

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.

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

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

İş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ştur

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:

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

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

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

  }
}