Catch up on highlights from Firebase at Google I/O 2023. Learn more

Cung cấp nội dung động và lưu trữ các dịch vụ nhỏ với 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 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 Dịch vụ lưu trữ Firebase, hãy truy cập tổng quan về serverless của chúng tôi.

Kết nối chức năng đám mây với Firebase Hosting

Phần này cung cấp ví dụ hướng dẫn để kết nối một chức năng với Dịch vụ lưu trữ Firebase.

Lưu ý rằng để cải thiện hiệu suất phục vụ 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 Dịch vụ lưu trữ Firebase.

    Để biết hướng dẫn chi tiết về cách cài đặt CLI và khởi chạy Dịch vụ lưu trữ, hãy xem hướng dẫn Bắt đầu cho Dịch vụ lưu trữ .

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

    • Nếu bạn đã thiết lập Chức năng đám mây, bạn có thể tiếp tục 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 thư mục 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ởi lệnh Firebase mà 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 bằng mã sau.

    Mã này tạo 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 cách sử dụng Bộ giả lập cục bộ Firebase .

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

      firebase emulators:start

    2. Truy cập chức nă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 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 để chức năng này 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: Yêu cầu HTTPS trực tiếp đến 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 hướng dẫn bạn cách 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": "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 kiểm tra lại với trình giả lập Firebase.

    1. Từ thư mục gốc của thư mục 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 với 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 giả lập Firebase để kiểm tra các lần lặp này.

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 đối với các cấu hình Dịch vụ lưu trữ khác nhau.

Lưu ý rằng để cải thiện hiệu suất phục vụ 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 chức năng đó 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 thay đổi quy mô cho các chức năng đang chạy trong sản xuất.

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

    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

    • Mọi miền tùy chỉnh được 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ối 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 về 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 chạy 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, bên dưới /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 hướng tất cả cá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ục vụ đườ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ể 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 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 Chức năng đám mây để tìm hiểu thêm về cách sử dụng Firebase với ứng dụng Express và mô-đun phần mềm trung gian.

Bước tiếp theo