Sebelum men-deploy ke situs aktif Anda, sebaiknya lihat dan uji perubahan Anda. Firebase Hosting memungkinkan Anda untuk melihat dan menguji perubahan secara lokal dan berinteraksi dengan sumber daya proyek backend yang ditiru. Jika Anda memerlukan rekan tim untuk melihat dan menguji perubahan Anda, Hosting dapat membuat URL pratinjau sementara yang dapat dibagikan untuk situs Anda. Kami bahkan mendukung integrasi GitHub untuk diterapkan dari pull request.
Sebelum kamu memulai
Selesaikan langkah-langkah yang tercantum di halaman Memulai Hosting , khususnya tugas-tugas berikut:
- Pasang atau perbarui Firebase CLI ke versi terbarunya.
- Hubungkan direktori proyek lokal (berisi konten aplikasi Anda) ke proyek Firebase Anda.
Secara opsional, Anda dapat menerapkan konten dan konfigurasi Hosting aplikasi, tetapi itu bukan prasyarat untuk langkah-langkah di halaman ini.
Langkah 1: Uji secara lokal
Jika Anda membuat iterasi cepat atau ingin aplikasi berinteraksi dengan sumber daya project backend yang diemulasi, Anda dapat menguji konten dan konfigurasi Hosting secara lokal. Saat menguji secara lokal, Firebase menyajikan aplikasi web Anda di URL yang dihosting secara lokal.
Hosting adalah bagian dari Firebase Local Emulator Suite , yang memungkinkan aplikasi Anda berinteraksi dengan konten dan konfigurasi Hosting yang ditiru , serta secara opsional sumber daya proyek yang ditiru (fungsi, database, dan aturan).
(Opsional) Secara default, aplikasi yang dihosting secara lokal akan berinteraksi dengan sumber daya proyek nyata , bukan ditiru , (fungsi, basis data, aturan, dll.). Sebagai gantinya, Anda bisa menghubungkan aplikasi secara opsional untuk menggunakan sumber daya proyek teremulasi apa pun yang telah Anda konfigurasikan. Pelajari lebih lanjut: Basis Data Waktu Nyata | Cloud Firestore | Fungsi Awan
Dari root direktori proyek lokal Anda, jalankan perintah berikut:
firebase emulators:start
Buka aplikasi web Anda di URL lokal yang dikembalikan oleh CLI (biasanya
http://localhost:5000
).Untuk memperbarui URL lokal dengan perubahan, segarkan browser Anda.
Tes dari perangkat lokal lainnya
Secara default, emulator hanya menanggapi permintaan dari localhost
. Artinya, Anda akan dapat mengakses konten yang dihosting dari browser web komputer, tetapi tidak dari perangkat lain di jaringan Anda. Jika Anda ingin menguji dari perangkat lokal lain, konfigurasikan firebase.json
Anda seperti ini:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Saat menggunakan firebase serve
, aplikasi Anda berinteraksi dengan backend yang diemulasikan untuk konten dan konfigurasi Hosting Anda (dan fungsi opsional) tetapi backend Anda yang sebenarnya untuk semua sumber daya proyek lainnya.
Dari root direktori proyek lokal Anda, jalankan perintah berikut:
firebase serve --only hosting
Buka aplikasi web Anda di URL lokal yang dikembalikan oleh CLI (biasanya
http://localhost:5000
).Untuk memperbarui URL lokal dengan perubahan, segarkan browser Anda.
Gunakan firebase serve
untuk menguji dari perangkat lokal lainnya
Secara default, firebase serve
hanya menanggapi permintaan dari localhost
. Artinya, Anda akan dapat mengakses konten yang dihosting dari browser web komputer, tetapi tidak dari perangkat lain di jaringan Anda. Jika Anda ingin menguji dari perangkat lokal lain, gunakan flag --host
, seperti:
firebase serve --host 0.0.0.0 // accepts requests to any host
Langkah 2: Pratinjau dan bagikan
Jika Anda ingin orang lain melihat perubahan pada aplikasi web Anda sebelum ditayangkan, Anda dapat menggunakan saluran pratinjau.
Setelah Anda men-deploy ke saluran pratinjau, Firebase menayangkan aplikasi web Anda di "URL pratinjau", yang merupakan URL sementara yang dapat dibagikan. Saat menggunakan URL pratinjau, aplikasi web Anda berinteraksi dengan backend asli Anda untuk semua sumber daya proyek.
Perhatikan bahwa meskipun URL pratinjau sulit ditebak (karena berisi hash acak), URL tersebut bersifat publik. Jadi, siapapun yang mengetahui URL tersebut bisa mengaksesnya.
Dari root direktori proyek lokal Anda, jalankan perintah berikut:
firebase hosting:channel:deploy CHANNEL_ID
Ganti CHANNEL_ID dengan string tanpa spasi (misalnya,
feature_mission-2-mars
). ID ini akan digunakan untuk membuat URL pratinjau yang terkait dengan saluran pratinjau.Buka aplikasi web Anda di URL pratinjau yang dikembalikan oleh CLI. Ini akan terlihat seperti ini:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Untuk memperbarui URL pratinjau Anda dengan perubahan, jalankan kembali perintah yang sama. Pastikan untuk menentukan
CHANNEL_ID
yang sama dalam perintah.
Pelajari tentang mengelola saluran pratinjau , termasuk cara menyetel kedaluwarsa saluran.
Firebase Hosting mendukung Tindakan GitHub yang secara otomatis membuat dan memperbarui URL pratinjau saat Anda melakukan perubahan pada pull request. Pelajari cara menyiapkan dan menggunakan Tindakan GitHub ini .
Langkah 3: Terapkan secara langsung
Saat Anda siap untuk berbagi perubahan dengan dunia, terapkan konten dan konfigurasi Hosting Anda ke saluran langsung Anda. Firebase menawarkan beberapa opsi berbeda untuk langkah ini bergantung pada kasus penggunaan Anda (lihat opsi di bawah).
Opsi 1: Kloning dari saluran pratinjau ke saluran langsung Anda
Opsi ini memberikan keyakinan bahwa Anda men-deploy ke saluran langsung konten dan konfigurasi persis seperti yang Anda uji di saluran pratinjau. Pelajari lebih lanjut tentang versi kloning .
Dari direktori mana pun, jalankan perintah berikut:
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
Ganti setiap placeholder dengan yang berikut:
SOURCE_SITE_ID dan TARGET_SITE_ID : Ini adalah ID situs Hosting yang berisi saluran.
- Untuk situs Hosting default Anda, gunakan project ID Firebase Anda.
- Anda dapat menentukan situs yang berada di proyek Firebase yang sama atau bahkan di proyek Firebase yang berbeda.
SOURCE_CHANNEL_ID : Ini adalah pengenal untuk saluran yang saat ini menayangkan versi yang ingin Anda terapkan ke saluran langsung Anda.
- Untuk saluran langsung, gunakan
live
sebagai ID saluran.
- Untuk saluran langsung, gunakan
Lihat perubahan Anda (langkah berikutnya).
Opsi 2: Terapkan dari direktori proyek lokal Anda ke saluran langsung Anda
Opsi ini memberi Anda fleksibilitas untuk menyesuaikan konfigurasi khusus untuk saluran langsung atau menerapkannya meskipun Anda belum pernah menggunakan saluran pratinjau.
Dari root direktori proyek lokal Anda, jalankan perintah berikut:
firebase deploy --only hosting
Lihat perubahan Anda (langkah berikutnya).
Langkah 4: Lihat perubahan Anda di situs langsung Anda
Kedua opsi di atas menerapkan konten dan konfigurasi Hosting Anda ke situs berikut:
Subdomain yang disediakan oleh Firebase untuk situs Hosting default Anda dan situs Hosting tambahan apa pun:
SITE_ID .web.app
(sepertiPROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(sepertiPROJECT_ID .firebaseapp.com
)Semua domain khusus yang telah Anda sambungkan ke situs Hosting Anda
Untuk membatasi penerapan ke situs Hosting tertentu, tentukan target penerapan dalam perintah CLI Anda.
Lainnya menyebarkan kegiatan dan informasi
Tambahkan komentar untuk penerapan
Secara opsional, Anda dapat menambahkan komentar ke penerapan. Komentar ini akan ditampilkan bersama informasi penerapan lainnya di dasbor Hosting di konsol Firebase. Sebagai contoh:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Tambahkan tugas skrip pra-penerapan dan pasca-penerapan
Secara opsional, Anda dapat menghubungkan skrip shell ke perintah firebase deploy
untuk melakukan tugas pra-deployment atau postdeployment. Misalnya, postdeploy hook dapat memberi tahu administrator tentang penyebaran konten situs baru. Lihat dokumentasi Firebase CLI untuk detail lebih lanjut.
Caching konten yang diterapkan
Saat permintaan dibuat untuk konten statis , Firebase Hosting secara otomatis meng-cache konten di CDN. Jika Anda menerapkan ulang konten situs, Firebase secara otomatis menghapus semua konten statis yang di-cache di seluruh CDN sehingga permintaan baru menerima konten baru Anda.
Perhatikan bahwa Anda dapat mengonfigurasi caching konten dinamis .
Melayani melalui HTTPS
Pastikan semua resource eksternal yang tidak dihosting di Firebase Hosting dimuat melalui SSL (HTTPS), termasuk skrip eksternal apa pun. Sebagian besar browser tidak mengizinkan pengguna memuat "konten campuran" (lalu lintas SSL dan non-SSL).
Langkah selanjutnya
Integrasikan dengan GitHub dan iterasi konten pratinjau Anda dengan menyiapkan GitHub Action .
Pelajari tentang kemampuan hosting lebih lanjut:
Lihat dokumentasi lengkap untuk Firebase CLI .
Bersiaplah untuk meluncurkan aplikasi Anda:
- Siapkan peringatan anggaran untuk proyek Anda di Google Cloud Console.
- Pantau dasbor Penggunaan dan penagihan di Firebase console untuk mendapatkan gambaran keseluruhan tentang penggunaan proyek Anda di berbagai layanan Firebase. Anda juga dapat mengunjungi dasbor Penggunaan Hosting untuk informasi penggunaan yang lebih mendetail.
- Tinjau daftar periksa peluncuran Firebase .