Kết hợp 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ô máy chủ của riêng mình.
Để xem các trường hợp sử dụng mẫu và mẫu cho Cloud Functions được tích hợp với Firebase Hosting, hãy tham khảo bài viết tổng quan về dịch vụ phi máy chủ.
Kết nối Cloud Functions với Firebase Hosting
Phần này cung cấp ví dụ từng bước 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ể điều chỉnh các chế độ cài đặt bộ nhớ đệm (không bắt buộc).
Bước 1: Thiết lập Cloud Functions
Đảm bảo rằng bạn đã cài đặt phiên bản mới nhất của Firebase CLI và rằng bạn đã khởi chạy Firebase Hosting.
Để xem hướng dẫn chi tiết về cách cài đặt CLI và khởi chạy Hosting, hãy tham khảo Hướng dẫn bắt đầu sử dụng Hosting.
Đả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ử hàm HTTPS.
Nếu chưa thiết lập Cloud Functions:
Khởi chạy Cloud Functions bằng cách chạy lệnh sau từ gốc thư mục dự án của bạn:
firebase init functions
Khi được nhắc, hãy chọn JavaScript (ví dụ từng bước này sử dụng JS).
Kiểm tra để đảm bảo bạn có thư mục
functionstrong thư mục dự án cục bộ (do lệnh Firebase mà bạn vừa chạy tạo). Thư mụcfunctionsnày là nơi chứa mã cho Cloud Functions
Bước 2: Tạo và kiểm thử hàm HTTPS cho trang web Hosting
Mở
/functions/index.jstrong trình chỉnh sửa mà bạn yêu thích.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ằngBONGcho 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>`); });Kiểm thử các hàm của bạn ở chế độ cục bộ bằng Firebase Local Emulator Suite.
Từ gốc thư mục dự án cục bộ của bạn, hãy chạy lệnh sau:
firebase emulators:start
Truy cập vào hàm thông qua URL cục bộ do CLI trả về, ví dụ: ví dụ:
.http://localhost:5001/PROJECT_ID/us-central1/bigben
Hãy tham khả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ừ Firebase Hosting URL để 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
các quy tắc viết lại, bạn có thể chuyển trực tiếp 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 sẽ hướng dẫn
bạn cách chuyển trực tiếp tất cả các yêu cầu từ đường dẫn ../bigben trên trang web Hosting
đến để thực thi hàm bigben.
Mở tệp
firebase.json.Thêm cấu hình
rewritesau vào phầnhosting:"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) } } ] }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.
Từ gốc thư mục dự án cục bộ của bạn, hãy chạy lệnh sau:
firebase emulators:start
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êmbigbenvào URL, như sau:http://localhost:5000/bigben
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 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-west1us-central1us-east1europe-west1asia-east1
Hãy tham khả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 Hosting cấu hình.
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 các chế độ cài đặt bộ nhớ đệm (không bắt buộc).
Bước 4: Triển khai hàm của bạn
Sau 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ế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 thiết lập các tuỳ 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.
Triển khai hàm cũng như nội dung Hosting và cấu hình vào trang web của bạn bằng cách chạy lệnh sau từ gốc thư mục dự án cục bộ của bạn:
firebase deploy --only functions,hosting
Truy cập vào trang web trực tiếp và hàm của bạn tại các URL sau:
Các miền phụ của Firebase:
PROJECT_ID.web.app/bigbenvàPROJECT_ID.firebaseapp.com/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ụ từng bước về cách sử dụng Express.js với Firebase Hosting và Cloud Functions.
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:npm install express --save
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();
Thêm 2 điểm cuối sau:
Thêm điểm cuối đầu tiên để phân phát chỉ mục của 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>`); });Và một điểm cuối khác để trả về số lượng
BONGdướ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)}); });
Xuất ứng dụng Express.js dưới dạng hàm HTTPS:
exports.app = functions.https.onRequest(app);
Trong tệp
firebase.json, hãy chuyển trực tiếp tất cả các yêu cầu đến hàmapp. Quy tắc viết lại này cho phép Express.js phân phát đường dẫn con 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, giờ đây 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 CORS yêu cầu trên các điểm cuối của chúng tôi.
Cài đặt phần mềm trung gian
corsbằng cách chạy lệnh sau:npm install --save cors
Mở tệp
/functions/index.js, sau đó thêmcorsvào ứng dụng Express.js, như sau:const cors = require('cors')({origin: true}); app.use(cors);
Hãy tham khả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
Thiết lập bộ nhớ đệm cho nội dung động của bạn trên CDN toàn cầu.
Tương tác với các dịch vụ Firebase khác bằng SDK của Firebase dành cho quản trị viên.
Xem lại giá và hạn mức và giới hạn cho Cloud Functions.