Kiểm thử cục bộ ứng dụng web của bạn, chia sẻ các thay đổi với người khác, sau đó triển khai trực tiếp

Trước khi triển khai cho trang web đang hoạt động, bạn nên xem và kiểm thử các thay đổi. Firebase Hosting cho phép bạn xem và kiểm thử các thay đổi cục bộ, đồng thời tương tác với các tài nguyên dự án phụ trợ được mô phỏng. Nếu bạn cần đồng đội xem và kiểm thử các thay đổi của bạn, Hosting có thể tạo URL xem trước tạm thời có thể chia sẻ cho trang web của bạn. Chúng tôi thậm chí còn hỗ trợ tính năng tích hợp GitHub để triển khai từ một yêu cầu kéo.

Trước khi bắt đầu

Hoàn tất các bước nêu trên Hosting trang Bắt đầu, cụ thể là các việc sau:

  1. Cài đặt hoặc cập nhật CLI Firebase lên phiên bản mới nhất.
  2. Kết nối thư mục dự án cục bộ (chứa nội dung của ứng dụng) với dự án Firebase của bạn.

Bạn có thể tuỳ ý triển khai nội dung và cấu hình Hosting của ứng dụng, nhưng đây không phải là điều kiện tiên quyết cho các bước trên trang này.

Bước 1: Kiểm thử cục bộ

Nếu đang thực hiện các lần lặp lại nhanh hoặc muốn ứng dụng của mình tương tác với các tài nguyên dự án phụ trợ được mô phỏng, bạn có thể kiểm thử nội dung và cấu hình Hosting của mình tại chỗ. Khi kiểm thử cục bộ, Firebase sẽ phân phát ứng dụng web của bạn tại một URL được lưu trữ cục bộ.

Hosting là một phần của Firebase Local Emulator Suite, cho phép ứng dụng của bạn tương tác với nội dung và cấu hình Hosting được mô phỏng, cũng như các tài nguyên dự án được mô phỏng (các hàm, cơ sở dữ liệu và quy tắc) (nếu muốn).

  1. (Không bắt buộc) Theo mặc định, ứng dụng được lưu trữ cục bộ của bạn sẽ tương tác với các tài nguyên dự án thực (hàm, cơ sở dữ liệu, quy tắc, v.v.) chứ không phải tài nguyên mô phỏng. Thay vào đó, bạn có thể kết nối ứng dụng của mình (không bắt buộc) để sử dụng mọi tài nguyên dự án được mô phỏng mà bạn đã định cấu hình. Tìm hiểu thêm: Realtime Database | Cloud Firestore | Cloud Functions

  2. Từ gốc của thư mục dự án cục bộ, hãy chạy lệnh sau:

    firebase emulators:start

  3. Mở ứng dụng web của bạn tại URL cục bộ do CLI trả về (thường là http://localhost:5000).

  4. Để cập nhật URL cục bộ theo những thay đổi, hãy làm mới trình duyệt.

Kiểm thử trên các thiết bị cục bộ khác

Theo mặc định, các trình mô phỏng chỉ phản hồi yêu cầu từ localhost. Điều này có nghĩa là bạn sẽ có thể truy cập vào nội dung được lưu trữ từ trình duyệt web trên máy tính nhưng không thể truy cập từ các thiết bị khác trên mạng của bạn. Nếu bạn muốn kiểm thử từ các thiết bị cục bộ khác, hãy định cấu hình firebase.json như sau:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

Bước 2: Xem trước và chia sẻ

Nếu muốn người khác xem các thay đổi đối với ứng dụng web của bạn trước khi phát hành công khai, bạn có thể sử dụng kênh xem trước.

Sau khi bạn triển khai đến một kênh xem trước, Firebase sẽ phân phát ứng dụng web của bạn tại một "URL xem trước". Đây là một URL tạm thời có thể chia sẻ. Khi sử dụng một URL xem trước, ứng dụng web của bạn sẽ tương tác với phần phụ trợ thực cho tất cả các tài nguyên dự án (ngoại trừ mọi hàm "được ghim" trong cấu hình viết lại).

Xin lưu ý rằng mặc dù rất khó đoán được URL xem trước (vì URL này chứa một hàm băm ngẫu nhiên), nhưng chúng là URL công khai. Vì vậy, bất kỳ ai biết URL đều có thể truy cập vào URL đó.

  1. Từ gốc của thư mục dự án cục bộ, hãy chạy lệnh sau:

    firebase hosting:channel:deploy CHANNEL_ID

    Thay thế CHANNEL_ID bằng một chuỗi không có khoảng trắng (ví dụ: feature_mission-2-mars). Mã nhận dạng này sẽ được dùng để tạo URL xem trước được liên kết với kênh xem trước.

  2. Mở ứng dụng web của bạn tại URL xem trước do CLI trả về. Nội dung sẽ có dạng như sau: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Để cập nhật URL xem trước theo các thay đổi, hãy chạy lại lệnh đó. Nhớ chỉ định cùng một CHANNEL_ID trong lệnh.

Tìm hiểu về cách quản lý kênh xem trước, bao gồm cả cách đặt thời gian hết hạn cho kênh.

Firebase Hosting hỗ trợ một Thao tác trên GitHub tự động tạo và cập nhật URL xem trước khi bạn xác nhận các thay đổi đối với một yêu cầu kéo. Tìm hiểu cách thiết lập và sử dụng Thao tác này trên GitHub.

Bước 3: Triển khai trực tiếp

Khi bạn đã sẵn sàng chia sẻ các thay đổi của mình với mọi người, hãy triển khai nội dung và cấu hình Hosting cho kênh phát sóng trực tiếp. Firebase cung cấp một số lựa chọn khác nhau cho bước này, tuỳ thuộc vào trường hợp sử dụng của bạn (xem các lựa chọn bên dưới).

Cách 1: Sao chép từ kênh xem trước sang kênh phát sóng công khai

Lựa chọn này giúp bạn yên tâm rằng bạn đang triển khai nội dung và cấu hình chính xác mà bạn đã kiểm thử trong kênh xem trước cho kênh phát hành công khai. Tìm hiểu thêm về sao chép phiên bản.

  1. Từ bất kỳ thư mục nào, hãy chạy lệnh sau:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Thay thế từng phần giữ chỗ bằng nội dung sau:

    • SOURCE_SITE_ID và TARGET_SITE_ID: Đây là mã nhận dạng của các trang web Hosting có chứa các kênh.

      • Đối với trang web Hosting mặc định, hãy sử dụng mã dự án Firebase.
      • Bạn có thể chỉ định những trang web nằm trong cùng một dự án Firebase hoặc thậm chí là trong các dự án Firebase khác nhau.

    • SOURCE_CHANNEL_ID: Đây là giá trị nhận dạng cho kênh hiện đang phân phát phiên bản mà bạn muốn triển khai cho kênh phát sóng trực tiếp.

      • Đối với kênh phát trực tiếp, hãy dùng live làm mã nhận dạng kênh.

  2. Xem các thay đổi (bước tiếp theo).

Cách 2: Triển khai từ thư mục dự án cục bộ đến kênh phát sóng

Lựa chọn này giúp bạn linh hoạt điều chỉnh các cấu hình dành riêng cho kênh phát trực tiếp hoặc triển khai ngay cả khi bạn chưa sử dụng kênh xem trước.

  1. Từ gốc của thư mục dự án cục bộ, hãy chạy lệnh sau:

    firebase deploy --only hosting

  2. Xem các thay đổi (bước tiếp theo).

Bước 4: Xem các thay đổi trên trang web đang hoạt động

Cả hai lựa chọn trên đều triển khai nội dung và cấu hình Hosting cho các trang web sau:

  • Các miền phụ do Firebase cung cấp cho trang web Hosting mặc định và mọi trang web Hosting bổ sung:
    SITE_ID.web.app (chẳng hạn như PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (chẳng hạn như PROJECT_ID.firebaseapp.com)

  • Mọi miền tuỳ chỉnh mà bạn đã kết nối với(các) trang web Hosting của mình

Để hạn chế việc triển khai cho một trang web Hosting cụ thể, hãy chỉ định mục tiêu triển khai trong lệnh CLI.

Thông tin và hoạt động triển khai khác

Thêm nhận xét cho quá trình triển khai

Bạn có thể tuỳ ý thêm bình luận vào một quy trình triển khai. Bình luận này sẽ xuất hiện cùng với thông tin triển khai khác trên trang tổng quan Hosting trong bảng điều khiển Firebase. Ví dụ:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Thêm các tác vụ có kịch bản trước khi triển khai và sau khi triển khai

Bạn có thể tuỳ ý kết nối các tập lệnh shell với lệnh firebase deploy để thực hiện các tác vụ trước khi triển khai hoặc sau khi triển khai. Ví dụ: một lệnh gọi sau khi triển khai có thể thông báo cho quản trị viên về việc triển khai nội dung mới trên trang web. Hãy tham khảo tài liệu về CLI Firebase để biết thêm thông tin chi tiết.

Lưu nội dung đã triển khai vào bộ nhớ đệm

Khi có yêu cầu về nội dung tĩnh, Firebase Hosting sẽ tự động lưu nội dung vào bộ nhớ đệm trên CDN. Nếu bạn triển khai lại nội dung trang web, Firebase sẽ tự động xoá tất cả nội dung tĩnh được lưu vào bộ nhớ đệm trên CDN để các yêu cầu mới nhận được nội dung mới của bạn.

Xin lưu ý rằng bạn có thể định cấu hình hoạt động lưu vào bộ nhớ đệm của nội dung động.

Phân phát qua HTTPS

Đảm bảo rằng tất cả tài nguyên bên ngoài không được lưu trữ trên Firebase Hosting đều được tải qua SSL (HTTPS),bao gồm cả mọi tập lệnh bên ngoài. Hầu hết các trình duyệt đều không cho phép người dùng tải "nội dung hỗn hợp" (lưu lượng truy cập SSL và không phải SSL).

Xoá tệp

Trong Firebase Hosting, cách chính để xoá các tệp đã chọn khỏi một trang web đã triển khai là xoá các tệp đó trên thiết bị, rồi triển khai lại.

Các bước tiếp theo