Buka konsol

Konfigurasi perilaku hosting

Dengan Firebase Hosting, Anda dapat mengonfigurasi perilaku hosting yang disesuaikan, termasuk halaman error, pengalihan, penulisan ulang, dan header. Anda juga dapat menentukan file mana yang akan digunakan dari direktori project ke project Firebase Anda.

Menentukan konfigurasi Firebase Hosting Anda di file firebase.json.

Temukan file firebase.json Anda di root direktori project. Firebase secara otomatis membuat file firebase.json ketika 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 Firebase Hosting.

Urutan prioritas respons Hosting

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

  1. Ruang nama yang dicadangkan yang dimulai dengan segmen lokasi /__/*
  2. Pengalihan yang dikonfigurasi
  3. Konten statis yang sama persis
  4. Penulisan ulang yang dikonfigurasi
  5. Halaman 404 khusus
  6. Halaman 404 default

Menentukan file yang akan diterapkan

Atribut default — public dan ignore — yang disertakan di file firebase.json default menentukan file mana di direktori project yang harus diterapkan ke project Firebase.

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

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

public

Wajib
Atribut public menentukan direktori mana yang akan diterapkan ke Firebase Hosting. Nilai default-nya adalah direktori bernama public, namun Anda dapat menentukan semua lokasi direktori selama lokasi tersebut ada di direktori project Anda.

Berikut adalah nama direktori default yang ditentukan untuk diterapkan:

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

  // ...
}

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

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

  // ...
}

ignore

Opsional
Atribut ignore menentukan file yang akan diabaikan pada penerapan. Ini bisa menggunakan pola glob yang sama seperti Git menangani .gitignore.

Berikut ini adalah nilai default untuk diabaikan file:

"hosting": {
  // ...

  "ignore": [
    "firebase.json",  // the Firebase configuration file (this file)
    "**/.*",  // 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 error 404 Not Found kustom saat pengguna mencoba mengakses halaman yang tidak ada.

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

Firebase Hosting akan menampilkan konten halaman 404.html kustom ini jika browser memicu error 404 Not Found pada domain atau subdomain Anda.

Mengonfigurasi pengalihan

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

Tentukan pengalihan URL dengan menyertakan atribut redirects dalam hosting di file firebase.json. Contoh:

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

Atribut redirects berisi array aturan pengalihan, di mana setiap aturan harus menyertakan:

  • source yang menentukan pola glob

  • destination, yang merupakan URL statis yang dapat berupa lokasi relatif atau absolut

  • type yang menentukan kode respons HTTP

Firebase Hosting membandingkan nilai source terhadap semua lokasi URL di awal setiap permintaan (sebelum browser menentukan apakah file atau folder ada di lokasi tersebut). Jika kecocokan ditemukan, server asal Firebase Hosting mengirimkan respons pengalihan HTTP yang menginformasikan browser untuk membuat permintaan baru di URL destination.

Akhirnya, nilai type menentukan kode respons HTTP spesifik yang ditayangkan dan dapat berupa 301 untuk 'Dipindahkan Secara Permanen' atau 302 untuk 'Ditemukan' (Pengalihan Sementara).

Mengambil segmen URL untuk pengalihan

Opsional
Terkadang, Anda mungkin perlu mengambil segmen tertentu dari URL source pengalihan, lalu menggunakan kembali segmen ini di URL destination pengalihan.

Anda dapat mengambil segmen ini dengan menyertakan awalan : untuk mengidentifikasi segmen. Jika Anda juga perlu mengambil lokasi URL yang tersisa setelah segmen, sertakan * segera setelah segmen. Contoh:

"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 caputured by the "source" value
    "type": 301
  } ]
}

Mengonfigurasi penulisan ulang

Opsional
Gunakan penulisan ulang guna menampilkan konten yang sama untuk beberapa URL. Penulisan ulang sangat berguna dengan pencocokan pola karena Anda bisa 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 URL source yang ditetapkan, browser tersebut akan diberi konten file di URL destination.

Tentukan penulisan ulang URL dengan memasukkan atribut rewrites dalam hosting di file firebase.json Anda. Contoh:

"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"
  }, {
    // Excludes specified pathways from rewrites
    "source": "!/@(js|css)/**",
    "destination": "/index.html"
  } ]
}

Atribut rewrites berisi array aturan penulisan ulang, di mana setiap aturan harus menyertakan:

  • source yang menentukan pola glob

  • destination, yang merupakan file lokal yang harus ada

Firebase Hosting hanya menerapkan aturan penulisan ulang jika file atau direktori tidak ada di source yang ditentukan. Ketika aturan dipicu, browser mengembalikan konten aktual dari file destination yang ditentukan, bukan pengalihan HTTP.

Permintaan langsung ke fungsi

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

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

"hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben"
  } ]
}

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

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

  • Semua domain kustom yang terhubung: custom-domain/bigben

Permintaan langsung ke container Cloud Run

Anda dapat menggunakan rewrites untuk mengakses container Cloud Run dari URL Firebase Hosting. Contoh berikut adalah kutipan dari penayangan 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": {
 // ...

 // Add the "rewrites" attribute within "hosting"
 "rewrites": [ {
   "source": "/helloworld",
   "run": {
     "serviceId": "helloworld",  // "service name" (from when you <a href="#deploy">deployed the container image)</a>
     "region": "us-central1"     // optional (if omitted, default is us-central1)
   }
 } ]
}

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

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

  • Semua domain kustom yang terhubung: custom-domain/helloworld

Anda dapat menggunakan rewrites untuk membuat Dynamis Links domain kustom. Buka dokumentasi Dynamic Links untuk melihat informasi terperinci tentang setelan domain kustom untuk Dynamic Links.

Misalnya, Anda dapat:

  • Gunakan domain Anda hanya untuk Dynamis Links:

    "hosting": {
      // ...
    
      "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/**",  // Dynamic Links start with "https://<your-domain>/"
        "dynamicLinks": true
      } ]
    }
    
  • Tentukan awalan lokasi yang ingin Anda gunakan untuk Dynamis Links:

    "hosting": {
      // ...
    
      "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/promos/**",  // Dynamic Links can start with "https://<your-domain>/promos/"
        "dynamicLinks": true
      }, {
        "source": "/links/share/**",  // Dynamic Links can start with "https://<your-domain>/links/share/"
        "dynamicLinks": true
      } ]
    }
    

Mengonfigurasi Dynamis Links dalam file firebase.json memerlukan:

  • Atribut appAssociation yang disetel ke AUTO.

    • Default untuk appAssociation adalah AUTO jika Anda tidak menyertakan atribut dalam konfigurasi.
    • Dengan atribut ini disetel ke AUTO, Hosting membuat file assetlinks.json dan apple-app-site-association secara dinamis saat diminta.
  • Atribut rewrites untuk Dynamic Links yang berisi array aturan penulisan ulang, di mana setiap aturan harus menyertakan:

    • source yang menetapkan lokasi yang ingin Anda gunakan untuk Dynamis Links

      • Tidak seperti aturan yang menulis ulang lokasi ke URL, aturan penulisan ulang Dynamic Link tidak dapat berisi ekspresi reguler.
    • Atribut dynamicLinks disetel ke true

Mengonfigurasikan header

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

Tentukan header respons custom spesifik untuk file dengan menyertakan atribut headers dalam hosting di file firebase.json Anda. Contoh:

"hosting": {
  // ...

  // Add the "headers" attribute within "hosting"
  "headers": [ {
    // Specifies 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"
    } ]
  }, {
    // Sets the cache header for 404 pages to cache for 5 minutes
    "source": "404.html",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=300"
    } ]
  } ]
}

Atribut headers berisi array definisi, di mana setiap definisi harus menyertakan:

  • Nilai source yang cocok dengan Hosting terhadap lokasi permintaan asli, terlepas dari aturan penulisan ulang.

  • Array dari (sub-)headers yang diterapkan oleh Hosting ke lokasi permintaan; setiap array sub-header harus menyertakan key dan value yang ditentukan.

Anda dapat mempelajari Cache-Control lebih lanjut di bagian Hosting yang menjelaskan penayangan konten dinamis dan layanan hosting microservice

Anda juga dapat mempelajari header CORS lebih lanjut.

Mengontrol ekstensi .html

Opsional
Dengan atribut cleanUrls, Anda dapat mengontrol apakah URL harus menyertakan ekstensi .html atau tidak.

Saat true, Hosting melepas ekstensi .html secara otomatis dari URL file yang diupload. Jika ekstensi .html ditambahkan di permintaan, Hosting melakukan pengalihan 301 ke lokasi yang sama tapi menghilangkan ekstensi .html.

Tentukan penyertaan ekstensi .html dengan menyertakan atribut cleanUrls dalam hosting di file firebase.json. Contoh:

"hosting": {
  // ...

  // Add the "cleanUrls" attribute within "hosting"
  "cleanUrls": true
}

Mengontrol garis miring penutup

Opsional
Dengan atribut trailingSlash, Anda dapat mengontrol apakah URL harus menyertakan garis miring penutup atau tidak.

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

Tentukan penyertaan garis miring penutup dengan menyertakan atribut trailingSlash dalam hosting di file firebase.json Anda. Contoh:

"hosting": {
  // ...

  // Add the "trailingSlash" attribute within "hosting"
  "trailingSlash": false
}

Pencocokan pola glob

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

  • firebase.json — Hanya mencocokkan file firebase.json di root dari direktori public

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

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

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

  • **/node_modules/** — Mencocokkan file atau folder apa saja di sub-direktori arbitrer dari folder node_modules, yang dapat berada di sub-direktori arbitrer dari direktori public

  • **/*.@(jpg|jpeg|gif|png) — Mencocokkan file di sub-direktori arbitrer yang berakhiran dengan salah satu dari berikut: .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",

  }
}