Membuat prototipe dan menguji aplikasi web dengan Emulator Firebase Hosting

Sebelum mulai membuat prototipe dan menguji aplikasi web dengan emulator Firebase Hosting, pastikan Anda memahami keseluruhan alur kerja Firebase Local Emulator Suite dan menginstal serta mengonfigurasi Local Emulator Suite dan tinjau perintah CLI-nya.

Anda juga harus memahami fitur dan alur kerja implementasi untuk Firebase Hosting. Mulailah dengan pengantar Firebase Hosting.

Apa yang dapat saya lakukan dengan emulator Firebase Hosting?

Emulator Firebase Hosting menyediakan emulasi lokal layanan fidelitas tinggi yang menyediakan banyak fungsi yang ditemukan di Hosting produksi. Emulator Hosting memungkinkan Anda:

  • Membuat prototipe situs statis dan aplikasi web tanpa menimbulkan biaya penyimpanan atau akses
  • Membuat prototipe, menguji, dan men-debug fungsi HTTPS sebelum men-deploy ke situs Hosting
  • Uji situs dan aplikasi web dalam alur kerja continuous integration yang berada dalam container.

Memilih project Firebase

Firebase Local Emulator Suite mengemulasi produk untuk satu project Firebase.

Untuk memilih project yang akan digunakan, sebelum memulai emulator, jalankan firebase use di CLI di direktori kerja Anda. Atau, Anda dapat meneruskan flag --project ke setiap perintah emulator.

Local Emulator Suite mendukung emulasi project Firebase sungguhan dan project demo.

Jenis project Fitur Penggunaan dengan emulator
Sungguhan

Project Firebase sungguhan adalah project yang Anda buat dan konfigurasikan (kemungkinan besar melalui Firebase console).

Project sungguhan memiliki resource live, seperti instance database, bucket penyimpanan, fungsi, atau resource lain yang Anda siapkan untuk project Firebase tersebut.

Jika mengerjakan project Firebase sungguhan, Anda dapat menjalankan emulator untuk salah satu atau semua produk yang didukung.

Untuk produk yang tidak diemulasi, aplikasi dan kode Anda akan berinteraksi dengan resource live (instance database, bucket penyimpanan, fungsi, dsb.).

Demo

Project Firebase demo tidak memiliki konfigurasi Firebase sungguhan dan tidak memiliki resource live. Project ini biasanya diakses melalui codelab atau tutorial lainnya.

Project ID untuk project demo memiliki awalan demo-.

Jika menggunakan project Firebase demo, aplikasi dan kode Anda hanya berinteraksi dengan emulator. Jika aplikasi Anda mencoba berinteraksi dengan resource yang tidak dijalankan dengan emulator, kode tersebut akan gagal.

Jika memungkinkan, sebaiknya gunakan project demo. Manfaatnya meliputi:

  • Penyiapan yang lebih mudah karena Anda dapat menjalankan emulator tanpa perlu membuat project Firebase
  • Keamanan yang lebih tangguh karena jika kode Anda tidak sengaja memanggil resource yang tidak diemulasi (production), tidak akan terjadi perubahan data, penggunaan, dan penagihan
  • Dukungan offline yang lebih baik karena Anda tidak perlu mengakses internet untuk mendownload konfigurasi SDK.

Alur kerja pembuatan prototipe inti

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.

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

Membuat token autentikasi untuk alur kerja continuous integration

Jika alur kerja continuous integration Anda mengandalkan Firebase Hosting, Anda harus login menggunakan token agar dapat menjalankan firebase emulators:exec. Emulator lain tidak memerlukan login.

Untuk membuat token, jalankan firebase login:ci di lingkungan lokal Anda. Hal ini tidak boleh dilakukan dari sistem CI. Ikuti petunjuk untuk melakukan autentikasi. Anda hanya perlu melakukan langkah ini sekali per project, karena token akan bersifat valid di seluruh build. Token harus diperlakukan seperti sandi. Pastikan token dirahasiakan.

Jika lingkungan CI memungkinkan Anda menentukan variabel lingkungan yang dapat digunakan dalam skrip build, cukup buat variabel lingkungan bernama FIREBASE_TOKEN, dengan nilai berupa string token akses. Firebase CLI akan otomatis mengambil variabel lingkungan FIREBASE_TOKEN dan emulator akan dimulai dengan benar.

Sebagai upaya terakhir, Anda cukup menyertakan token dalam skrip build, tetapi pastikan pihak yang tidak tepercaya tidak dapat mengaksesnya. Untuk pendekatan hard code ini, Anda dapat menambahkan --token "YOUR_TOKEN_STRING_HERE" ke perintah firebase emulators:exec.

Apa selanjutnya?