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 tạo API REST dưới dạng 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ô máy chủ của riêng mình.

Ví dụ: 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 bài viết 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 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ể tuỳ ý điều chỉnh chế độ cài đặt bộ nhớ đệm.

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

  1. Đảm bảo bạn có 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 chạy Hosting, hãy xem Hướng dẫn bắt đầu sử dụng Hosting.

  2. Đảm bảo 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ử 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 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 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ử hàm HTTPS cho trang web Hosting

  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 mã sau.

    Mã này tạo một hàm HTTPS (có tên là bigben) phản hồi các yêu cầu HTTPS bằng BONG cho mỗi giờ trong ngày, giống như đồ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 Firebase Local Emulator Suite.

    1. Từ thư mục gốc của 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.

Truy cập tài liệu về 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 URL Firebase Hosting để hàm này có thể tạo nội dung động cho trang web do Firebase lưu trữ.

Bước 3: Chuyển hướng 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 hướng 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 hướng tất cả các yêu cầu từ đường dẫn ../bigben trên trang web Hosting để thực thi hàm bigben.

  1. Mở tệp firebase.json.

  2. Thêm cấu hình rewrite sau đây vào 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ư mong đợi bằng cách kiểm thử lại bằng trình mô phỏng Firebase.

    1. Từ thư mục gốc của 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 nối thêm URL bằng bigben, 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 vùng sau:

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

Truy cập trang cấu hình Hosting để biết thông tin chi tiết hơn 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ể tuỳ ý điều chỉnh chế độ cài đặt bộ nhớ đệm.

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ếp tục triển khai, kiểm thử và chạy hàm đó bằng 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 tuỳ chọn thời gian chạy để kiểm soát hành vi điều chỉnh theo tỷ lệ cho các hàm chạy trong môi trường sản xuất.

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

    firebase deploy --only functions,hosting

  2. Truy cập vào trang web trực tiếp và hàm của bạn tại các URL sau:

    • Miền con Firebase:
      PROJECT_ID.web.app/bigben và PROJECT_ID.firebaseapp.com/bigben

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

Sử dụng 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 dễ dàng hơn.

Phần sau đây cung cấp ví dụ hướng dẫn từng bước 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 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 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 hàm HTTPS:

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

  5. Trong tệp firebase.json, hãy chuyển hướng tất cả các yêu cầu đến hàm app. Thao tác viết lại này cho phép Express.js phân phát các đường dẫn phụ 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í 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 như sau:

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

Truy cập tài liệu về 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