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.

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

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.

  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

  2. Lihat perubahan Anda (langkah berikutnya).

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

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