Konfigurasi perilaku hosting

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

Menentukan konfigurasi Firebase Hosting Anda di file firebase.json.

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

Urutan prioritas respons Hosting

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

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

Menentukan file yang akan diterapkan

Atribut default — public dan ignore — disertakan dalam file firebase.json default menentukan jenis file di direktori project yang harus di-deploy ke project Firebase.

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

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

public

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

Berikut adalah nama direktori default yang ditentukan untuk di-deploy:

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

  // ...
}

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

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

  // ...
}

ignore

Opsional
Atribut ignore menentukan file yang akan diabaikan saat di-deploy. Atribut ini bisa menggunakan pola glob yang sama seperti Git menangani .gitignore.

Berikut ini adalah nilai default yang dapat diabaikan oleh 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
  ]
}

Menyesuaikan 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 tersebut.

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

Mengonfigurasi pengalihan

Opsional
Gunakan pengalihan URL untuk mencegah munculnya link rusak ketika Anda memindahkan halaman atau perlu mempersingkat URL. Misalnya, Anda dapat mengalihkan 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 dan 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 tersebut. Jika Anda juga perlu mengambil lokasi URL yang tersisa di belakang segmen itu, langsung sertakan * di belakang segmen itu. 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

    Optional
    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 menyertakan atribut rewrites dalam hosting di file firebase.json. 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 menampilkan 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 mengalihkan semua permintaan dari /bigben halaman 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 men-deploy 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 Dynamic Links domain kustom. Buka dokumentasi Dynamic Links untuk mengetahui informasi terperinci seputar penyiapan domain kustom untuk Dynamic Links.

    Misalnya, Anda dapat:

    • Menggunakan domain 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": "/**",  // Dynamic Links start with "https://<your-domain>/"
          "dynamicLinks": true
        } ]
      }
      
    • Menentukan awalan lokasi yang ingin Anda gunakan 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/**",  // 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 Dynamic Links di file firebase.json Anda memerlukan:

    • Atribut appAssociation yang disetel ke AUTO.

    • Default untuk appAssociation adalah AUTO jika Anda tidak menyertakan atribut pada konfigurasi.
    • Saat 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 Dynamic Links

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