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 project 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 tanggapan, seperti bagaimana seharusnya browser menangani laman dan kontennya (otentikasi, caching, penyandian, 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 . Firebase secara otomatis membuat file firebase.json di root direktori proyek Anda 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 Hosting REST API .

Urutan prioritas respons Hosting

Berbagai opsi konfigurasi Firebase Hosting yang dijelaskan di halaman ini terkadang bisa 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 yang sama persis
  4. Penulisan ulang yang dikonfigurasi
  5. Halaman 404 khusus
  6. Halaman 404 bawaan

Jika Anda menggunakan i18n rewrites , pencocokan tepat dan urutan prioritas penanganan 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 di direktori proyek Anda yang harus diterapkan ke proyek Firebase Anda.

Konfigurasi hosting default di 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 defaultnya adalah direktori bernama public , tetapi Anda dapat menentukan jalur direktori apa pun, asalkan ada di direktori proyek Anda.

Berikut ini adalah nama direktori default yang ditentukan untuk digunakan:

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

  // ...
}

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

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

  // ...
}

mengabaikan

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

Berikut ini adalah nilai default untuk diabaikan oleh file:

"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 menayangkan 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 ke file tersebut.

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 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, akan memicu Hosting untuk merespons dengan pengalihan ke URL tujuan yang ditentukan.

Inilah struktur dasar untuk atribut redirects . Contoh ini mengalihkan 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 pengalihan, di mana setiap aturan harus menyertakan bidang dalam tabel di bawah.

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 ditemukan kecocokan, maka 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, akan memicu Hosting untuk menerapkan pengalihan

destination

URL statis tempat browser harus membuat permintaan baru

URL ini bisa berupa jalur relatif atau absolut.

type

Kode tanggapan HTTPS

  • Gunakan jenis 301 untuk 'Dipindahkan Secara Permanen'
  • Gunakan jenis 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 pushState HTML5 untuk navigasi. Saat browser mencoba membuka jalur URL yang cocok dengan source yang ditentukan atau pola URL regex , 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, akan 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.

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 alih-alih 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 bisa 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 mengalihkan 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 wadah Cloud Run

Anda dapat menggunakan rewrites untuk mengakses wadah 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 wadah 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 wilayah 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 Tautan Dinamis domain khusus. Kunjungi dokumentasi Dynamic Links untuk informasi mendetail tentang penyiapan domain kustom untuk Dynamic Links .

  • Gunakan domain khusus Anda hanya untuk Tautan Dinamis

    "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 prefiks jalur domain kustom 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, 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 pengkodean.

Tentukan tajuk respons khusus khusus file dengan membuat atribut headers yang berisi larik objek tajuk. Di setiap objek, tentukan pola URL yang, jika cocok dengan jalur URL permintaan, akan 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.

Bidang Keterangan
headers
source (disarankan)
atau regex

Pola URL yang, jika cocok dengan URL permintaan awal, akan 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-header 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 selengkapnya tentang Cache-Control di bagian Hosting yang menjelaskan cara menyajikan konten dinamis dan menghosting layanan mikro. 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 akan melakukan pengalihan 301 ke jalur yang sama tetapi menghapus ekstensi .html .

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

"hosting": {
  // ...

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

Kontrol garis miring trailing

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

  • Jika true , Hosting mengalihkan URL untuk menambahkan garis miring.
  • Saat 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 gumpalan

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 adalah referensi yang lebih rinci, namun berikut penjelasan contoh yang digunakan di halaman ini:

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

  • ** — Mencocokkan file atau folder apa pun dalam subdirektori arbitrer

  • * — Hanya mencocokkan file dan folder di root direktori public

  • **/.* — Mencocokkan file apa pun yang diawali dengan . (biasanya file tersembunyi, seperti di folder .git ) di subdirektori arbitrer

  • **/node_modules/** — Mencocokkan file atau folder apa pun dalam subdirektori arbitrer dari folder node_modules , yang dapat dengan sendirinya berada dalam subdirektori arbitrer dari direktori public

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

Contoh konfigurasi Hosting Lengkap

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

  }
}