Kiểm thử ứng dụng web của bạn trên thiết bị, chia sẻ nội dung 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à thử nghiệm các thay đổi. Tính năng Lưu trữ Firebase cho phép bạn xem và kiểm tra các thay đổi trên máy cũng như tương tác với các tài nguyên của dự án phụ trợ được mô phỏng. Nếu bạn cần các thành viên trong nhóm xem và kiểm tra các thay đổi, thì tính năng Lưu trữ có thể tạo các URL xem trước tạm thời, có thể chia sẻ cho trang web của bạn. Thậm chí, chúng tôi còn hỗ trợ tích hợp GitHub để triển khai từ yêu cầu lấy dữ liệu.

Trước khi bắt đầu

Hãy hoàn thành các bước nêu trên trang Bắt đầu lưu trữ, cụ thể là những việc sau:

  1. Cài đặt hoặc cập nhật Firebase CLI 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 Lưu trữ của ứng dụng, nhưng đó 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: Thử nghiệm cục bộ

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

Lưu trữ là một phần của Bộ mô phỏng cục bộ Firebase, cho phép ứng dụng của bạn tương tác với nội dung và cấu hình Lưu trữ đượ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, chứ không phải được mô phỏng, (hàm, cơ sở dữ liệu, quy tắc, v.v.). Thay vào đó, bạn có thể tuỳ ý kết nối ứng dụng của mình để 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: Cơ sở dữ liệu theo thời gian thực | Cloud Firestore | Hàm đám mây

  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 các thay đổi cho URL cục bộ, hãy làm mới trình duyệt của bạn.

Kiểm thử từ các thiết bị cục bộ khác

Theo mặc định, trình mô phỏng chỉ phản hồi các yêu cầu từ localhost. Điều này có nghĩa là bạn có thể truy cập vào nội dung được lưu trữ từ trình duyệt web của máy tính chứ không thể truy cập từ các thiết bị khác trên mạng. 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 bạn muốn người khác xem các thay đổi đối với ứng dụng web của mình trước khi phát trực tiếp, bạn có thể sử dụng kênh xem trước.

Sau khi bạn triển khai cho kênh xem trước, Firebase sẽ phân phát ứng dụng web của bạn tại "URL xem trước", là URL tạm thời và có thể chia sẻ. Khi sử dụng 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ả tài nguyên dự án (ngoại trừ hàm"được ghim" trong cấu hình ghi lại).

Xin lưu ý rằng mặc dù rất khó đoán các URL xem trước (vì các URL này chứa một hàm băm ngẫu nhiên), nhưng các URL này đều công khai. Vì vậy, bất kỳ ai biết URL đó đều có thể truy cập 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ó dấu cách (ví dụ: feature_mission-2-mars). Mã này sẽ được dùng để tạo URL xem trướ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ề. Mã sẽ có dạng như sau: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Để cập nhật các thay đổi cho URL xem trước, hãy chạy lại chính lệnh này. Hãy 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 ngày hết hạn của kênh.

Tính năng Lưu trữ Firebase hỗ trợ một Hành động trên GitHub tự động tạo và cập nhật URL xem trước khi bạn thực hiện các thay đổi đối với yêu cầu lấy dữ liệu. 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 với mọi người, hãy triển khai nội dung và cấu hình Lưu trữ cho kênh trực tiếp của bạn. 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).

Lựa chọn 1: Sao chép kênh xem trước vào kênh trực tiếp của bạn

Tuỳ chọn này giúp đảm bảo rằng bạn đang triển khai chính xác nội dung và cấu hình mà bạn đã thử nghiệm trong kênh xem trước cho kênh trực tiếp. Tìm hiểu thêm về cách sao chép các phiên bản.

  1. Từ thư mục bất kỳ, 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:

    • SOURCE_SITE_ID và TARGET_SITE_ID: Đây là mã của trang web Lưu trữ có chứa kênh.

      • Đối với trang web Lưu trữ mặc định, hãy sử dụng mã dự án Firebase.
      • Bạn có thể chỉ định các trang web trong cùng một dự án Firebase hoặc thậm chí 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 bạn muốn triển khai cho kênh trực tiếp của mình.

      • Đối với kênh trực tiếp, hãy sử 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ộ sang kênh trực tiếp

Tuỳ chọn này cho phép bạn linh hoạt điều chỉnh các cấu hình dành riêng cho kênh 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 tùy chọn ở trên đều triển khai cấu hình và nội dung Lưu trữ của bạn cho các trang web sau:

  • Miền con do Firebase cấp phép cho trang web Lưu trữ mặc định và mọi trang web Lưu trữ khác:
    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)

  • Bất kỳ miền tuỳ chỉnh nào mà bạn đã kết nối với(các) trang web Lưu trữ

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

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

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

Bạn có thể tuỳ ý thêm nhận xét vào quá trình triển khai. Nhận xét này sẽ hiển thị cùng với thông tin triển khai khác trên Trang tổng quan lưu trữ trong bảng điều khiển của Firebase. Ví dụ:

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

Thêm tác vụ tập lệnh triển khai trước và sau 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ụ triển khai trước hoặc sau triển khai. Ví dụ: hook Postimplementation có thể thông báo cho quản trị viên về việc triển khai nội dung trang web mới. Hãy tham khảo tài liệu về Giao diện dòng lệnh (CLI) của 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 cho nội dung tĩnh, tính năng Lưu trữ Firebase 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 của mình, Firebase sẽ tự động xoá tất cả nội dung tĩnh đã 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.

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

Phân phát qua HTTPS

Đảm bảo rằng tất cả các tài nguyên bên ngoài không được lưu trữ trên tính năng Lưu trữ Firebase đề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 tính năng Lưu trữ Firebase, 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 máy, sau đó triển khai lại.

Các bước tiếp theo