Bắt đầu với Lưu trữ ứng dụng

Với một ứng dụng Next.js hoặc Angular hiện có (Next.js phiên bản 13.5.x trở lên hoặc Angular 18.2.x trở lên) trong kho lưu trữ GitHub, bạn có thể bắt đầu sử dụng App Hosting một cách đơn giản bằng cách tạo một phần phụ trợ App Hosting, sau đó bắt đầu triển khai bằng cách đẩy lên nhánh đang hoạt động. Nếu bạn chưa có ứng dụng, hãy sử dụng một trong các ứng dụng mẫu của chúng tôi để thực hiện các bước được mô tả trong hướng dẫn này.

Để được trợ giúp AI, hãy sao chép câu lệnh bên dưới vào tác nhân lập trình AI (như Antigravity, Claude Code, Codex và Cursor). Bạn có thể tuỳ chỉnh câu lệnh và lặp lại với tác nhân. Truy cập vào bài viết Kỹ năng của tác nhân Firebase để biết thông tin chi tiết về cách cài đặt. 

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.

Hướng dẫn này mô tả cách thiết lập App Hosting trong bảng điều khiển Firebase để tự động triển khai mỗi khi có một thay đổi mới được thực hiện đối với kho lưu trữ GitHub. Khi kết thúc quy trình này, bạn sẽ có một ứng dụng mẫu Next.js hoặc Angular đang hoạt động và được triển khai lại mỗi khi bạn cam kết một thay đổi mới cho nhánh main của kho lưu trữ GitHub.

Mặc dù hướng dẫn này tập trung vào quy trình đề xuất trên bảng điều khiển Firebase, nhưng vẫn có các cách triển khai khác, bao gồm cả việc sử dụng CLI Firebase để triển khai mã cục bộ mà không cần kết nối GitHub.

Bước 1: Phân nhánh kho lưu trữ minh hoạ

Truy cập vào https://github.com/firebase/apphosting-adapters rồi chọn Fork (Phân nhánh).

Bước 2: Tạo phần phụ trợ App Hosting

  1. Trong bảng điều khiển Firebase, hãy chuyển đến phần Hosting & Serverless (Lưu trữ và không máy chủ) > App Hosting.

  2. Nhấp vào Bắt đầu.

  3. Nếu được nhắc, hãy nâng cấp lên gói giá Blaze (trả tiền theo mức dùng) để sử dụng App Hosting.

Ảnh chụp màn hình về chế độ thiết lập phần phụ trợ của App Hosting.

Làm theo lời nhắc để hoàn tất các bước sau:

  • Chọn một khu vực chính (thường là khu vực gần người dùng nhất).
  • Kết nối với GitHub. Chọn kho lưu trữ bạn vừa tạo bằng cách phân nhánh kho lưu trữ apphosting-adapters.
  • Đặt thư mục gốc của ứng dụng thành một trong những thư mục sau:
  • Đặt nhánh đang hoạt động thành main.
  • Bật tính năng tự động phát hành (tính năng tự động phát hành được bật theo mặc định).
  • Đặt tên cho phần phụ trợ.
  • Chọn môi trường thời gian chạy. Theo mặc định, phiên bản Node.js mới nhất được đề xuất sẽ được chọn trước cho bạn.
    • Định cấu hình tính năng Tự động cập nhật hình ảnh cơ sở (ABIU). ABIU được bật theo mặc định và tự động áp dụng các bản vá bảo mật cho môi trường cơ bản của bạn. Bạn có thể chọn không sử dụng ABIU bằng cách chọn "Not specified" (Không chỉ định) cho thời gian chạy.
  • Tạo một ứng dụng web Firebase mới.

Chọn Hoàn tất và triển khai.

Bước 3: Xem ứng dụng đã triển khai

Khi bạn tạo một phần phụ trợ, Firebase sẽ cung cấp cho bạn một miền con không tốn phí để người dùng cuối có thể truy cập vào ứng dụng web của bạn. Định dạng của miền con này là backend-id--project-id.us-central1.hosted.app.

Trong hàng Thông tin về phần phụ trợ trong trang tổng quan cho phần phụ trợ, hãy chọn đường liên kết đến phần phụ trợ đang hoạt động để xem trang web mới của bạn:

Ảnh chụp màn hình hàng thông tin phụ trợ, trong đó đường liên kết đến ứng dụng đang hoạt động được nhấn mạnh.

Bước 4: Kích hoạt quá trình phát hành bằng cách đẩy một thay đổi

Sau khi tạo phần phụ trợ và có URL đang hoạt động, bạn có thể kích hoạt việc phát hành phiên bản mới của ứng dụng web bất cứ khi nào bạn đẩy các thay đổi vào nhánh đang hoạt động của kho lưu trữ GitHub. Cách kiểm tra chế độ thiết lập App Hosting:

  1. Trong nhánh của kho lưu trữ GitHub minh hoạ, hãy chuyển đến nguồn của trang chủ ứng dụng minh hoạ, thực hiện bất kỳ nội dung chỉnh sửa nào bạn muốn, sau đó đẩy thay đổi của bạn lên nhánh chính. Cách tìm trang chủ:

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

  2. Trong bảng điều khiển Firebase, hãy theo dõi App Hosting khi thay đổi mới của bạn được triển khai cho môi trường phát hành công khai. Khi quá trình phát hành hoàn tất, bạn có thể xem thay đổi của mình trên trang chủ của ứng dụng.

Các bước tiếp theo