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

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:

  1. 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.

  2. 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.

  3. Nhấp vào Tiếp tục.

  4. (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.

  5. 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 projectIDregion ư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:

  1. Trong GitHub, hãy đẩy thay đổi vào nhánh đang hoạt động của ứng dụng Web.
  2. 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