Obsługa treści dynamicznych i hostowanie mikroserwisów za pomocą Cloud Functions

Połącz usługę Cloud Functions z usługą Firebase Hosting, aby generować i wyświetlać treści dynamiczne lub tworzyć interfejsy API REST jako mikroserwisy.

Cloud Functions for Firebase umożliwia automatyczne uruchamianie kodu backendu w odpowiedzi na żądania HTTPS. Twój kod jest przechowywany w chmurze Google i działa w zarządzanym środowisku. Nie musisz zarządzać własnymi serwerami ani skalować ich działania.

Przykładowe przypadki użycia i próbki dotyczące usługi Cloud Functions zintegrowanej z Firebase Hosting znajdziesz w artykule Informacje o usłudze bez serwera.

Połącz Cloud Functions z Firebase Hosting

W tej sekcji znajdziesz przykładowy przewodnik po łączeniu funkcji z funkcją Firebase Hosting.

Aby zwiększyć skuteczność dostarczania treści dynamicznych, możesz opcjonalnie dostosować ustawienia pamięci podręcznej.

Krok 1. Skonfiguruj Cloud Functions

  1. Upewnij się, że masz najnowszą wersję interfejsu wiersza poleceń Firebase i że masz zainicjowany Firebase Hosting.

    Szczegółowe instrukcje dotyczące instalowania interfejsu wiersza poleceń i inicjowania usługi Hosting znajdziesz w przewodniku Pierwsze kroki z Hosting.

  2. Upewnij się, że masz skonfigurowane Cloud Functions:

    • Jeśli masz już skonfigurowaną funkcję Cloud Functions, możesz przejść do kroku 2: utwórz i przetestuj funkcję HTTPS.

    • Jeśli nie masz skonfigurowanego Cloud Functions:

      1. Aby zainicjować Cloud Functions, uruchom to polecenie w katalogu głównym katalogu projektu:

        firebase init functions

      2. Gdy pojawi się odpowiedni komunikat, wybierz JavaScript (w tym przykładzie używamy JS).

      3. Sprawdź, czy w katalogu lokalnym projektu (utworzonym przez właśnie uruchomione polecenie Firebase) jest katalog functions. W katalogu functions znajduje się kod aplikacji Cloud Functions.

Krok 2. Utwórz i przetestuj funkcję HTTPS dla witryny Hosting

  1. Otwórz plik /functions/index.js w ulubionym edytorze.

  2. Zastąp zawartość pliku tym kodem.

    Ten kod tworzy funkcję HTTPS (o nazwie bigben), która odpowiada na żądania HTTPS BONG dla każdej godziny dnia, tak jak zegar.

    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. Testuj funkcje lokalnie za pomocą funkcji Firebase Local Emulator Suite.

    1. W korzenia katalogu projektu lokalnego uruchom to polecenie:

      firebase emulators:start

    2. Uzyskaj dostęp do funkcji za pomocą lokalnego adresu URL zwróconego przez interfejs wiersza poleceń, na przykład: http://localhost:5001/PROJECT_ID/us-central1/bigben.

Więcej informacji o żądaniach HTTPS znajdziesz w dokumentacji Cloud Functions.

W następnym kroku dowiesz się, jak uzyskać dostęp do tej funkcji HTTPS z adresu URLFirebase Hosting, aby mogła generować treści dynamiczne dla witryny hostowanej na Firebase.

Krok 3. Przekierowywanie żądań HTTPS do funkcji

Za pomocą reguł przekształcania możesz kierować żądania pasujące do określonych wzorów do jednego miejsca docelowego. Z tych instrukcji dowiesz się, jak kierować wszystkie żądania z ścieżki ../bigben w witrynie Hosting do wykonania funkcji bigben.

  1. Otwórz plik firebase.json.

  2. W sekcji hosting dodaj tę konfigurację rewrite:

    "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. Sprawdź, czy przekierowanie działa zgodnie z oczekiwaniami, ponownie testując je za pomocą emulatorów Firebase.

    1. W korzenia katalogu projektu lokalnego uruchom to polecenie:

      firebase emulators:start

    2. Otwórz adres URL Twojej witryny hostowanej lokalnie zwrócony przez interfejs wiersza poleceń (zwykle localhost:5000), ale dodaj do niego bigben, na przykład:http://localhost:5000/bigben

  4. powtarzać funkcję i jej funkcjonalność w swojej witrynie. Do testowania tych iteracji użyj emulatorów Firebase.

Aby uzyskać najlepszą wydajność, umieść swoje funkcje w pobliżu usługi Hosting, wybierając jeden z tych regionów:

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

Więcej informacji o regułach przekierowania znajdziesz na stronie konfiguracji Hosting. Możesz też dowiedzieć się więcej o kolejności priorytetów odpowiedzi w różnych konfiguracjach Hosting.

Aby zwiększyć skuteczność dostarczania treści dynamicznych, możesz opcjonalnie dostosować ustawienia pamięci podręcznej.

Krok 4. Wdróż funkcję

Gdy funkcja zacznie działać prawidłowo w emulatorze, możesz ją wdrożyć, przetestować i uruchomić z rzeczywistymi zasobami projektu. To dobry moment na skonfigurowanie opcji środowiska wykonawczego w celu kontrolowania skalowania w przypadku funkcji działających w środowisku produkcyjnym.

  1. Wdrożyć funkcję, a także treści i konfigurację Hosting na swojej stronie, uruchamiając to polecenie w katalogu głównym lokalnego katalogu projektu:

    firebase deploy --only functions,hosting

  2. Dostęp do witryny i funkcji na żywo uzyskasz, korzystając z tych adresów URL:

Korzystanie z ramy sieciowej

W Cloud Functions możesz używać frameworków internetowych, takich jak Express.js, aby wyświetlać dynamiczną zawartość aplikacji i łatwiej pisać złożone aplikacje internetowe.

W tej sekcji znajdziesz przykład użycia Express.js z biblioteką Firebase Hosting i Cloud Functions.

  1. Zainstaluj Express.js w projekcie lokalnym, uruchamiając w katalogu functions to polecenie:

    npm install express --save

  2. Otwórz plik /functions/index.js, a potem zaimportuj i inicjuj Express.js:

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. Dodaj te 2 punkty końcowe:

    1. Dodaj pierwszy punkt końcowy, aby wyświetlać indeks naszej witryny pod adresem /.

      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. Kolejny punkt końcowy zwraca liczbę BONG jako interfejs API w formacie JSON w sekcji /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. Wyeksportuj aplikację Express.js jako funkcję HTTPS:

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

  5. W pliku firebase.json kieruj wszystkie żądania do funkcji app. To przekierowanie pozwala Express.js wyświetlać inną ścieżkę podrzędną skonfigurowaną przez nas (w tym przykładzie / i /api).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Dodawanie elementu pośredniczącego

W naszym przykładzie, gdy używasz Express.js, możesz dodać element pośredniczący Express.js w standardowy sposób. Możesz na przykład włączyć żądania CORS w naszych punktach końcowych.

  1. Zainstaluj oprogramowanie pośredniczące cors, wykonując to polecenie:

    npm install --save cors

  2. Otwórz plik /functions/index.js, a potem dodaj plik cors do aplikacji Express.js w ten sposób:

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

Aby dowiedzieć się więcej o korzystaniu z Firebase w przypadku aplikacji i modułów pośredniczących Express, zapoznaj się z dokumentacją.Cloud Functions

Dalsze kroki