Dengan aplikasi Next.js atau Angular yang ada (Next.js versi 13+ atau Angular 17.2+) di repositori GitHub, memulai App Hosting dapat dilakukan dengan sesederhana membuat backend App Hosting, lalu memulai peluncuran dengan push ke cabang live Anda. Jika Anda tidak memiliki aplikasi, gunakan salah satu aplikasi contoh kami untuk mempelajari langkah-langkah yang dijelaskan dalam panduan ini.
Sebelum memulai
Sebelum dapat menyiapkan Firebase App Hosting, Anda harus membuat project Firebase (jika belum memilikinya) dan mengupgrade ke paket Blaze.
Untuk membuat project:
-
Di Firebase console, klik Add project.
-
Untuk menambahkan resource Firebase ke project Google Cloud yang sudah ada, masukkan nama project-nya atau pilih dari menu dropdown.
-
Untuk membuat project baru, masukkan nama project yang diinginkan. Anda juga dapat mengedit project ID yang ditampilkan di bawah nama project.
-
-
Jika diminta, tinjau dan setujui persyaratan Firebase.
-
Klik Lanjutkan.
-
(Opsional) Siapkan Google Analytics untuk project Anda dan optimalkan penggunaan produk-produk Firebase berikut:
Pilih akun Google Analytics yang ada atau buat akun baru.
Jika Anda membuat akun baru, pilih lokasi pelaporan Analytics, lalu setujui setelan berbagi data dan persyaratan Google Analytics untuk project Anda.
-
Klik Buat project (atau Tambahkan Firebase, jika Anda menggunakan project Google Cloud yang sudah ada).
Firebase menyediakan resource untuk project Firebase Anda secara otomatis. Begitu selesai, Anda akan dibawa ke halaman ringkasan untuk project Firebase Anda di Firebase console.
Langkah 0 (opsional): Membuat repositori GitHub dan aplikasi Web
Jika Anda belum memiliki aplikasi Web yang berada di repositori GitHub, atau jika Anda lebih memilih untuk mencoba alur dengan aplikasi contoh, mulailah dengan menginisialisasi salah satu contoh kami, baik untuk Next.js maupun Angular:
npm init @apphosting
Anda dapat menjalankan aplikasi contoh secara lokal menggunakan next dev
atau ng start
. Untuk melanjutkan,
buat repositori GitHub baru
dan kirim kode contoh yang baru diinisialisasi ke repositori tersebut.
Langkah 1: Buat backend App Hosting
Backend App Hosting adalah kumpulan resource terkelola yang dibuat oleh App Hosting untuk mem-build dan menjalankan aplikasi Web Anda. Anda dapat membuat dan mencantumkan backend App Hosting menggunakan konsol Firebase atau Firebase CLI.
Firebase console: Dari menu Build, pilih App Hosting, lalu Get started.
CLI: (Versi 13.15.4 atau yang lebih baru) Untuk membuat backend, jalankan perintah berikut dari root direktori project lokal Anda, dengan memberikan projectID dan region pilihan sebagai argumen:
firebase apphosting:backends:create --project PROJECT_ID --location us-central1
Untuk konsol atau CLI, ikuti petunjuk untuk menetapkan nama ke backend Anda, menyiapkan koneksi GitHub, dan mengonfigurasi setelan deployment dasar ini:
Tetapkan direktori utama aplikasi (defaultnya
/
)Biasanya, file
package.json
Anda berada di sini.
Menetapkan live branch
Ini adalah cabang repositori GitHub Anda yang di-deploy ke URL aktif Anda. Sering kali, ini adalah cabang tempat cabang fitur atau cabang pengembangan digabungkan.
Menyetujui atau menolak peluncuran otomatis
Peluncuran otomatis diaktifkan secara default. Setelah selesai membuat backend, Anda dapat memilih agar aplikasi Anda segera di-deploy ke App Hosting.
Langkah 2: Lihat aplikasi yang di-deploy
Saat Anda membuat backend, Firebase akan memberi Anda subdomain tanpa biaya tempat pengguna akhir dapat mengunjungi aplikasi Web Anda. Formatnya adalah backend-id--project-id.us-central1.hosted.app
.
Untuk melihat URL aplikasi Web Anda, periksa Firebase console, atau jalankan perintah CLI berikut:
firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1
Langkah 3: Memicu peluncuran dengan menerapkan perubahan
Setelah backend dibuat dan Anda memiliki URL aktif, Anda dapat memicu peluncuran versi baru aplikasi Web setiap kali Anda mendorong perubahan ke cabang aktif repositori GitHub. Untuk melakukan pengujian penyiapan App Hosting:
- Di GitHub, kirim perubahan ke cabang aktif aplikasi Web.
- Buka tab App Hosting di konsol Firebase, lalu pilih Lihat dasbor untuk backend Anda. Daftar tabel menampilkan commit spesifik yang terkait dengan peluncuran yang dipicu oleh perubahan Anda.
Langkah berikutnya
- Pelajari lebih lanjut: pelajari codelab Firebase yang mengintegrasikan aplikasi yang dihosting dengan Firebase Authentication dan fitur Google AI: Next.js | Angular
- Menghubungkan domain kustom.
- Konfigurasikan backend Anda.
- Memantau peluncuran, penggunaan situs, dan log.