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. Nasıl yapılacağını öğrenin: işlev veya kapsayıcı için geçerlidir.

  • 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.). Bunu nasıl yapacağınızı öğ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ımlıyorsunuz?

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. Not: firebase.json dosyası şunları da içerebilir: diğer Firebase hizmetlerine yönelik yapılandırmalarla ilgili daha fazla bilgi edinin.

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. Bir çakışma olması durumunda Hosting, çakışmayı şu öncelik sırasını kullanarak yanıt ver:

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ı belirtin

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 ş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, dağıtımın hangi dizine yapılacağını belirtir Firebase Hosting. Varsayılan değer public adlı bir dizindir ancak projenizde bulunduğu sürece herhangi bir dizinin yolunu belirtebilir dizin.

Aşağıda, dağıtılacak dizinin belirtilen varsayılan adı 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 ve dosyaya bir ad verin 404.html, 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 için URL yönlendirmesi kullanın veya URL'leri kısaltmak için de kullanılabilir. Örneğin, bir tarayıcıyı example.com/team - example.com/about.html.

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, yönlendirme kuralları dizisi içerir. Buradaki her kural aşağıdaki tabloda bulunan alanları içermelidir.

Firebase Hosting, source veya regex değerini tüm URL'lerle karşılaştırır. her isteğin başındaki yollarını (tarayıcı, dosya veya klasör varsa). Bir eşleşme bulunursa Firebase Hosting kaynak sunucu, HTTPS yönlendirme yanıtı göndererek yeni bir istek yapmak için destination URL'sinde yeni bir istek gönderin.

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, yeniden yazma kuralları dizisi içerir. Buradaki her kuralın aşağıdaki tabloda bulunan alanları içermelidir.

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 sayfasını ziyaret edin ayrıntılı bilgi için Dynamic Links için özel alan oluşturma.

• Özel alan adı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 ö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 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 bir URL kalıbı belirtin URL'nin istek URL yoluyla eşleşmesi durumunda,Hosting özel yanıt başlıkları ekleyin.

Bir headers özelliğinin temel yapısını burada görebilirsiniz. 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ısını kontrol et

İsteğe bağlı
cleanUrls özelliği, URL'lerin gösterilip gösterilmeyeceğini kontrol etmenizi sağlar. .html uzantısını içermelidir.

true durumunda Hosting, .html uzantısını yüklenenler listesinden otomatik olarak kaldırır dosya URL'leri. İsteğe bir .html uzantısı eklenirse Hosting, bir 301 aynı yola yönlendirme yapar, ancak .html uzantısını ortadan 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
}

Sondaki eğik çizgileri kontrol et

İ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.
• Belirtilmemesi durumunda Hosting, dizin dizini için yalnızca sondaki eğik çizgileri kullanır dosya (ö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.

Yerküre kalıbı 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",

  }
}