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

Nếu đã có ứng dụng Next.js hoặc Angular (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, thì 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ợ cho App Hosting, sau đó bắt đầu triển khai bằng cách đẩy lên nhánh trực tiếp. Nếu 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.

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 cam kết 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 trực tiếp được triển khai lại mỗi khi bạn cam kết một thay đổi mới đối với 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 được đề xuất trong bảng điều khiển Firebase, nhưng vẫn có những cách khác để triển khai, 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: Tạo bản sao kho lưu trữ bản minh hoạ

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

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

Trong bảng điều khiển Firebase, hãy mở App Hosting rồi chọn Get started (Bắt đầu). Bạn cần nâng cấp lên gói Blaze để sử dụng Dịch vụ lưu trữ ứng dụng.

Ảnh chụp màn hình chế độ thiết lập phụ trợ của Dịch vụ lưu trữ ứng dụng.

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ữ mà bạn vừa tạo bằng cách tạo bản sao kho lưu trữ firebase-framework-tools.
  • Đặ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 trực tiếp thành main.
  • Bật tính năng triển khai tự động (tính năng triển khai tự động được bật theo mặc định).
  • Chỉ định tên cho phần phụ trợ.
  • Tạo ứng dụng web Firebase mới.

Chọn Finish and deploy (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 phụ miễ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 phụ này là backend-id--project-id.us-central1.hosted.app.

Trong hàng Backend information (Thông tin phần phụ trợ) trên trang tổng quan cho phần phụ trợ, hãy chọn đường liên kết đến phần phụ trợ trực tiếp để xem trang web mới:

Ả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 triển khai bằng cách đẩy một thay đổi

Sau khi tạo phần phụ trợ và có URL trực tiếp, bạn có thể kích hoạt quá trình triển khai 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 trực tiếp của kho lưu trữ GitHub. Cách kiểm tra thiết lập App Hosting của bạn:

  1. Trong bản sao kho lưu trữ GitHub bản minh hoạ, hãy chuyển đến nguồn của trang chủ ứng dụng bản minh hoạ, thực hiện bất kỳ chỉnh sửa dễ nhận biết 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 vào môi trường sản xuất. Khi quá trình triển khai 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