Catch up on everthing we announced at this year's Firebase Summit. Learn more

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 menyebarkan dari permintaan tarik.

Sebelum kamu memulai

Lakukan langkah-langkah yang tercantum pada Dapatkan Memulai halaman 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 lokal

Jika Anda membuat iterasi cepat atau Anda 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 lokal Emulator Suite , yang memungkinkan aplikasi Anda untuk berinteraksi dengan konten Hosting ditiru dan konfigurasi, serta opsional ditiru sumber daya proyek (fungsi, database, dan aturan).

  1. (Opsional) Secara default, aplikasi host secara lokal akan berinteraksi dengan nyata, bukan ditiru, sumber daya proyek (fungsi, database, aturan, dll). Anda malah dapat opsional menghubungkan aplikasi Anda untuk menggunakan sumber daya ditiru proyek yang Anda dikonfigurasi. Pelajari lebih lanjut: Realtime database | 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 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 uji dari perangkat lokal lainnya, mengkonfigurasi firebase.json seperti:

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

Langkah 2: Preview dan share

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. Bila menggunakan URL pratinjau, Anda berinteraksi aplikasi web dengan backend nyata 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 sama CHANNEL_ID dalam perintah.

Pelajari tentang mengelola saluran pratinjau , termasuk cara mengatur kedaluwarsa saluran.

Firebase Hosting mendukung Tindakan GitHub yang secara otomatis membuat dan memperbarui URL pratinjau saat Anda melakukan perubahan pada permintaan tarik. Pelajari cara membuat dan menggunakan Aksi GitHub ini .

Langkah 3: Deploy hidup

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 menyediakan keyakinan bahwa Anda menyebarkan ke saluran hidup Anda konten yang tepat dan konfigurasi yang Anda diuji dalam saluran pratinjau. Pelajari lebih lanjut tentang kloning versi .

  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 dari 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 menjabat versi Anda ingin menyebarkan ke saluran hidup Anda.

      • Untuk saluran hidup, menggunakan live sebagai ID saluran.
  2. Lihat perubahan (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 (langkah berikutnya).

Langkah 4: Lihat perubahan di situs hidup 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 )

  • Setiap domain kustom bahwa Anda telah terhubung ke situs Hosting Anda (s)

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

Aktivitas dan informasi penerapan lainnya

Tambahkan komentar untuk penyebaran

Anda dapat secara opsional menambahkan komentar ke penerapan. Komentar ini akan menampilkan dengan penyebaran informasi lainnya di dashboard 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

Anda dapat script shell connect ke firebase deploy perintah untuk melakukan predeploy atau postdeploy tugas. Misalnya, kait pasca penerapan dapat memberi tahu administrator tentang penyebaran konten situs baru. Mengacu pada dokumentasi Firebase CLI untuk lebih jelasnya.

Caching konten yang di-deploy

Ketika permintaan dibuat untuk konten statis, Firebase Hosting otomatis cache konten pada CDN. Jika Anda memindahkan konten situs Anda, Firebase otomatis membersihkan semua konten statis Anda cache di seluruh CDN sehingga permintaan baru menerima konten baru Anda.

Perhatikan bahwa Anda dapat mengkonfigurasi 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