Effortless Deployment of Next & Angular Apps with Firebase

Introducing Firebase App Hosting

Hi teman-teman, Beberapa waktu lalu saya mendapat kesempatan untuk sharing pada acara Google IO Extended Bogor 2024. Topik yang saya bawakan adalah terkait salah produk baru dari Firebase. Saya mau sedikit sharing terkait materi yang saya bawakan di acara tersebut.

Oke langsung saja, saya akan mulai dengan pertanyaan:

Pertama pernah gak teman-teman merasa punya ide inovatif untuk membuat aplikasi web namun tidak memiliki waktu untuk mempelajari bagaimana menyiapkan infrastruktur yang dibutuhkan?

Atau teman-teman merasa ingin berinovasi dengan cepat namun terhambat oleh proses deploy yang masih manual dan tidak efisien?

Jika teman-teman merasakan hal tersebut, saya akan memperkenalkan Firebase App Hosting untuk teman-teman. "The next generation of serverless web hosting with Google"

Seperti yang kita tahu akhir-akhir ini fullstack framework Javascript cukup banyak digunakan seperti Angular dan Next.js. Dimana kita dapat memanfaatkan benefits dari server-side-rendering dari Javascript dengan mudah. Misalnya untuk meningkatkan SEO (search engine optimization) atau untuk meningkatkan load time dari aplikasi kita.

Untuk itu kita butuh lebih dari sekedar CDN (Content Delivery Network). Kita butuh sebuah backend karena fullstack framework seperti Next.js dan Angular menggabungkan antara backend dan frontend sekaligus. Maka dari itu kita perlu menyiapakan infrastruktur. Tetapi menyiapkan infrastruktur yang dibutuhkan dan kapan kita membutuhkannya terkadang menjadi hal yang memusingkan dan cukup memakan waktu.

Firebase App Hosting hadir untuk menyelesaikan masalah tersebut. "The new home for full-stack Angular and Next.js apps on Google".

Firebase App Hosting akan secara otomatis menyiapakan infrastruktur yang diperlukan dan menyajalankan aplikasi kita secara otomatis.

Firebase App hosting menyerderhanakan proses implementasi dari Github ke Google Cloud. Mulai dari membuat aset statis pada Google Cloud Build, lalu mengimplementasikan konten yang dinamis pada Google Cloud Run dan menyeajikan konten yang disimpan pada cache dalam Google Cloud CDN. Jadi kita cukup push kode kita ke Github, Firebase App Hosting akan menyelesaikan sisanya.

Deploy a NextJS App with Firebase App Hosting

Sekarang pertanyaannya bagaimna melakukan deploy ke Firebase App Hosting dan serumit apa prosesnya. Kita akan coba bahas pada sesi ini.

Jadi untuk men-deploy aplikasi Next.js ke Firebase App Hosting ada beberapa langkah yang perlu kita lakukan.

Download source code Next.js

Untuk men-download project Next.js kita bisa menggunakan perintah:
```
 npx create-next-app@latest
```
Pergi ke Firebase Console

Untuk pergi ke Firebase Console kamu bisa mengunjungi link berikut: https://console.firebase.google.com/

Lalu masuk menu App Hosting pada bagian side bar seperti pada gambar dibawah dan kita bisa masuk ke bagian "Get started".

Note: Untuk menggunakan Firebase App Hosting kita perlu meng-upgrade pricing plan aplikasi kita jadi "Blaze"
Set up App Hosting

Pada bagian set up App Hosting ada tiga langkah yang harus kita lakukan yaitu:
1. Import a Github repositoy
  
  Pada step ini kita diminta menghubungkan Firebase App Hosting dengan akun Github kita.
  
  Setelah tehubung kita import repository yang ingin kita deploy, seperti gambar dibawah:
2. Deployment settings
  
  Pada step kedua ini kita akan melakukan deployment setting dimana kita perlu menentukan root directory dan memilih branch dari repository kita yang ingin kita deploy.
  
  Pada step ini juga terdapat fitur automatic rollout. Kita bisa mengaktifkannya atau tidak. Ketika fitur ini aktif maka setiap ada perubahan pada branch yang kita pilih maka Firebase App Hosting akan melakukan proses redeploy. Untuk lebih jelasnya bisa lihat gambar dibawah:
3. Name your backend
  
  Pada step ketiga atau terakhir kita diminta untuk memberikan nama dari aplikasi backend kita. Firebase App Hosting akan membuatkan server untuk aplikasi backend kita secara otomatis pada layanan Google Cloud.

Setelah setupnya selesai kita bisa menekan tombol "Finish and Deploy*"* untuk memproses deployment kita. Firebase App Hosting akan menyiapakan infrasktuktur aplikasi kita secara otomatis baik untuk frontend ataupun backend.

Dashboard Firebase App Hosting

Setelah proses deploy selesai kita bisa masuk ke dashboard aplikasi kita di Firebase App Hosting untuk melihat informasi dan fitur apa aja yang ada disana. Kurang lebih tapilannya seperti gambar diatas.

Disini kita lihat pada dahsboard Firebase App Hosting terdapat dua section, yaitu:
1. Current rollout
  
  Pada section current rollout terdapat informasi git dan commit terakhir, domain, manage domain dan masuk ke Google Cloud Run Log dan Metrics untuk melihat kesehatan dari aplikasi kita.
2. Rollout History
  
  Pada section rollout history kita dapat melihat riwayat peluncuran dari apalikasi kita.
  
  Di Firebase App Hosting sendiri proses peluncurannya terdapat dua tahap yaitu build dan deploy, yang akan kita bahas pada bagian berikutnya.
Rollout Process

Proses rollout pada Firebase App Hosting terdapat dua step yaitu:
1. Build
  
  Pada proses build ini, Firebase App Hosting akan meminta Google Cloud Build Job mengenerate ases statis dan membuat container image untuk Google Coud Run.
2. Deploy
  
  Setelah proses build selesai akan masuk ke proses berikutnya yaitu deploy. Pada tahap ini Firebase App Hosting akan membuat Google Coud Run Revision dengan image yang dibuat pada proses build. Lalu mengaktifkan trafik. Jika ada trafik yang masuk dan proses deploy-nya sudah selesai maka trafiknya akan secara otomatis diarahkan ke deploy yang terbaru sehingga memperkecil kemungkinan downtime.

Sekali lagi pada Firebase App Hosting proses rollout dikaitkan dengan Google Cloud Build Job dan Google Cloud Run Revision.

Tetapi Ketika kita menggunakan serverless, ada satu hal yang menantang yaitu mencari tahu dimana ketika terjadi kesalahan. Apalagi jika kita tida memiliki visibilitas pada backend tentu akan sulit untuk menemukannya.

Firebase App Hosting hadir dengan konsep yang namanya "Just the right level

of abstraction". Dimana kita dapat masuk ke Google Cloud Build dan Google Cloud Run Revision untuk mengetahui apa yang terjadi dibelakang layar untuk setiap tollout. Misalnya kita bisa mencari tahu diamana dan bagaimana aplikasi kita dijalankan. Kita juga dapat melihat runtime configuration seperti informasi CPU boost, minimun instance yang aktif dimana ini dapat scale up dan scale down secara otomatis sesuai permintaan. Dan kita dapat melakukan konfigurasi dalam bentuk yml.

Recap

Untuk rangkuman bagaimana melakaukan deploy aplikasi Nextjs ke Firebase App Hosting kurang lebih seperti ini:
1. Pertama kita buat aplikasi Nextjs-nya dengan menjalankan perintah npx create-next-app
2. Kita hubungkan Firebase App Hosting dengan akun Github kita lalu import repo yang ingin kita deploy
3. Setelah repo kita ter-import ke Firebase App hosting, Firebase App Hosting akan menyiapkan infranstruktur yang dibutuhkan dan menjalankan aplikasi kita secara otomatis.
4. Kita juga dapat melihat build logs dan status backend dari aplikasi kita secara transparan.
5. Yang terakhir kita dapat melakukan custom domain dan mendapatkan sertifikat SSL secara gratis.

Optimized for Modern, Full-stack frameworks

Jika teman-teman pengguna lama Firebase tentu teman-teman kenal dengan Firebase Hosing. Yaitu layanan dari Firebase yang bisa kita gunakan untuk men-deploy static website.

Sekarang pertanyaannya apakah Firebase App Hosting ini akan menggantikan Firebase Hosting? Jawabannya adalah tidak.

Firebase App Hosting hadir bukan untuk menggantikan Firebase Hosting tetapi untuk mengisi gap tertentu.

Firebase App Hosting hadir untuk mengoptimalkan aplikasi fullstack framework yang memerlukan backend seperti Next.js dan Angular.

Founding Principles

Pada sesi ini kita akan membahas tentang prinsip dari Firebase App Hosting. Ada empat prinsip dari Firebase App Hoshting dan kita akan coba bahas satu per satu.

Full-stack

Firebase App Hosting di-design untuk me-manage semuanya dari Content Delivery Network (CDN) ke server-side-rendering (SSR).

Firebase App Hosting tidak hanya mendukung pengalihan traffic ke backend tetapi akan menglola aplikasi backend kita sepenuhnya sesuai standarisasi layanan Google Cloud.

Dimana layanan dari Google Cloud Run akan secara otamatis meningkatkan backend kita sesuai kebutuhan dan akan diturunkan ke 0 atau idle ketika tidak ada traffic. Hal tersebut bagus untuk menghemat cost.
Framework Aware

Prinsip kedua dari Firebase App Hosting ini adalah "Framework Aware". Dimana build pack dari Firebase App Hosting di-design dapat mengenali kode yang kita gunakan baik menggunakan Next.js maupun Angular.

Firebase App Hosting juga dapat men-deploy dan menjalankan aplikasi kita secara otomatis sesuai dengan kode yang kita gunakan. Untuk saat ini yang baru di-support Next.js dan Angular.
Git-centric

Firebase App Hosting dirancang berdasarkan Continuous Integration dan Continuous Delivery (CI/CD) pada Github. Jadi penggunaanya cukup mudah. Setelah kita meng-install atau mengintegrasikan Firebase App Hosting dengan akun Github kita, implementasinya semudah melakukan git push.

Kita bisa menjadi pengguna Firebase App Hosting tanpa perlu meng-install Firebase CLI di komputer kita.

Kita juga dapat melihat status development dan deployment dari aplikasi kita. Selain itu kita juga dapat melihat peluncuran atau rollout dan dapat melacak setiap versi dari aplikasi kita.

Firebase App Hosting dapat melihat commit baru sesuai kebijakan deploy yang kita buat. Dan akan men-deploy secara otomatis menggunakan Google Cloud Build.
Modern Architecture

Prinsip yang keempat dari Firebase App Hosting adalah "Modern Architecture" yang artinya layanan Firebase App Hosting sepenuhnya bersifat regional.

Seluruh layanan Firebase App Hosting diisolasi berdasarkan wilayah backend dari aplikasi kita. Kegagalan disuatu region tidak akan berpengaruh ke region lainnya. Bahkan dalam 1 region dibagi lagi ke beberapa bagian dengan menggunakan layanan dari Google Cloud Load Balancear dan CDN.

Benefits

Ada beberapa hal yang ditawarkan oleh Firebase App Hosting yang mungkin bisa menjadi pertimbangan teman-teman sebelum menggunakan layanan dari Firebase App Hosting.

Scalabel

Layanan dari Firebase App Hosting cukup flexible. Dimana Firebase App Hosting dapat melakukan scale up dan scale down infrastruktur backend aplikasi kita secara otomatis sesuai kebutuhan.
Flexible

Firebase App Hosting menawarkan flexibilitas yang cukup tinggi. Dimana memberikan kita kemampuan untuk melihat ke layanan dari Google Cloud, jadi kita dapat membangun infrastruktur aplikasi kita sesuai dengan kebutuhan.
Secure

Firebase App Hosting juga menawarkan keamanan yang cukup tinggi karena didukung oleh layanan Google Cloud. Dan Firebase App Hosting membantu memastikan aplikasi kita memenuhi standar keamanan dan kepatuhan dari layanan Google Cloud.