Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Uji aplikasi web Anda secara lokal, bagikan perubahan dengan orang lain, lalu terapkan secara langsung

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:

  1. Pasang atau perbarui Firebase CLI ke versi terbarunya.
  2. 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).

  1. (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

  2. Dari root direktori proyek lokal Anda, jalankan perintah berikut:

    firebase emulators:start

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

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

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.

  1. 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.

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

  3. 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 .

  1. 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.

  2. 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.

  1. Dari root direktori proyek lokal Anda, jalankan perintah berikut:

    firebase deploy --only hosting

  2. 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 (seperti PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (seperti PROJECT_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