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:Tampilkan konten yang sama untuk beberapa URL. Belajar bagaimana.
Sajikan fungsi atau akses wadah Cloud Run dari URL Hosting. Pelajari caranya: function atau container .
Buat Tautan Dinamis domain khusus. Belajar bagaimana.
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:
- Ruang nama yang dicadangkan yang dimulai dengan segmen jalur
/__/*
- Pengalihan yang dikonfigurasi
- Konten statis yang sama persis
- Penulisan ulang yang dikonfigurasi
- Halaman 404 khusus
- 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
} ]
}
"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
} ]
}
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
|
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.
Jika Anda menggunakan bidang source
(yaitu, menentukan gumpalan untuk pola URL), Anda dapat mengambil segmen dengan menyertakan awalan :
untuk mengidentifikasi segmen. Jika Anda juga perlu mengambil jalur URL yang tersisa setelah segmen, sertakan *
tepat setelah segmen. Sebagai 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 captured by the "source" value "type": 301 } ] }
Jika Anda menggunakan bidang regex
(yaitu, menentukan ekspresi reguler RE2 untuk pola URL), Anda dapat menangkap segmen menggunakan grup penangkap RE2 bernama atau tidak bernama. Grup tangkapan bernama dapat digunakan di bidang destination
dengan :
awalan, sedangkan grup tangkapan tanpa nama dapat dirujuk oleh indeks numeriknya dalam nilai regex
, diindeks dari 1. Misalnya:
"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 } ] }
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"
} ]
}
"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" } ] }
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
danPROJECT_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
danPROJECT_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
Buat Tautan Dinamis domain khusus
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
| |
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": "*"
} ]
} ]
}
"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" } ] } ] }
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 | ||
array (sub-) headers | Header khusus yang diterapkan Hosting ke jalur permintaan Setiap sub-header harus menyertakan pasangan | ||
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 filefirebase.json
di root direktoripublic
**
— Mencocokkan file atau folder apa pun dalam subdirektori arbitrer*
— Hanya mencocokkan file dan folder di root direktoripublic
**/.*
— 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 foldernode_modules
, yang dapat dengan sendirinya berada dalam subdirektori arbitrer dari direktoripublic
**/*.@(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",
}
}