Mulai menggunakan Hosting Aplikasi

Dengan aplikasi Next.js atau Angular yang ada (Next.js versi 13.5.x+ atau Angular 18.2.x+) di repositori GitHub, memulai App Hosting bisa sesederhana membuat backend App Hosting, lalu memulai peluncuran dengan mengirimkan ke cabang aktif Anda. Jika Anda tidak memiliki aplikasi, gunakan salah satu aplikasi contoh kami untuk mempelajari langkah-langkah yang dijelaskan dalam panduan ini.

Panduan ini menjelaskan cara menyiapkan App Hosting di Firebase console untuk men-deploy secara otomatis setiap kali commit baru dilakukan ke repositori GitHub. Di akhir alur ini, Anda akan memiliki aplikasi contoh Next.js atau Angular aktif yang di-deploy ulang setiap kali Anda melakukan perubahan baru pada cabang main repositori GitHub Anda.

Meskipun panduan ini berfokus pada alur konsol Firebase yang direkomendasikan, ada cara lain untuk men-deploy, termasuk menggunakan CLI Firebase untuk men-deploy kode lokal tanpa koneksi GitHub.

Langkah 1: Buat fork repositori demo

Buka https://github.com/FirebaseExtended/firebase-framework-tools dan pilih Fork.

Langkah 2: Buat backend App Hosting

Di Firebase console, buka App Hosting dan pilih Mulai. Anda harus mengupgrade ke paket Blaze untuk menggunakan App Hosting.

Screenshot penyiapan backend App Hosting.

Ikuti petunjuk untuk menyelesaikan langkah-langkah berikut:

  • Pilih region utama (biasanya region yang paling dekat dengan pengguna Anda).
  • Hubungkan ke GitHub. Pilih repositori yang baru saja Anda buat dengan mengambil repositori firebase-framework-tools.
  • Tetapkan direktori root aplikasi Anda ke salah satu opsi berikut:
  • Tetapkan cabang aktif sebagai main.
  • Aktifkan peluncuran otomatis (peluncuran otomatis diaktifkan secara default).
  • Tetapkan nama untuk backend Anda.
  • Buat aplikasi web Firebase baru.

Pilih Selesaikan dan deploy.

Langkah 3: Lihat aplikasi yang di-deploy

Saat Anda membuat backend, Firebase memberi Anda subdomain tanpa biaya tempat pengguna akhir dapat mengunjungi aplikasi web Anda. Formatnya adalah backend-id--project-id.us-central1.hosted.app.

Di baris Informasi backend di dasbor untuk backend Anda, pilih link ke backend aktif Anda untuk melihat situs baru Anda:

Screenshot baris informasi backend dengan link aplikasi aktif ditekankan.

Langkah 4: Memicu peluncuran dengan menerapkan perubahan

Setelah backend dibuat dan Anda memiliki URL aktif, Anda dapat memicu peluncuran versi baru aplikasi web setiap kali Anda mengirimkan perubahan ke cabang aktif repositori GitHub. Untuk melakukan pengujian penyiapan App Hosting Anda:

  1. Di fork repositori GitHub demo Anda, buka sumber halaman beranda aplikasi demo, lakukan pengeditan yang dapat dikenali, lalu kirim perubahan Anda ke cabang utama. Untuk menemukan halaman beranda Anda:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. Di konsol Firebase, pantau App Hosting saat perubahan baru Anda di-roll out ke produksi. Setelah peluncuran selesai, Anda dapat melihat perubahan di halaman beranda aplikasi.

Langkah berikutnya