Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Konfigurasikan perilaku Hosting

Dengan Firebase Hosting, Anda dapat mengonfigurasi perilaku hosting yang disesuaikan untuk permintaan ke situs Anda.

Apa yang dapat Anda konfigurasikan untuk Hosting?

  • Tentukan file mana di direktori proyek lokal yang ingin Anda terapkan ke Firebase Hosting. Belajar bagaimana.

  • Sajikan halaman 404/Tidak Ditemukan yang disesuaikan. Belajar bagaimana.

  • Siapkan redirects untuk halaman yang telah Anda pindahkan atau hapus. Belajar bagaimana.

  • Siapkan rewrites untuk salah satu tujuan berikut:

  • Tambahkan headers untuk menyampaikan informasi tambahan tentang permintaan atau respons, seperti bagaimana browser harus menangani halaman dan kontennya (otentikasi, caching, encoding, dll.). Belajar bagaimana.

  • Siapkan penulisan ulang internasionalisasi (i18n) untuk menyajikan konten tertentu berdasarkan preferensi bahasa dan/atau negara pengguna. Pelajari caranya (halaman berbeda).

Di mana Anda menentukan konfigurasi Hosting Anda?

Anda menentukan konfigurasi Firebase Hosting di file firebase.json Anda. Firebase secara otomatis membuat file firebase.json Anda di root direktori proyek saat Anda menjalankan perintah firebase init .

Anda dapat menemukan contoh konfigurasi firebase.json lengkap (hanya mencakup Firebase Hosting) di bagian bawah halaman ini. Perhatikan bahwa file firebase.json juga dapat berisi konfigurasi untuk layanan Firebase lainnya .

Anda dapat memeriksa konten firebase.json yang diterapkan menggunakan REST API Hosting .

Urutan prioritas tanggapan Hosting

Opsi konfigurasi Firebase Hosting yang berbeda yang dijelaskan di halaman ini terkadang dapat tumpang tindih. Jika terjadi konflik, Hosting menentukan responsnya menggunakan urutan prioritas berikut:

  1. Ruang nama yang dicadangkan yang dimulai dengan segmen jalur /__/*
  2. Pengalihan yang dikonfigurasi
  3. Konten statis pencocokan tepat
  4. Penulisan ulang yang dikonfigurasi
  5. Halaman 404 khusus
  6. Halaman 404 bawaan

Jika Anda menggunakan i18n rewrites , urutan prioritas penanganan pencocokan tepat dan 404 diperluas cakupannya untuk mengakomodasi "konten i18n" Anda.

Tentukan file mana yang akan digunakan

Atribut default — public dan ignore — yang disertakan dalam file firebase.json default menentukan file mana dalam direktori proyek Anda yang harus diterapkan ke proyek Firebase Anda.

Konfigurasi hosting default dalam file firebase.json terlihat seperti ini:

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

publik

Yg dibutuhkan
Atribut public menentukan direktori mana yang akan diterapkan ke Firebase Hosting. Nilai default adalah direktori bernama public , tetapi Anda dapat menentukan jalur direktori mana pun, selama itu ada di direktori proyek Anda.

Berikut ini adalah nama direktori yang ditentukan secara default untuk disebarkan:

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

  // ...
}

Anda dapat mengubah nilai default ke direktori yang ingin Anda gunakan:

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

  // ...
}

mengabaikan

Opsional
Atribut ignore menentukan file yang akan diabaikan saat diterapkan. Ini dapat mengambil gumpalan dengan cara yang sama seperti Git menangani .gitignore .

Berikut ini adalah nilai default untuk file yang diabaikan:

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

Sesuaikan halaman 404/Tidak Ditemukan

Opsional
Anda dapat menampilkan kesalahan 404 Not Found khusus saat pengguna mencoba mengakses halaman yang tidak ada.

Buat file baru di direktori public proyek Anda , beri nama 404.html , lalu tambahkan konten kustom 404 Not Found Anda ke file.

Firebase Hosting akan menampilkan konten halaman 404.html khusus ini jika browser memicu kesalahan 404 Not Found di domain atau subdomain Anda.

Konfigurasikan pengalihan

Opsional
Gunakan pengalihan URL untuk mencegah tautan rusak jika Anda telah memindahkan halaman atau untuk mempersingkat URL. Misalnya, Anda dapat mengalihkan browser dari example.com/team ke example.com/about.html .

Tentukan pengalihan URL dengan membuat atribut redirects yang berisi larik objek (disebut "aturan pengalihan"). Di setiap aturan, tentukan pola URL yang, jika cocok dengan jalur URL permintaan, memicu Hosting untuk merespons dengan pengalihan ke URL tujuan yang ditentukan.

Berikut struktur dasar untuk atribut redirects . Contoh ini mengarahkan permintaan ke /foo dengan membuat permintaan baru ke /bar .

"hosting": {
  // ...

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

Atribut redirects berisi larik aturan redirect, di mana setiap aturan harus menyertakan bidang dalam tabel di bawah ini.

Firebase Hosting membandingkan nilai source atau regex dengan semua jalur URL di awal setiap permintaan (sebelum browser menentukan apakah ada file atau folder di jalur tersebut). Jika kecocokan ditemukan, server asal Firebase Hosting mengirimkan respons pengalihan HTTPS yang memberi tahu browser untuk membuat permintaan baru di URL destination .

Bidang Keterangan
redirects
source (disarankan)
atau regex

Pola URL yang, jika cocok dengan URL permintaan awal, memicu Hosting untuk menerapkan pengalihan

destination

URL statis tempat browser harus membuat permintaan baru

URL ini dapat berupa jalur relatif atau absolut.

type

Kode respons HTTPS

  • Gunakan tipe 301 untuk 'Dipindahkan Secara Permanen'
  • Gunakan tipe 302 untuk 'Ditemukan' (Pengalihan Sementara)

Tangkap segmen URL untuk pengalihan

Opsional
Terkadang, Anda mungkin perlu menangkap segmen tertentu dari pola URL aturan pengalihan ( nilai source atau regex ), lalu menggunakan kembali segmen ini di jalur destination aturan.

Konfigurasikan penulisan ulang

Opsional
Gunakan penulisan ulang untuk menampilkan konten yang sama untuk beberapa URL. Penulisan ulang sangat berguna dengan pencocokan pola, karena Anda dapat menerima URL apa pun yang cocok dengan pola dan membiarkan kode sisi klien memutuskan apa yang akan ditampilkan.

Anda juga dapat menggunakan penulisan ulang untuk mendukung aplikasi yang menggunakan HTML5 pushState untuk navigasi. Saat browser mencoba membuka jalur URL yang cocok dengan pola URL source atau regex yang ditentukan, browser akan diberikan konten file di URL destination .

Tentukan penulisan ulang URL dengan membuat atribut rewrites yang berisi larik objek (disebut "aturan penulisan ulang"). Di setiap aturan, tentukan pola URL yang, jika cocok dengan jalur URL permintaan, memicu Hosting untuk merespons seolah-olah layanan diberi URL tujuan yang ditentukan.

Inilah struktur dasar untuk atribut rewrites . Contoh ini menyajikan index.html untuk permintaan ke file atau direktori yang tidak ada.

"hosting": {
  // ...

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

Atribut rewrites berisi larik aturan penulisan ulang, di mana setiap aturan harus menyertakan bidang dalam tabel di bawah ini.

Firebase Hosting hanya menerapkan aturan penulisan ulang jika file atau direktori tidak ada di jalur URL yang cocok dengan pola URL source atau regex yang ditentukan. Saat permintaan memicu aturan penulisan ulang, browser mengembalikan konten sebenarnya dari file destination yang ditentukan, bukan pengalihan HTTP.

Bidang Keterangan
rewrites
source (disarankan)
atau regex

Pola URL yang, jika cocok dengan URL permintaan awal, memicu Hosting untuk menerapkan penulisan ulang

destination

File lokal yang harus ada

URL ini dapat berupa jalur relatif atau absolut.

Permintaan langsung ke suatu fungsi

Anda dapat menggunakan rewrites untuk menjalankan fungsi dari URL Firebase Hosting. Contoh berikut adalah kutipan dari penyajian konten dinamis menggunakan Cloud Functions .

Misalnya, untuk mengarahkan semua permintaan dari halaman /bigben di situs Hosting Anda untuk menjalankan fungsi bigben :

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

Setelah menambahkan aturan penulisan ulang ini dan men-deploy ke Firebase (menggunakan firebase deploy ), fungsi Anda dapat dijangkau melalui URL berikut:

  • Subdomain Firebase Anda:
    PROJECT_ID .web.app/bigben dan PROJECT_ID .firebaseapp.com/bigben

  • Setiap domain khusus yang terhubung :
    CUSTOM_DOMAIN /bigben

Saat mengarahkan permintaan ke fungsi dengan Hosting, metode permintaan HTTP yang didukung adalah GET , POST , HEAD , PUT , DELETE , PATCH , dan OPTIONS . Metode lain seperti REPORT atau PROFIND tidak didukung.

Permintaan langsung ke container Cloud Run

Anda dapat menggunakan rewrites untuk mengakses container Cloud Run dari URL Firebase Hosting. Contoh berikut adalah kutipan dari penyajian konten dinamis menggunakan Cloud Run .

Misalnya, untuk mengarahkan semua permintaan dari halaman /helloworld di situs Hosting Anda untuk memicu startup dan menjalankan instance container helloworld :

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

Setelah menambahkan aturan penulisan ulang ini dan men-deploy ke Firebase (menggunakan firebase deploy ), image container Anda dapat dijangkau melalui URL berikut:

  • Subdomain Firebase Anda:
    PROJECT_ID .web.app/helloworld dan PROJECT_ID .firebaseapp.com/helloworld

  • Setiap domain khusus yang terhubung :
    CUSTOM_DOMAIN /helloworld

Saat mengalihkan permintaan ke container Cloud Run dengan Hosting, metode permintaan HTTP yang didukung adalah GET , POST , HEAD , PUT , DELETE , PATCH , dan OPTIONS . Metode lain seperti REPORT atau PROFIND tidak didukung.

Saat ini, Anda dapat menggunakan penulisan ulang Cloud Run dengan Hosting di region berikut:

  • 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

Anda dapat menggunakan rewrites untuk membuat Dynamic Links domain kustom. Kunjungi dokumentasi Dynamic Links untuk informasi mendetail tentang menyiapkan domain khusus untuk Dynamic Links .

  • Gunakan domain khusus Anda hanya untuk Dynamic Links

    "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
      } ]
    }
    
  • Tentukan awalan jalur domain khusus yang akan digunakan untuk Dynamic Links

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

Mengonfigurasi Dynamic Links di file firebase.json Anda memerlukan hal berikut:

Bidang Keterangan
appAssociation

Harus disetel ke AUTO

  • Jika Anda tidak menyertakan atribut ini dalam konfigurasi Anda, default untuk appAssociation adalah AUTO .
  • Dengan menyetel atribut ini ke AUTO , Hosting dapat secara dinamis menghasilkan assetlinks.json dan apple-app-site-association saat diminta.
rewrites
source

Jalur yang ingin Anda gunakan untuk Dynamic Links

Tidak seperti aturan yang menulis ulang jalur ke URL, aturan penulisan ulang untuk Dynamic Links tidak boleh berisi ekspresi reguler.

dynamicLinks Harus disetel ke true

Konfigurasikan tajuk

Opsional
Header memungkinkan klien dan server untuk menyampaikan informasi tambahan bersama dengan permintaan atau tanggapan. Beberapa kumpulan header dapat memengaruhi cara browser menangani halaman dan kontennya, termasuk kontrol akses, autentikasi, caching, dan encoding.

Tentukan tajuk respons khusus file khusus dengan membuat atribut headers yang berisi larik objek tajuk. Di setiap objek, tentukan pola URL yang, jika cocok dengan jalur URL permintaan, memicu Hosting untuk menerapkan header respons khusus yang ditentukan.

Inilah struktur dasar untuk atribut headers . Contoh ini menerapkan header CORS untuk semua file font.

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

Atribut headers berisi larik definisi, di mana setiap definisi harus menyertakan bidang dalam tabel di bawah ini.

Bidang Keterangan
headers
source (disarankan)
atau regex

Pola URL yang, jika cocok dengan URL permintaan awal, memicu Hosting untuk menerapkan header khusus

Untuk membuat tajuk yang cocok dengan laman 404 khusus Anda , gunakan 404.html sebagai source atau nilai regex Anda.

array (sub-) headers

Header khusus yang diterapkan Hosting ke jalur permintaan

Setiap sub-judul harus menyertakan pasangan key dan value (lihat dua baris berikutnya).

key Nama header, misalnya Cache-Control
value Nilai untuk header, misalnya max-age=7200

Anda dapat mempelajari lebih lanjut tentang Cache-Control di bagian Hosting yang menjelaskan tentang penyajian konten dinamis dan layanan mikro hosting. Anda juga dapat mempelajari lebih lanjut tentang header CORS .

Kontrol ekstensi .html

Opsional
Atribut cleanUrls memungkinkan Anda mengontrol apakah URL harus menyertakan ekstensi .html atau tidak.

Jika true , Hosting secara otomatis menghapus ekstensi .html dari URL file yang diunggah. Jika ekstensi .html ditambahkan dalam permintaan, Hosting melakukan pengalihan 301 ke jalur yang sama tetapi menghilangkan ekstensi .html .

Berikut cara mengontrol penyertaan .html di URL dengan menyertakan atribut cleanUrls :

"hosting": {
  // ...

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

Kontrol garis miring tambahan

Opsional
Atribut trailingSlash memungkinkan Anda untuk mengontrol apakah URL konten statis harus menyertakan garis miring atau tidak.

  • Jika true , Hosting mengalihkan URL untuk menambahkan garis miring.
  • Jika false , Hosting mengalihkan URL untuk menghapus garis miring.
  • Jika tidak ditentukan, Hosting hanya menggunakan garis miring untuk file indeks direktori (misalnya, about/index.html ).

Berikut cara mengontrol garis miring dengan menambahkan atribut trailingSlash :

"hosting": {
  // ...

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

Atribut trailingSlash tidak memengaruhi penulisan ulang ke konten dinamis yang disajikan oleh Cloud Functions atau Cloud Run.

Pencocokan pola glob

Opsi konfigurasi Firebase Hosting memanfaatkan notasi pencocokan pola glob secara ekstensif dengan extglob, mirip dengan cara Git menangani aturan gitignore dan Bower menangani aturan ignore . Halaman wiki ini merupakan referensi yang lebih detail, namun berikut adalah penjelasan dari contoh-contoh yang digunakan pada halaman ini:

  • firebase.json — Hanya cocok dengan file firebase.json di root direktori public

  • ** — Mencocokkan file atau folder apa pun di sub-direktori arbitrer

  • * — Hanya cocok dengan file dan folder di root direktori public

  • **/.* — Mencocokkan file apa pun yang dimulai dengan . (biasanya file tersembunyi, seperti di folder .git ) di sub-direktori arbitrer

  • **/node_modules/** — Mencocokkan file atau folder apa pun di sub-direktori sembarang dari folder node_modules , yang bisa dengan sendirinya berada di sub-direktori sembarang dari direktori public

  • **/*.@(jpg|jpeg|gif|png) — Mencocokkan file apa pun dalam sub-direktori arbitrer yang diakhiri dengan tepat salah satu dari berikut ini: .jpg , .jpeg , .gif , atau .png

Contoh konfigurasi Hosting Lengkap

Berikut ini adalah contoh konfigurasi firebase.json lengkap untuk Firebase Hosting. Perhatikan bahwa file firebase.json juga dapat berisi konfigurasi untuk layanan Firebase lainnya .

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

  }
}