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

Połącz Cloud Functions z parametrem Firebase Hosting, aby wygenerować i wyświetlać dynamiczne treści lub tworzenie interfejsów REST API jako mikroserwisów.

Cloud Functions for Firebase umożliwia automatyczne uruchamianie backendu w odpowiedzi na żądania HTTPS. Twój kod jest przechowywany w chmurze Google, działa w środowisku zarządzanym. Nie musisz zarządzać własnym kontem ani je skalować serwerów.

Przykładowe przypadki użycia i przykłady dotyczące platformy Cloud Functions zintegrowanej z Firebase Hosting, odwiedź Omówienie technologii bezserwerowych.

Połącz aplikację Cloud Functions z siecią Firebase Hosting

W tej sekcji znajdziesz przykładowy przewodnik łączenia funkcji Firebase Hosting

Pamiętaj, że aby poprawić wydajność wyświetlania treści dynamicznej, możesz: (opcjonalnie) dostosuj ustawienia pamięci podręcznej.

Krok 1. Skonfiguruj usługę Cloud Functions

  1. Sprawdź, czy masz najnowszą wersję interfejsu wiersza poleceń Firebase i czy został zainicjowany algorytm Firebase Hosting.

    Szczegółowe instrukcje instalowania i inicjowania interfejsu wiersza poleceń Hosting, zobacz Przewodnik dla początkujących – Hosting.

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

    • Jeśli masz już skonfigurowaną usługę Cloud Functions, możesz przejść do Krok 2. Utwórz i przetestuj funkcję HTTPS.

    • Jeśli nie masz skonfigurowanej usługi Cloud Functions:

      1. Zainicjuj Cloud Functions, uruchamiając to polecenie z katalog główny projektu:

        firebase init functions

      2. Gdy pojawi się odpowiedni komunikat, wybierz JavaScript (ten zwykły przewodnik korzysta z języka JS).

      3. Sprawdź, czy w projekcie lokalnym masz katalog functions (utworzonego przed chwilą uruchomionego polecenia Firebase). Ten Katalog functions to miejsce, w którym znajduje się kod usługi Cloud Functions.

Krok 2. Utwórz i przetestuj funkcję HTTPS w witrynie Hosting.

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

  2. Zastąp zawartość pliku poniższym 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 katalogu głównym projektu lokalnego uruchom to polecenie 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.

Zapoznaj się z dokumentacją usługi Cloud Functions , aby dowiedzieć się więcej o żądaniach HTTPS.

W następnym kroku opisujemy, jak uzyskać dostęp do tej funkcji HTTPS z poziomu Firebase Hosting, aby mógł generować treści dynamiczne dla Witryna hostowana w Firebase.

Krok 3. Przekierowywanie żądań HTTPS do funkcji

Na reguły przepisywania, możesz kierować żądania pasujące do określonych wzorców w jednym miejscu docelowym. Poniższe kroki pokazują jak przekierować wszystkie żądania ze ścieżki ../bigben na: Hosting do uruchomienia funkcji bigben.

  1. Otwórz plik firebase.json.

  2. Dodaj w sekcji hosting 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, wykonując test ponownie z użyciem parametru Emulatory 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, np.: http://localhost:5000/bigben

  4. powtarzać funkcję i jej funkcjonalność w swojej witrynie. Użyj za pomocą emulatorów Firebase, które pozwalają przetestować te iteracje.

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

Otwórz stronę konfiguracji usługi Hosting dla: dowiedz się więcej o regułach przepisywania. Możesz też dowiedzieć się więcej o kolejności priorytetów odpowiedzi w różnych konfiguracjach Hosting.

Pamiętaj, że aby poprawić wydajność wyświetlania treści dynamicznej, możesz: (opcjonalnie) dostosuj 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 jest to dobry moment, by ustawić opcje środowiska wykonawczego na kontrolowanie zachowania skalowania dla funkcji działających w środowisku produkcyjnym.

  1. Wdróż funkcję oraz treść i konfigurację Hosting w , uruchamiając poniższe polecenie w katalogu głównym projektu lokalnego: katalogu:

    firebase deploy --only functions,hosting

  2. Aktywna witryna i funkcje możesz uzyskać pod tymi adresami URL:

    • Twoje subdomeny Firebase:
      PROJECT_ID.web.app/bigben i PROJECT_ID.firebaseapp.com/bigben

    • Wszystkie połączone domeny niestandardowe:
      CUSTOM_DOMAIN/bigben

Używanie platformy internetowej

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 szczegółowy przykład użycia pliku Express.js z Firebase Hosting i Cloud Functions.

  1. Zainstaluj plik Express.js w projekcie lokalnym, uruchamiając następujące polecenie z katalogu functions:

    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 udostępniać 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. I kolejny punkt końcowy do zwrócenia liczby BONG jako interfejsu API w formacie JSON w formacie „/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 skieruj wszystkie żądania do funkcji app. Dzięki temu skryptowi Express.js może obsługiwać inną ścieżkę podrzędną skonfigurowane (w tym przykładzie są to / i /api).

    {
 "hosting": {
   // ...

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

Dodaj oprogramowanie pośredniczące

Używając kodu Express.js, możesz dodać kod Oprogramowanie pośredniczące Express.js w typowy sposób. Możesz na przykład włączyć CORS w naszych punktach końcowych.

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

    npm install --save cors

  2. Otwórz plik /functions/index.js, a następnie dodaj cors do aplikacji Express.js np.:

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

Zapoznaj się z dokumentacją usługi Cloud Functions .

Dalsze kroki