Menguji aplikasi web secara lokal, membagikan perubahan dengan orang lain, lalu men-deploy ke situs live

Sebelum men-deploy ke situs live, sebaiknya Anda melihat dan menguji perubahan. Firebase Hosting memungkinkan Anda melihat dan menguji perubahan secara lokal serta berinteraksi dengan resource project backend yang diemulasikan. Jika Anda memerlukan rekan tim untuk melihat dan menguji perubahan, Hosting dapat membuat URL pratinjau sementara yang dapat dibagikan untuk situs Anda. Kami bahkan mendukung integrasi GitHub untuk melakukan deployment dari permintaan pull.

Sebelum memulai

Selesaikan langkah-langkah yang tercantum di halaman Memulai Hosting, khususnya tugas berikut:

1. Menginstal atau mengupdate Firebase CLI ke versi terbaru.
2. Menghubungkan direktori project lokal (berisi konten aplikasi) ke project Firebase.

Anda dapat men-deploy konten dan konfigurasi Hosting untuk aplikasi Anda, tetapi itu bukan prasyarat untuk langkah-langkah di halaman ini.

Sebaiknya siapkan project Firebase terpisah untuk menguji dan mengembangkan aplikasi web Anda. Situs produksi Anda perlu dilindungi dari perubahan yang tidak disengaja pada resource project (database, penyimpanan, aturan, fungsi, dll.) selama pengujian dan pengembangan.

Langkah 1: Uji secara lokal

Jika Anda melakukan iterasi cepat atau ingin aplikasi Anda berinteraksi dengan resource project backend teremulasi, Anda dapat menguji konten dan konfigurasi Hosting secara lokal. Saat melakukan pengujian secara lokal, Firebase akan menyalurkan 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 teremulasi, serta, jika diinginkan, dengan resource project teremulasi (fungsi, database, dan aturan).

1. (Opsional) Secara default, aplikasi yang dihosting secara lokal akan berinteraksi dengan resource project sebenarnya, bukan resource project teremulasi (fungsi, database, aturan, dll.). Namun, jika ingin, Anda dapat menghubungkan aplikasi agar menggunakan resource project teremulasi yang telah dikonfigurasi. Pelajari lebih lanjut: Realtime Database | Cloud Firestore | Cloud Functions

2. Dari root direktori project lokal, jalankan perintah berikut:

   firebase emulators:start

3. Buka aplikasi web di URL lokal yang ditampilkan oleh CLI (biasanya http://localhost:5000).

4. Untuk memperbarui URL lokal dengan perubahan, muat ulang browser.

Menguji dari perangkat lokal lainnya

Secara default, emulator hanya merespons permintaan dari localhost. Artinya, Anda akan dapat mengakses konten yang dihosting dari browser web komputer Anda, tetapi tidak dari perangkat lain di jaringan Anda. Jika ingin menjalankan pengujian dari perangkat lokal lainnya, konfigurasi firebase.json seperti berikut:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

Menjalankan pengujian secara lokal menggunakan firebase serve (tidak direkomendasikan)

firebase serve tidak direkomendasikan. Sebagai gantinya, jalankan pengujian secara lokal dengan Firebase Local Emulator Suite.

Saat menggunakan firebase serve, aplikasi Anda berinteraksi dengan backend teremulasi untuk konten dan konfigurasi Hosting (dan fungsi, secara opsional). Namun, untuk semua resource project lainnya, aplikasi Anda berinteraksi dengan backend sebenarnya.

1. Dari root direktori project lokal, jalankan perintah berikut:

   firebase serve --only hosting

   Catatan: Dengan menjalankan perintah ini menggunakan flag --only hosting, Anda hanya mengemulasi konten dan konfigurasi Hosting. Jika Anda juga ingin mengemulasikan fungsi, jalankan perintah ini dengan flag --only hosting,functions.

2. Buka aplikasi web di URL lokal yang ditampilkan oleh CLI (biasanya http://localhost:5000).

3. Untuk memperbarui URL lokal dengan perubahan, muat ulang browser.

Menggunakan firebase serve untuk menjalankan pengujian dari perangkat lokal lainnya

Secara default, firebase serve hanya merespons permintaan dari localhost. Artinya, Anda akan dapat mengakses konten yang dihosting dari browser web komputer Anda, tetapi tidak dari perangkat lain di jaringan Anda. Jika Anda ingin melakukan pengujian dari perangkat lokal lainnya, gunakan flag --host, seperti ini:

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, gunakan saluran pratinjau.

Setelah Anda melakukan deployment ke saluran pratinjau, Firebase akan menyalurkan aplikasi web Anda di "URL pratinjau", yaitu URL sementara yang dapat dibagikan. Saat menggunakan URL pratinjau, aplikasi web Anda berinteraksi dengan backend yang sebenarnya untuk semua resource project (dengan pengecualian untuk fungsi "yang disematkan" dalam konfigurasi penulisan ulang).

Perhatikan bahwa meskipun URL pratinjau sulit ditebak (karena berisi hash acak), URL ini bersifat publik. Jadi, siapa saja yang mengetahui URL ini dapat mengaksesnya.

1. Dari root direktori project lokal, 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.

   Catatan: Anda tidak perlu meneruskan flag --only hosting karena perintah ini hanya men-deploy konten dan konfigurasi Hosting (beserta fungsi yang "disematkan" dalam konfigurasi penulisan ulang Anda). Aplikasi yang disalurkan di URL pratinjau selalu berinteraksi dengan resource project yang sebenarnya (kecuali untuk fungsi yang "disematkan" dan di-deploy).

2. Buka aplikasi web di URL pratinjau yang ditampilkan oleh CLI. URL itu akan terlihat seperti ini: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

3. Untuk memperbarui URL pratinjau dengan perubahan, jalankan kembali perintah yang sama. Pastikan untuk menentukan CHANNEL_ID yang sama dalam perintah ini.

Pelajari cara mengelola saluran pratinjau, termasuk cara menetapkan akhir masa berlaku saluran.

Firebase Hosting mendukung GitHub Action yang otomatis membuat dan memperbarui URL pratinjau saat Anda meng-commit perubahan pada permintaan pull. Pelajari cara menyiapkan dan menggunakan GitHub Action ini.

Langkah 3: Deploy ke saluran live

Setelah siap membagikan perubahan Anda kepada dunia, deploy konten dan konfigurasi Hosting ke saluran live Anda. Firebase menawarkan dua opsi untuk langkah ini, bergantung pada kasus penggunaan Anda (lihat opsi di bawah).

Opsi 1: Meng-clone dari saluran pratinjau ke saluran live

Opsi ini memberikan keyakinan bahwa Anda men-deploy konten dan konfigurasi yang sama persis dengan yang Anda uji di saluran pratinjau. Pelajari lebih lanjut cara meng-clone versi.

1. Jalankan perintah berikut dari direktori mana saja:

   firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

   Ganti setiap placeholder dengan berikut ini:

   • SOURCE_SITE_ID dan TARGET_SITE_ID: Ini adalah ID situs Hosting yang berisi saluran.

     • Untuk situs Hosting default, gunakan project ID Firebase Anda.
     • Anda dapat menentukan situs yang ada di project Firebase yang sama atau bahkan di project Firebase berbeda.

   • SOURCE_CHANNEL_ID: Ini adalah ID saluran yang saat ini menyalurkan versi yang ingin Anda deploy ke saluran live.

     • Untuk saluran live, gunakan live sebagai ID saluran.

2. Lihat perubahan Anda (langkah berikutnya).

Opsi 2: Men-deploy dari direktori project lokal ke saluran live

Opsi ini memberi Anda fleksibilitas untuk menyesuaikan konfigurasi khusus untuk saluran live, atau untuk melakukan deployment sekalipun Anda belum menggunakan saluran pratinjau.

1. Dari root direktori project lokal, jalankan perintah berikut:

   firebase deploy --only hosting

   Catatan: Dengan menjalankan perintah ini menggunakan flag --only hosting, berarti Anda hanya men-deploy konten dan konfigurasi Hosting (beserta fungsi "yang disematkan" dalam konfigurasi penulisan ulang Anda). Jika juga ingin men-deploy resource atau konfigurasi project lainnya (seperti fungsi atau aturan Cloud Storage yang dipicu backend), jalankan perintah ini dengan daftar yang dipisahkan koma dalam flag tersebut (misalnya, --only hosting,storage).

2. Lihat perubahan Anda (langkah berikutnya).

Catatan: Untuk project paket Spark, Firebase memblokir upload dan menghosting jenis file tertentu yang dapat dieksekusi untuk Windows (file dengan .exe, ekstensi .dll dan .bat), Android (ekstensi .apk) dan Apple (ekstensi .ipa) oleh Cloud Storage for Firebase dan Firebase Hosting. Kebijakan ini dibuat untuk mencegah penyalahgunaan di platform kami. Project dengan paket Blaze tidak terpengaruh. Untuk informasi selengkapnya, lihat FAQ ini.

Langkah 4: Lihat perubahan di situs live

Kedua opsi di atas men-deploy konten dan konfigurasi Hosting Anda ke situs berikut:

• Subdomain yang disediakan Firebase untuk situs Hosting default dan situs Hosting tambahan apa pun:
  SITE_ID.web.app (seperti PROJECT_ID.web.app)
  SITE_ID.firebaseapp.com (seperti PROJECT_ID.firebaseapp.com)

• Setiap domain kustom yang terhubung ke situs Hosting Anda

Untuk membatasi deployment ke situs Hosting tertentu, tentukan target deployment dalam perintah CLI.

Aktivitas dan informasi deployment lainnya

Menambahkan komentar untuk deployment

Jika ingin, Anda dapat menambahkan komentar ke deployment. Komentar ini akan ditampilkan bersama informasi deployment lainnya di dasbor Hosting di Firebase console. Contoh:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Menambahkan tugas dengan skrip untuk pra-deploy dan pasca-deploy

Anda dapat secara opsional menghubungkan skrip shell ke perintah firebase deploy untuk melakukan tugas pra-deploy atau pasca-deploy. Misalnya, hook pasca-deploy dapat memberi tahu administrator tentang deployment konten situs baru. Baca dokumentasi Firebase CLI untuk mengetahui detail selengkapnya.

Menyimpan konten yang di-deploy ke dalam cache

Ketika permintaan dibuat untuk konten statis, Firebase Hosting secara otomatis meng-cache konten di CDN. Jika Anda men-deploy ulang konten situs, Firebase akan menghapus semua konten statis yang disimpan dalam cache di seluruh CDN secara otomatis, sehingga permintaan baru menerima konten baru Anda.

Perlu diperhatikan bahwa Anda dapat mengonfigurasi penyimpanan konten dinamis dalam cache.

Menayangkan melalui HTTPS

Firebase Hosting bersifat khusus SSL, yang berarti konten hanya akan ditayangkan 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" (traffic SSL dan non-SSL).

Menghapus file

Di Firebase Hosting, cara utama untuk menghapus file yang dipilih dari situs yang telah di-deploy adalah dengan menghapus file secara lokal, lalu men-deploy ulang.

Langkah berikutnya

• Integrasikan dengan GitHub dan iterasi konten yang telah dipratinjau dengan menyiapkan GitHub Action.

• Pelajari kemampuan hosting lainnya:

  • Mengonfigurasi perilaku hosting
  • Menghubungkan domain kustom
  • Menayangkan konten dinamis dan menghosting microservice

• Baca dokumentasi lengkap untuk Firebase CLI.

• Bersiap meluncurkan aplikasi Anda:

  • Siapkan pemberitahuan anggaran untuk project Anda di konsol Google Cloud.
  • Pantau dasbor Usage and billing di Firebase console untuk mendapatkan gambaran keseluruhan penggunaan project Anda di berbagai layanan Firebase. Anda juga dapat membuka dasbor Usage Hosting untuk mengetahui informasi penggunaan yang lebih mendetail.
  • Periksa checklist peluncuran Firebase.