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+ hoặc Angular 18.2.x+) 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 như 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 trực tiếp. 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.

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 bạn tạo một cam kết mới cho 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 đượ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 được đề xuất trong bảng điều khiển Firebase, nhưng bạn có thể triển khai theo những cách 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 tách 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

  1. Trong bảng điều khiển của Firebase, hãy chuyển đến Hosting & Serverless > App Hosting.

  2. Nhấp vào Get started (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 chế độ thiết lập 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ữ mà bạn vừa tạo bằng cách phân tách 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 này đượ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 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 con miễn phí để người dùng cuối có thể truy cập vào ứng dụng web của bạn. Miền con này có định dạng 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 của 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 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 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 thử quá trình thiết lập App Hosting của bạn:

  1. Trong nhánh phân tách của 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 mọi thay đổi dễ nhận biết mà bạn muốn, sau đó đẩy thay đổi đó 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 của Firebase, hãy theo dõi App Hosting khi thay đổi mới đượ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 đó trên trang chủ của ứng dụng.

Các bước tiếp theo