Bergabunglah dengan kami secara langsung dan online di Firebase Summit pada 18 Oktober 2022. Pelajari cara Firebase dapat membantu Anda mempercepat pengembangan aplikasi, merilis aplikasi dengan percaya diri, dan menyesuaikan skala dengan mudah. Daftar sekarang

Uji secara lokal, bagikan perubahan, lalu terapkan secara langsung

Sebelum menerapkan ke situs langsung Anda, Anda akan ingin melihat dan menguji perubahan Anda. Firebase Hosting memungkinkan Anda melihat dan menguji perubahan secara lokal dan berinteraksi dengan sumber daya proyek 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 diterapkan dari permintaan tarik.

Sebelum kamu memulai

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

  1. Instal atau perbarui Firebase CLI ke versi terbarunya.
  2. Hubungkan direktori proyek lokal (berisi konten aplikasi Anda) ke proyek Firebase Anda.

Anda dapat secara opsional menerapkan konten dan konfigurasi Hosting aplikasi Anda, tetapi itu bukan prasyarat untuk langkah-langkah di halaman ini.

Langkah 1: Uji secara lokal

Jika Anda membuat iterasi cepat atau ingin aplikasi Anda berinteraksi dengan sumber daya proyek backend yang diemulasi, Anda dapat menguji konten Hosting dan mengonfigurasinya 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 diemulasi , serta secara opsional sumber daya proyek yang diemulasi (fungsi, database, dan aturan).

  1. (Opsional) Secara default, aplikasi yang dihosting secara lokal akan berinteraksi dengan sumber daya proyek nyata , bukan yang ditiru , (fungsi, database, aturan, dll.). Sebagai gantinya, Anda dapat secara opsional menghubungkan aplikasi Anda untuk menggunakan sumber daya proyek teremulasi yang telah Anda konfigurasikan. Pelajari lebih lanjut: Basis Data Waktu Nyata | Cloud Firestore | Fungsi Cloud

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

Uji dari perangkat lokal lainnya

Secara default, emulator hanya menanggapi permintaan dari localhost . Ini berarti Anda akan dapat mengakses konten yang dihosting dari browser web komputer Anda tetapi tidak dari perangkat lain di jaringan Anda. Jika Anda ingin menguji dari perangkat lokal lainnya, 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 menerapkan ke saluran pratinjau, Firebase menyajikan 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, siapa pun yang mengetahui URL dapat mengaksesnya.

  1. Dari akar 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 permintaan tarik. Pelajari cara mengatur dan menggunakan GitHub Action ini .

Langkah 3: Terapkan langsung

Saat Anda siap untuk membagikan perubahan Anda kepada dunia, terapkan konten Hosting Anda dan konfigurasikan ke saluran langsung Anda. Firebase menawarkan beberapa opsi berbeda untuk langkah ini bergantung pada kasus penggunaan Anda (lihat opsi di bawah).

Opsi 1: Klon dari saluran pratinjau ke saluran langsung Anda

Opsi ini memberikan keyakinan bahwa Anda menerapkan konten dan konfigurasi yang sama persis dengan yang Anda uji di saluran pratinjau ke saluran langsung Anda. 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 ID proyek Firebase Anda.
      • Anda dapat menentukan situs yang berada dalam proyek Firebase yang sama atau bahkan dalam proyek Firebase yang berbeda.

    • SOURCE_CHANNEL_ID : Ini adalah pengidentifikasi 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 untuk menerapkan bahkan jika Anda belum menggunakan saluran pratinjau.

  1. Dari akar 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 menyebarkan konten dan konfigurasi Hosting Anda ke situs berikut:

  • Subdomain yang disediakan 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 )

  • Domain khusus apa pun yang telah Anda hubungkan ke situs Hosting Anda

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

Aktivitas dan informasi penerapan lainnya

Tambahkan komentar untuk penyebaran

Anda dapat secara opsional menambahkan komentar ke penerapan. Komentar ini akan ditampilkan bersama informasi penerapan lainnya di dasbor Hosting di Firebase console. 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-penerapan atau pasca-penerapan. Misalnya, kait pasca penerapan dapat memberi tahu administrator tentang penyebaran konten situs baru. Lihat dokumentasi Firebase CLI untuk detail selengkapnya.

Caching konten yang di-deploy

Saat permintaan dibuat untuk konten statis , Firebase Hosting secara otomatis menyimpan konten dalam cache 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 sumber daya 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