Phục vụ nội dung động và lưu trữ các vi dịch vụ bằng Chức năng đám mây

Ghép nối các Chức năng đám mây với Dịch vụ lưu trữ Firebase để tạo và phân phát nội dung động của bạn hoặc xây dựng API REST dưới dạng vi dịch vụ.

Chức năng đám mây cho Firebase cho phép bạn tự động chạy mã phụ trợ để đáp ứng 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ý. Không cần phải quản lý và mở rộng quy mô máy chủ của riêng bạn.

Ví dụ: các trường hợp sử dụng và mẫu cho Chức năng đám mây được tích hợp với Firebase Hosting, hãy truy cập tổng quan về serverless của chúng tôi.

Kết nối các chức năng đám mây với dịch vụ lưu trữ Firebase

Phần này cung cấp ví dụ hướng dẫn cách kết nối một chức năng với Firebase Hosting.

Lưu ý rằng để cải thiện hiệu suất phân phát nội dung động, bạn có thể tùy ý điều chỉnh cài đặt bộ đệm của mình .

Bước 1: Thiết lập chức năng đám mây

  1. Đảm bảo rằng bạn có phiên bản Firebase CLI mới nhất 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 tạo Hosting, hãy xem hướng dẫn Bắt đầu cho Hosting .

  2. Đảm bảo rằng bạn đã thiết lập Chức năng đám mây:

    • Nếu đã thiết lập Chức năng đám mây, bạn có thể chuyển sang Bước 2: Tạo và kiểm tra chức năng HTTPS .

    • Nếu bạn chưa thiết lập Chức năng đám mây:

      1. Khởi tạo Chức năng đám mây bằng cách chạy lệnh sau từ thư mục gốc của dự án của bạ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 xem bạn có thư mục functions trong thư mục dự án cục bộ của mình không (được tạo bằng lệnh Firebase bạn vừa chạy). Thư mục functions này là nơi chứa mã cho Chức năng đám mây.

Bước 2: Tạo và kiểm tra chức năng HTTPS cho trang web Lưu trữ của bạn

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

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

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

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

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 tra cục bộ các chức năng của bạn bằng Bộ mô phỏng cục bộ Firebase .

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

      firebase emulators:start

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

Hãy truy cập tài liệu về Chức năng đám mây để 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 chức năng HTTPS này từ URL Lưu trữ Firebase để nó có thể tạo nội dung động cho trang web được lưu trữ trên Firebase của bạn.

Bước 3: Hướng các yêu cầu HTTPS tới chức năng của bạn

Với quy tắc viết lại , bạn có thể hướng các yêu cầu khớp với các mẫu cụ thể đến một đích duy nhất. Các bước sau đây chỉ cho bạn cách chuyển hướng tất cả các yêu cầu từ đường dẫn ../bigben trên trang web Lưu trữ của bạn để thực thi chức năng 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 chuyển hướng của bạn hoạt động như mong đợi bằng cách thử nghiệm lại với trình mô phỏng Firebase.

    1. Từ thư mục gốc của dự án cục bộ của bạn, 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 thêm URL bằng bigben , như vậy: http://localhost:5000/bigben

  4. Lặp lại chức năng của bạn 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 tra các lần lặp này.

Để có hiệu suất tốt nhất, hãy sắp xếp các chức năng của bạn 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 trang cấu hình Hosting để biết thêm chi tiết về quy tắc viết lại . Bạn cũng có thể tìm hiểu về thứ tự ưu tiên phản hồi cho các cấu hình Lưu trữ khác nhau.

Lưu ý rằng để cải thiện hiệu suất phân phát nội dung động, bạn có thể tùy ý điều chỉnh cài đặt bộ đệm của mình .

Bước 4: Triển khai chức năng của bạn

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

  1. Triển khai chức năng cũng như nội dung và cấu hình Lưu trữ của bạn vào 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 trang web trực tiếp và chức năng của bạn tại các URL sau:

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

    • Bất kỳ miền tùy chỉnh nào được kết nối :
      CUSTOM_DOMAIN /bigben

Sử dụng khung web

Bạn có thể sử dụng các khung web, như Express.js , trong Cloud Functions để phục vụ 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 cách sử dụng Express.js với Dịch vụ lưu trữ Firebase và Chức năng đám mây.

  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 tạo Express.js:

    const functions = require('firebase-functions');
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ục vụ chỉ mục trang web của chúng tôi 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 của bạn, hãy chuyển tất cả yêu cầu đến chức năng app . Việc viết lại này cho phép Express.js phân phát đường dẫn phụ khác mà chúng tôi đã đị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ể kích hoạ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 của bạn, 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);

Truy cập tài liệu về Chức năng đám mây để 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.

Bước tiếp theo