Phân phối nội dung động và dịch vụ vi mô lưu trữ bằng Cloud Functions

Ghép nối Cloud Functions với Firebase Hosting để tạo và phân phát nội dung động hoặc xây dựng API REST dưới dạng các dịch vụ vi mô.

Cloud Functions for Firebase cho phép bạn tự động chạy mã phụ trợ để phản hồi các yêu cầu HTTPS. Mã của bạn được lưu trữ trên đám mây của Google và chạy trong một môi trường được quản lý. Bạn không cần quản lý và mở rộng quy mô các máy chủ của riêng mình.

Để xem các trường hợp sử dụng và mẫu ví dụ cho Cloud Functions được tích hợp với Firebase Hosting, hãy truy cập vào bài tổng quan về mô hình không máy chủ của chúng tôi.

Kết nối Cloud Functions với Firebase Hosting

Phần này cung cấp một ví dụ hướng dẫn từng bước để kết nối một hàm với Firebase Hosting.

Xin lưu ý rằng để cải thiện hiệu suất phân phát nội dung động, bạn có thể điều chỉnh chế độ cài đặt bộ nhớ đệm (không bắt buộc).

Bước 1: Thiết lập Cloud Functions

  1. Đảm bảo rằng bạn đang dùng phiên bản mới nhất của CLI Firebase và bạn đã khởi chạy Firebase Hosting.

    Để biết hướng dẫn chi tiết về cách cài đặt CLI và khởi động Hosting, hãy xem Hướng dẫn bắt đầu sử dụng cho Hosting.

  2. Đảm bảo rằng bạn đã thiết lập Cloud Functions:

    • Nếu đã thiết lập Cloud Functions, bạn có thể chuyển sang Bước 2: Tạo và kiểm thử một hàm HTTPS.

    • Nếu bạn chưa thiết lập Cloud Functions:

      1. Khởi chạy Cloud Functions bằng cách chạy lệnh sau từ gốc của thư mục dự án:

        firebase init functions

      2. Khi được nhắc, hãy chọn JavaScript (ví dụ minh hoạ này sử dụng JS).

      3. Kiểm tra để đảm bảo bạn có thư mục functions trong thư mục dự án cục bộ (do lệnh Firebase mà bạn vừa chạy tạo). Thư mục functions này là nơi lưu trữ mã cho Cloud Functions.

Bước 2: Tạo và kiểm thử một hàm HTTPS cho trang web Hosting của bạn

  1. Mở /functions/index.js trong trình chỉnh sửa bạn yêu thích.

  2. Thay thế nội dung của tệp bằng đoạn mã sau.

    Đoạn mã này tạo một hàm HTTPS (được đặt tên là bigben) để phản hồi các yêu cầu HTTPS bằng một BONG cho mỗi giờ trong ngày, giống như một chiếc đồng hồ.

    const functions = require('firebase-functions/v1');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. Kiểm thử các hàm cục bộ bằng cách sử dụng Firebase Local Emulator Suite.

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

      firebase emulators:start

    2. Truy cập vào hàm thông qua URL cục bộ do CLI trả về, ví dụ: http://localhost:5001/PROJECT_ID/us-central1/bigben.

Hãy truy cập vào tài liệu Cloud Functions để tìm hiểu thêm về các yêu cầu HTTPS.

Bước tiếp theo sẽ hướng dẫn bạn cách truy cập vào hàm HTTPS này từ một Firebase HostingURL để hàm này có thể tạo nội dung động cho trang web được lưu trữ trên Firebase.

Bước 3: Chuyển trực tiếp các yêu cầu HTTPS đến hàm của bạn

Với quy tắc viết lại, bạn có thể chuyển các yêu cầu khớp với các mẫu cụ thể đến một đích đến duy nhất. Các bước sau đây cho bạn biết cách chuyển tất cả các yêu cầu từ đường dẫn ../bigben trên trang web Hosting của bạn để thực thi hàm bigben.

  1. Mở tệp firebase.json.

  2. Thêm cấu hình rewrite sau đây trong phần hosting:

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. Xác nhận rằng lệnh chuyển hướng hoạt động như dự kiến bằng cách kiểm thử lại bằng trình mô phỏng Firebase.

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

      firebase emulators:start

    2. Truy cập vào URL được lưu trữ cục bộ cho trang web của bạn do CLI trả về (thường là localhost:5000), nhưng hãy thêm bigben vào URL, như sau: http://localhost:5000/bigben

  4. Lặp lại hàm và chức năng của hàm cho trang web của bạn. Sử dụng trình mô phỏng Firebase để kiểm thử các lần lặp lại này.

Để có hiệu suất tốt nhất, hãy đặt các hàm của bạn cùng với Hosting bằng cách chọn một trong các khu vực sau:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

Truy cập vào trang cấu hình Hosting để biết thêm thông tin chi tiết về các quy tắc viết lại. Bạn cũng có thể tìm hiểu về thứ tự ưu tiên của các phản hồi cho nhiều cấu hình Hosting.

Xin lưu ý rằng để cải thiện hiệu suất phân phát nội dung động, bạn có thể điều chỉnh chế độ cài đặt bộ nhớ đệm (không bắt buộc).

Bước 4: Triển khai hàm

Sau khi hàm hoạt động như mong muốn trong trình mô phỏng, bạn có thể tiến hành triển khai, kiểm thử và chạy hàm đó bằng các tài nguyên dự án thực. Đây là thời điểm thích hợp để cân nhắc việc đặt các lựa chọn thời gian chạy nhằm kiểm soát hành vi mở rộng quy mô cho các hàm đang chạy trong quá trình sản xuất.

  1. Triển khai hàm cũng như nội dung và cấu hình Hosting vào trang web của bạn bằng cách chạy lệnh sau từ gốc của thư mục dự án cục bộ:

    firebase deploy --only functions,hosting

  2. Truy cập vào trang web đang hoạt động và hàm của bạn tại các URL sau:

    • Các miền phụ Firebase của bạn:
      PROJECT_ID.web.app/bigben và PROJECT_ID.firebaseapp.com/bigben

    • Mọi miền tuỳ chỉnh được kết nối:
      CUSTOM_DOMAIN/bigben

Sử dụng một khung web

Bạn có thể sử dụng các khung web, chẳng hạn như Express.js, trong Cloud Functions để phân phát nội dung động của ứng dụng và viết các ứng dụng web phức tạp một cách dễ dàng hơn.

Phần sau đây cung cấp một ví dụ hướng dẫn về cách sử dụng Express.js với Firebase Hosting và Cloud Functions.

  1. Cài đặt Express.js trong dự án cục bộ bằng cách chạy lệnh sau từ thư mục functions:

    npm install express --save

  2. Mở tệp /functions/index.js, sau đó nhập và khởi động Express.js:

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. Thêm hai điểm cuối sau:

    1. Thêm điểm cuối đầu tiên để phân phát chỉ mục của trang web tại /.

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. Và một điểm cuối khác để trả về số lượng BONG dưới dạng API, ở định dạng JSON, trong /api:

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. Xuất ứng dụng Express.js dưới dạng một hàm HTTPS:

    exports.app = functions.https.onRequest(app);

  5. Trong tệp firebase.json, hãy chuyển tất cả các yêu cầu đến hàm app. Quy tắc viết lại này cho phép Express.js phân phát các đường dẫn con khác nhau mà chúng ta đã định cấu hình (trong ví dụ này là / và /api).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Thêm phần mềm trung gian

Tiếp tục với ví dụ của chúng ta, giờ đây, khi đang sử dụng Express.js, bạn có thể thêm phần mềm trung gian Express.js theo cách thông thường. Ví dụ: bạn có thể bật các yêu cầu CORS trên các điểm cuối của chúng tôi.

  1. Cài đặt phần mềm trung gian cors bằng cách chạy lệnh sau:

    npm install --save cors

  2. Mở tệp /functions/index.js, sau đó thêm cors vào ứng dụng Express.js của bạn, như sau:

    const cors = require('cors')({origin: true});
app.use(cors);

Hãy truy cập vào tài liệu Cloud Functions để tìm hiểu thêm về cách sử dụng Firebase với các ứng dụng Express và mô-đun trung gian.

Các bước tiếp theo