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 diemulasi. 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 men-deploy dari pull permintaan.

Sebelum memulai

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

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

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

Langkah 1: Uji secara lokal

Jika Anda melakukan iterasi cepat atau ingin aplikasi Anda berinteraksi dengan resource project backend yang diemulasi, 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 Hosting emulasi dan konfigurasi, serta secara opsional resource project teremulasi (fungsi, {i>database<i}, 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 Anda siap membagikan perubahan Anda dengan dunia, deploy Hosting Anda dan konfigurasi pada channel 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 Hosting situs yang berisi saluran tersebut.

      • 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 Anda dan semua Hosting situs tambahan:
    SITE_ID.web.app (seperti PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (seperti PROJECT_ID.firebaseapp.com)

  • Setiap domain kustom yang telah Anda hubungkan Hosting situs Anda

Untuk membatasi deployment ke situs Hosting tertentu, menentukan target deploy di perintah CLI Anda.

Aktivitas dan informasi deployment lainnya

Menambahkan komentar untuk deployment

Jika ingin, Anda dapat menambahkan komentar ke deployment. Komentar ini akan ditampilkan dengan informasi deployment lainnya pada Dasbor Hosting di konsol Firebase. 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. Lihat Dokumentasi CLI Firebase untuk detail lebih lanjut.

Menyimpan konten yang di-deploy ke dalam cache

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

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

Menayangkan melalui HTTPS

Pastikan bahwa semua resource eksternal yang tidak dihosting di Firebase Hosting dimuat melalui SSL (HTTPS),termasuk skrip eksternal. 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 di-deploy adalah menghapus file secara lokal, lalu men-deploy ulang.

Langkah berikutnya