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 dịch vụ vi mô.

Cloud Functions for Firebase cho phép bạn tự động chạy phần 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ôi trường được quản lý. Bạn không cần phải tự quản lý và mở rộng quy mô máy chủ.

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

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 về cách 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ể tinh chỉnh chế độ cài đặt bộ nhớ đệm nếu muốn.

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à mà 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 tạo Hosting, hãy xem Hướng dẫn bắt đầu sử dụng 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ể tiếp tục 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ụ hướng dẫn này sử dụng JS).

      3. Kiểm tra để đảm bảo bạn có thư mục functions trong dự án cục bộ thư mục (được tạo bởi lệnh Firebase mà bạn vừa chạy). Chiến dịch này Thư mục functions là nơi chứa 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.

    Mã này tạo một hàm HTTPS (có tên là bigben) phản hồi HTTPS các yêu cầu có 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ủa bạn 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 hàm này qua URL cục bộ do CLI trả về, đối với ví dụ: http://localhost:5001/PROJECT_ID/us-central1/bigben.

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 hàm HTTPS này từ một URL Firebase Hosting để có thể tạo nội dung động cho Trang web được lưu trữ trên Firebase.

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

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

  1. Mở tệp firebase.json của bạn.

  2. Thêm cấu hình rewrite sau 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 của bạn hoạt động như dự kiến bằng cách thử nghiệm lại với 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 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 nối URL bằng bigben như sau: http://localhost:5000/bigben

  4. Lặp lại chức năng và chức năng của nó 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 sắp xếp lại các hàm của bạn bằng Hosting theo chọn một trong các khu vực sau:

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

Truy cập trang cấu hình Hosting cho thêm chi tiết về quy tắc ghi lại. Bạn có thể cũng sẽ tìm hiểu về thứ tự ưu tiên của 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ể tinh chỉnh chế độ cài đặt bộ nhớ đệm nếu muốn.

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

Khi hàm của bạn hoạt động như mong muốn trong trình mô phỏng, bạn có thể tiếp tục triển khai, thử nghiệm và chạy ứng dụng bằng tài nguyên dự án thực. Đây là một đây là thời điểm thích hợp để cân nhắc đặt tuỳ chọn thời gian chạy thành kiểm soát hành vi điều chỉnh tỷ lệ cho các hàm chạy trong phiên bản chính thức.

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

    firebase deploy --only functions,hosting

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

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

    • Bất kỳ miền tuỳ chỉnh nào đã kết nối:
      CUSTOM_DOMAIN/bigben

Sử dụng khung web

Bạn có thể dùng các khung web như Express.js, trong Cloud Functions đến 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 dễ dàng hơn.

Phần sau đây cung cấp ví dụ từng bước để sử dụng Express.js với Firebase Hosting và Cloud Functions.

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

    npm install express --save

  2. Mở tệp /functions/index.js của bạn, sau đó nhập và khởi chạy 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 là một API trong 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 hàm HTTPS:

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

  5. Trong tệp firebase.json, hãy hướng mọi yêu cầu đến hàm app. Việc viết lại này cho phép Express.js phân phát đường dẫn con khác nhau mà chúng tôi được đị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í dụ của chúng tôi, bây giờ bạn đ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 Hàm 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, như thế:

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

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 phần mềm trung gian.

Các bước tiếp theo