Mulai menggunakan Hosting Aplikasi

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

Untuk bantuan AI, salin perintah di bawah ke agen coding AI Anda (seperti Antigravity, Claude Code, Codex, dan Cursor). Anda dapat menyesuaikan perintah dan melakukan iterasi dengan agen Anda. Buka Keahlian agen Firebase untuk mengetahui info penginstalan yang mendetail. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

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

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

Langkah 1: Buat fork repositori demo

Buka https://github.com/firebase/apphosting-adapters, lalu pilih Fork.

Langkah 2: Buat backend App Hosting

  1. Di Firebase console, buka Hosting & Serverless > App Hosting.

  2. Klik Get started.

  3. Jika diminta, upgrade ke paket harga Blaze bayar sesuai penggunaan 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 melakukan fork pada repositori apphosting-adapters.
  • Tetapkan direktori root aplikasi Anda ke salah satu dari berikut ini:
  • Tetapkan cabang aktif sebagai main.
  • Aktifkan peluncuran otomatis (peluncuran otomatis diaktifkan secara default).
  • Tetapkan nama untuk backend Anda.
  • Pilih lingkungan runtime Anda. Secara default, versi Node.js terbaru yang direkomendasikan telah dipilihkan untuk Anda.
    • Konfigurasikan Update Image Dasar Otomatis (ABIU). ABIU diaktifkan secara default dan otomatis menerapkan patch keamanan ke lingkungan yang mendasarinya. Anda dapat memilih untuk tidak menggunakan ABIU dengan memilih "Tidak ditentukan" untuk runtime Anda.
  • Buat aplikasi web Firebase baru.

Pilih Finish and 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 Backend information di dasbor untuk backend, pilih link ke backend aktif untuk melihat situs baru Anda:

Screenshot baris informasi backend dengan link aplikasi aktif yang ditekankan.

Langkah 4: Picu peluncuran dengan mengirimkan perubahan

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

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

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

  2. Di Firebase console, pantau App Hosting saat perubahan baru Anda diluncurkan ke produksi. Setelah peluncuran selesai, Anda dapat melihat perubahan di halaman beranda aplikasi.

Langkah berikutnya