[Recap Google IO 2024] and Deploy your web app with Firebase App Hosting

Vừa qua thì mình có cơ hội được chia sẻ tại sự kiện Google I/O Extended 2024 Mien Trung. Bài biết này mình tổng hợp lại những nội dung mà mình đã chia sẻ tại sự kiện này như một Recap cho nội dung mình chia sẻ.

Bài viết này nội dung chính sẽ nói về Firebase App Hosting, thế hệ tiếp theo của việc phát triển ứng dụng serverless của Google, giúp bạn dễ dàng triển khai và quản lý ứng dụng web một cách dễ dàng hơn.

Đôi chút về Firebase App Hosting thì nó được giới thiệu gần đây thông qua sự kiện Google I/O Extended 2024. Trước khi đi vào tìm hiểu về cách deploy ứng dụng với Firebase App Hosting thì mình điểm qua lại một vài Key note về các công nghệ Web được cập nhật tại sự kiện này.

What's new in web?

1. Speculation Rules API

Có thể gọi theo nghĩa tiếng Việt là API dự đoán nó hoạt động bằng cách sử dụng các quy tắc logic để phân tích dữ liệu và dự đoán kết quả tải trang. Để dễ hiểu hơn thì tưởng tượng bạn đang lướt web và di chuột qua một liên kết. Trước khi bạn nhấp vào, trang web đã bắt đầu tải trang đích tiềm năng ở chế độ nền, dựa trên dự đoán rằng bạn có thể nhấp vào đó. Nhờ vậy, khi bạn nhấp, trang web gần như tải ngay lập tức, mang lại trải nghiệm mượt mà.

2. Cập nhật mới cho Chrome DevTools: Gemini

Gemini là một công nghệ mới được tích hợp vào Chrome DevTools giúp bạn dễ dàng phân tích và tối ưu hóa code. Nó hoạt động bằng cách tích hợp Gemini và Gemini sẽ tự động phân tích code khi bạn đang debug. Nhận diện các vấn đề tiềm ẩn như lỗi, thiếu sót, hoặc cơ hội tối ưu hóa. Và hơn thế nữa là đưa ra đề xuất giải pháp hoặc cách thức khắc phục cho từng vấn đề.

3. Firebase Genkit

Genkit là một bộ công cụ mã nguồn mở (open-source) mới giúp developer "bơm" sức mạnh AI vào các ứng dụng đang có hoặc mới xây dựng, sử dụng Javascript/Typescript.

Nói cách khác thì Genkit giúp bạn dễ dàng tích hợp các tính năng AI như tạo nội dung tự động, dịch thuật, tìm kiếm thông minh... vào ứng dụng. Kiểu như bạn không cần phải là một chuyên gia AI để sử dụng Genkit.

Ngoài ra còn một vài cập nhật khác nhưng mình chỉ tìm hiểu tới bấy nhiêu thoy :)))

Firebase App Hosting

What's the difference between Firebase App Hosting and Firebase Hosting?

Firebase Hosting và Firebase App Hosting đều là dịch vụ lưu trữ web của Firebase, quan trọng là Firebase App Hosting không phải là giải pháp thay thế cho Firebase Hosting, nó cung cấp các giải pháp khác nhau, cụ thể:

• Firebase Hosting: Dành cho các trang web tĩnh (static website) và single-page web application. Các tệp tin được lưu trữ và phân phối dưới dạng nội dung tĩnh, không thay đổi theo yêu cầu của người dùng. Phù hợp cho các trang web đơn giản, landing page, hoặc các trang portfolio cá nhân.
• Firebase App Hosting: Dành cho các full-stack web apps được xây dựng với các framework phổ biến hiện nay như Angular, React và Next.js. Hỗ trợ server-side rendering (SSR) và cho phép bạn sử dụng các dịch vụ backend của Firebase như Cloud Functions và Cloud Firestore. Phù hợp cho các ứng dụng web phức tạp đòi hỏi backend và cơ sở dữ liệu.

Demo Basic Deploy Web App with Firebase App Hosting

Cách tốt nhất để hiểu về Firebase App Hosting là sử dụng nó. Mình sẽ kết hợp hướng dẫn kèm các chú thích liên quan trong phần này.

B1. Tạo ứng dụng Next.js với template được dựng sẵn bởi Firebase

npm init next-on-firebase

B2. Push dự án vừa tạo lên github. Đây là repo demo cho phần này của mình Firebase-hello-world

B3. Truy cập console.firebase.google.com, tại phần Firebase App Hosting chọn Create backend, sau đó setup với repo github vừa tạo

B4. Tìm hiểu bảng điều khiển của Firebase App Hosting

Sau các setting trước đi thì ứng dụng của bạn xem như đã deploy thành công lên Firebase App Hosting. Tất cả thao tác trên thật sự rất đơn giản, nó không đòi hỏi bạn phải có kiến thức về các lệnh CLI khi triển khai, mà chỉ cần thông qua bảng điều khiển của Firebase bạn đã có thể deploy được ứng dụng của mình một cách nhanh chóng.

Quay lại bảng điều kiển của Firebase App Hosting say khi triển khai ứng dụng:

• (1) Chứa thông tin triển khai gần nhất (commit mới nhất trên main branch), cho biết ai là người triển khai nó.
• (2) Đây là domain name mặc định mà firebase tạo cho bạn, nơi web app bạn vừa triển khai có thể truy cập được.
• (3) Thông tin chi tiết các rollout (triển khai).
  • Đôi chút về rollout, triển khai là một quá trình gồm 2 bước build và deploy
    • Trong bước build thì Cloud build sẽ thực hiện tạo các nội dung tĩnh và tạo container image cho Cloud Run.
  • Kiến trúc serverless rất tiện lợi về nhiều mặt nhưng nó có một vài hạn chế về việc tìm ra lỗi xảy ra ở đâu. Nên cần có khả năng hiển thị thông tin chi tiết của các bước deploy nếu ko thì việc fix bug sẽ trở nên rất là khó khăn. Đó là lợi thế khi với Firebase App Hosting bạn có thê kiểm tra được Cloud Build và bản sửa đổi Cloud Run sau mỗi rollout - triển khai.
    • Bạn có thể kiểm tra bằng cách ở phần setting mở rộng của rollout đó sau đó chọn các setting View Cloud Run revision, View Cloud Build logs và View Cloud Run errors để xem chi tiết và debug khi cần.

B5. Truy cập vào domain name để xem kết quả triển khai web app của bạn firebase-demo

Recap

• Theo dõi được việc tạo một ứng dụng NextJS với lệnh npm init next-on-firebase
• Tạo một ứng dụng triển khai với Firebase App Hosting và kết nối nó với github repo
• Biết được cách các rollout (triển khai) được tạo sau khi có bất kì cập nhật nào trên nhánh chính. Và trạng thái được liên kết với github
  • Cách Cloub Build phát hiện các cập nhật mới trên src code Next.js sau đó xây dựng các container image để triển khai ứng dụng
• Hiểu được những gì đang xảy ra ở backend bằng cách truy cập trực tiếp vào các bảng điều kiển Cloud Run và build logs -> nhằm hỗ trợ việc theo dõi các lỗi và khắc phục chúng kịp thời
• Còn 1 phần mình chưa đề cập đến là việc thiết lập tên miền, đối với phần này thì tên miền vẫn đang sử dụng tên miền mặc định mà firebase cung cấp.

Ngoài ra khi cài đặt các biến môi trường thông thường mọi người sẽ sử dụng file .env nhưng đối với Firebase App Hosting thì biến môi trường sẽ được cấu hình thông qua file apphosting.yaml. Đối với file apphosting.yaml bạn còn có thể cấu hình CPU, memory limits và nhiều cấu hình khác, đây cũng là một trong những yếu tố tạo nên tính scalable của Firebase App Hosting.

# Settings for Cloud Run
runConfig:
  minInstances: 2
  maxInstances: 100
  concurrency: 100
  cpu: 2
  memoryMiB: 1024

# Environment variables and secrets
env:
  - variable: STORAGE_BUCKET
    value: mybucket.appspot.com
    availability:
      - BUILD
      - RUNTIME

  - variable: API_KEY
    secret: myApiKeySecret

Use Generative AI

Bên cạnh đó, AI đang là xu hướng hiện tại, nên mình sẽ chia sẻ ngắn về việc tích hợp sử dụng Generative AI vào ứng dụng Next.js.

B1. Cài đặt Generative AI thông qua cmd

npm i @google/generative-ai

B2. Khởi tạo model sau đó tùy biến prompt và gửi

const genAI = new GoogleGenerativeAI(API_KEY)
const model = genAI.getGenerativeModel({ model: "gemini-pro" })

const result = await model.generateContent(prompt)
const response = result.response
const text = response.text()

Chi tiết hơn về phần này bạn có thể đọc lại bài viết Create a Tarot View app with the Gemini API

End

Và đó là recap nhanh tất cả nội dung mình đã chia sẻ vừa qua tại sự kiện Google I/O Extended Mien Trung.

Bạn có thể tìm hiểu chi tiết hơn thông qua các nguồn bên dưới.

• App Hosting vs. the original Hosting: Which one do I use?
• Introducing Firebase App Hosting
• Supercharge your apps with Firebase and the Gemini API

I am always looking for feedback on my writing, so please let me know what you think. ❤️