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 tra các thay đổi. Dịch vụ Lưu trữ Firebase cho phép bạn xem và thử nghiệm các thay đổi cục bộ cũng như tương tác bằng 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 tra thay đổi của bạn, Lưu trữ có thể tạo 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ừ dữ liệu lấy dữ liệu của bạn.

Trước khi bắt đầu

Hãy hoàn tất các bước được nêu trên trang Bắt đầu lưu trữ, cụ thể là các nhiệm vụ sau:

  1. Cài đặt hoặc cập nhật Giao diện dòng lệnh (CLI) của 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.

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

Bước 1: Thử nghiệm cục bộ

Nếu bạn đang thực hiệ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 thành phần được mô phỏng tài nguyên dự án phụ trợ, bạn có thể kiểm tra nội dung Lưu trữ và cấu hình cục bộ. Khi thử nghiệm cục bộ, Firebase phân phát ứng dụng web của bạn tại một trang web được lưu trữ cục bộ URL.

Tính năng lưu trữ là một phần của Bộ công cụ 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 Lưu trữ được mô phỏng và config, cũng như tài nguyên dự án được mô phỏng (không bắt buộc) (các hàm, cơ sở dữ liệu và quy tắc).

  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 thực, không được mô phỏng, tài nguyên của dự án (các hàm, cơ sở dữ liệu, quy tắc, v.v.). Thay vào đó, bạn có thể kết nối ứng dụng của mình để sử dụng bất kỳ dự án được mô phỏng nào (không bắt buộc) 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 | Chức năng đá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 đối với 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 của localhost. Chiến dịch này có nghĩa là bạn có thể truy cập nội dung được lưu trữ từ web trong máy tính của mình mà không phải từ các thiết bị khác trên mạng của bạn. Nếu bạn muốn thử nghiệm 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 chính thức phát hành, 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 "preview URL" ("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 tương tác với phần phụ trợ thực cho tất cả các tài nguyên của dự án (bằng ngoại lệ của mọi "được ghim" trong các lần viết lại config).

Xin lưu ý rằng mặc dù URL bản xem trước rất khó đoán (vì chúng có chứa mã băm), chúng đề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 bản 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ề. Ứng dụng sẽ trông tương tự như sau: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Để cập nhật các thay đổi đối với URL xem trước, hãy chạy lại lệnh đó. Nhãn hiệu 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 thời hạn của kênh.

Dịch vụ Lưu trữ Firebase hỗ trợ một Hành động GitHub tự động tạo và cập nhật URL xem trước khi bạn thực hiện thay đổi cho một yêu cầu lấy dữ liệu (pull request). Tìm hiểu cách thiết lập và sử dụng Hành động GitHub này.

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 dịch vụ Lưu trữ nội dung và cấu hình cho kênh phát trực tiếp của bạn. Firebase cung cấp một vài các lựa chọn 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ừ một kênh xem trước sang kênh trực tiếp của bạn

Tùy chọn này giúp bạn yên tâm rằng bạn đang triển khai cho kênh trực tiếp của mình chính xác nội dung và cấu hình mà bạn đã thử nghiệm trong một kênh xem trước. Tìm hiểu thêm giới thiệu nhân bản 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à các mã nhận dạng của các trang web Lưu trữ chứa các 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 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 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 phát 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 của bạn (bước tiếp theo).

Lựa chọn 2: Triển khai từ thư mục dự án cục bộ lên kênh trực tiếp

Lựa 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 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 của bạn (bước tiếp theo).

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

Cả hai tuỳ chọn ở trên triển khai nội dung và cấu hình Lưu trữ cho các trang web sau:

  • Miền con được Firebase cấp phép cho trang web Lưu trữ mặc định của bạn và bất kỳ các trang web Lưu trữ bổ sung:
    SITE_ID.web.app (như PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (như PROJECT_ID.firebaseapp.com)

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

Để hạn chế triển khai cho một trang web Lưu trữ cụ thể, 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 nhận xét vào 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 về việc 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 các nhiệm vụ có 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 nhiệm vụ trước hoặc sau khi triển khai. Ví dụ: một hook postDeploy 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. Tham khảo Tài liệu 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 đối với nội dung tĩnh, tính năng Lưu trữ Firebase sẽ tự động lưu nội dung trên CDN vào bộ nhớ đệm. Nếu bạn triển khai lại nội dung trang web, Firebase tự động xoá tất cả nội dung tĩnh đã lưu vào bộ nhớ đệm trên CDN để sẽ 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 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 Dịch vụ Lưu trữ Firebase đượ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" (SSL và không phải SSL lưu lượng truy cập).

Xoá tệp

Trong Lưu trữ Firebase, cách chính để xoá các tệp đã chọn 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