Với ứng dụng Next.js hoặc Angular hiện có (Next.js phiên bản 13 trở lên hoặc Angular 17.2 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 dễ dàng bằng cách tạo phần phụ trợ App Hosting, sau đó bắt đầu triển khai bằng cách đẩy vào nhánh đang hoạt động. Nếu bạn không 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.
Trước khi bắt đầu
Trước khi có thể thiết lập Firebase App Hosting, bạn cần tạo một dự án Firebase (nếu chưa có) và nâng cấp lên gói Blaze.
Cách tạo dự án:
-
Trong bảng điều khiển Firebase, hãy nhấp vào Thêm dự án.
-
Để thêm tài nguyên Firebase vào dự án Google Cloud hiện có, hãy nhập tên dự án hoặc chọn dự án đó trong trình đơn thả xuống.
-
Để tạo dự án mới, hãy nhập tên dự án mong muốn. Bạn cũng có thể tuỳ ý chỉnh sửa mã dự án hiển thị bên dưới tên dự án.
-
-
Nếu bạn thấy thông báo nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase.
-
Nhấp vào Tiếp tục.
-
(Không bắt buộc) Thiết lập Google Analytics cho dự án của bạn để có trải nghiệm tối ưu khi sử dụng bất kỳ sản phẩm Firebase nào sau đây:
Chọn một tài khoản Google Analytics hiện có hoặc tạo một tài khoản mới.
Nếu bạn tạo tài khoản mới, hãy chọn vị trí báo cáo Analytics, sau đó chấp nhận chế độ cài đặt chia sẻ dữ liệu và điều khoản Google Analytics cho dự án của bạn.
-
Nhấp vào Tạo dự án (hoặc Thêm Firebase nếu bạn đang sử dụng dự án Google Cloud hiện có).
Firebase sẽ tự động phân bổ tài nguyên cho dự án Firebase của bạn. Khi quá trình này hoàn tất, bạn sẽ được chuyển đến trang tổng quan về dự án Firebase trong bảng điều khiển Firebase.
Bước 0 (không bắt buộc): Tạo kho lưu trữ GitHub và ứng dụng web
Nếu bạn chưa có ứng dụng Web nằm trong kho lưu trữ GitHub hoặc nếu bạn muốn thử quy trình này với một ứng dụng mẫu, hãy bắt đầu bằng cách khởi chạy một trong các mẫu của chúng tôi cho Next.js hoặc Angular:
npm init @apphosting
Bạn có thể chạy ứng dụng mẫu trên máy bằng next dev
hoặc ng start
. Để tiếp tục, hãy tạo một kho lưu trữ GitHub mới và đẩy mã mẫu mới khởi chạy vào kho lưu trữ đó.
Bước 1: Tạo phần phụ trợ App Hosting
Phần phụ trợ App Hosting là tập hợp các tài nguyên được quản lý mà App Hosting tạo ra để xây dựng và chạy ứng dụng Web. Bạn có thể tạo và liệt kê các phần phụ trợ App Hosting bằng bảng điều khiển Firebase hoặc CLI Firebase.
Bảng điều khiển Firebase: Trên trình đơn Tạo, hãy chọn Lưu trữ ứng dụng rồi chọn Bắt đầu.
CLI: (Phiên bản 13.15.4 trở lên) Để tạo phần phụ trợ, hãy chạy lệnh sau từ thư mục gốc của dự án cục bộ, cung cấp projectID và region ưu tiên làm đối số:
firebase apphosting:backends:create --project PROJECT_ID --location us-central1
Đối với cả bảng điều khiển hoặc CLI, hãy làm theo lời nhắc để chỉ định tên cho phần phụ trợ, thiết lập kết nối GitHub và định cấu hình các chế độ cài đặt triển khai cơ bản sau:
Đặt thư mục gốc của ứng dụng (mặc định là
/
)Đây thường là nơi lưu trữ tệp
package.json
.
Đặt nhánh phát trực tiếp
Đây là nhánh của kho lưu trữ GitHub được triển khai đến URL trực tiếp. Thường thì đây là nhánh mà các nhánh tính năng hoặc nhánh phát triển được hợp nhất.
Chấp nhận hoặc từ chối tính năng tự động triển khai
Tính năng tự động triển khai được bật theo mặc định. Khi hoàn tất quá trình tạo phần phụ trợ, bạn có thể chọn triển khai ứng dụng của mình ngay lập tức trên App Hosting.
Bước 2: 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 miễn phí mà 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
.
Để xem URL của ứng dụng web, hãy kiểm tra bảng điều khiển Firebase hoặc chạy lệnh CLI sau:
firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1
Bước 3: 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 đang hoạt động, bạn có thể kích hoạt việc 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 đang hoạt động của kho lưu trữ GitHub. Cách kiểm thử chế độ thiết lập App Hosting:
- Trong GitHub, hãy đẩy thay đổi vào nhánh đang hoạt động của ứng dụng Web.
- Mở thẻ App Hosting trong bảng điều khiển Firebase rồi chọn Xem trang tổng quan cho phần phụ trợ. Danh sách bảng hiển thị thay đổi cụ thể liên kết với bản phát hành được kích hoạt bởi thay đổi của bạn.
Các bước tiếp theo
- Tìm hiểu sâu hơn: tham gia một lớp học lập trình Firebase tích hợp ứng dụng được lưu trữ với tính năng Xác thực Firebase và AI của Google: Next.js | Angular
- Kết nối miền tuỳ chỉnh.
- Định cấu hình phần phụ trợ.
- Theo dõi quá trình triển khai, mức sử dụng trang web và nhật ký.