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

Połącz Cloud Functions z Firebase Hosting, aby generować i obsługiwać 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 ich skalować.

Przykłady zastosowań i przykłady Cloud Functions zintegrowanych z Firebase Hosting znajdziesz w informacjach o usługach bezserwerowych.

Połącz urządzenie Cloud Functions z siecią Firebase Hosting

W tej sekcji znajdziesz przykład połączenia funkcji z Firebase Hosting.

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

Krok 1. Skonfiguruj Cloud Functions

  1. Sprawdź, czy masz najnowszą wersję interfejsu Firebase CLI i czy Firebase Hosting został zainicjowany.

    Szczegółowe instrukcje instalacji interfejsu wiersza poleceń i inicjowaniaHosting znajdziesz w przewodniku dla początkujących dotyczącym Hosting.

  2. Upewnij się, że masz skonfigurowaną usługę Cloud Functions:

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

    • Jeśli nie masz skonfigurowanego Cloud Functions:

      1. Zainicjuj Cloud Functions, uruchamiając to polecenie w katalogu głównym projektu:

        firebase init functions

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

      3. Sprawdź, czy w katalogu projektu lokalnego znajduje się katalog functions (utworzony przez właśnie wykonane polecenie Firebase). W tym katalogu functions znajduje się kod Cloud Functions.

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

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

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

    Ten kod tworzy funkcję HTTPS (o nazwie bigben), która odpowiada na żądania HTTPS wartością BONG dla każdej godziny dnia, podobnie 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ą Firebase Local Emulator Suite.

    1. W katalogu głównym 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 Cloud Functionsdokumentacji.

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

Krok 3. Kieruj żądania HTTPS bezpośrednio do funkcji

Za pomocą reguł przepisywania możesz kierować żądania pasujące do określonych wzorców do jednego miejsca docelowego. Z tych instrukcji dowiesz się, jak przekierować wszystkie żądania ze ścieżki ../bigben w Twojej witrynie Hosting, aby wykonać funkcję bigben.

  1. Otwórz plik firebase.json.

  2. Dodaj tę konfigurację rewrite w sekcji 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. Sprawdź, czy przekierowanie działa zgodnie z oczekiwaniami, przeprowadzając ponowny test za pomocą emulatorów Firebase.

    1. W katalogu głównym projektu lokalnego uruchom to polecenie:

      firebase emulators:start

    2. Otwórz adres URL hostowany lokalnie dla Twojej witryny, który został zwrócony przez interfejs wiersza poleceń (zwykle localhost:5000), ale dodaj do niego bigben, np.:http://localhost:5000/bigben

  4. Ulepszaj funkcję i jej działanie w witrynie. Do testowania tych iteracji używaj emulatorów Firebase.

Aby uzyskać najlepszą wydajność, umieść funkcje w tym samym miejscu co Hosting, wybierając jeden z tych regionów:

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

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

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

Krok 4. Wdróż funkcję

Gdy funkcja będzie działać w emulatorze zgodnie z oczekiwaniami, możesz ją wdrożyć, przetestować i uruchomić przy użyciu prawdziwych zasobów projektu. To dobry moment, aby rozważyć ustawienie opcji środowiska wykonawczego w celu kontrolowania skalowania funkcji działających w środowisku produkcyjnym.

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

    firebase deploy --only functions,hosting

  2. Dostęp do witryny na żywo i funkcji uzyskasz 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

Korzystanie z platformy internetowej

Możesz używać platform internetowych, takich jak Express.js, w Cloud Functions, aby udostępniać dynamiczną zawartość aplikacji i łatwiej pisać złożone aplikacje internetowe.

W tej sekcji znajdziesz przykład użycia Express.js z 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 następnie zaimportuj i zainicjuj 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 obsługiwać 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. Ta zmiana umożliwia Express.js obsługę różnych ścieżek podrzędnych, które skonfigurowaliśmy (w tym przykładzie / i /api).

    {
 "hosting": {
   // ...

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

Dodawanie elementu pośredniczącego

Wracając do naszego przykładu, teraz, gdy używasz Express.js, możesz dodać element pośredniczący Express.js w typowy sposób. Możesz na przykład włączyć żądania 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 potem dodaj cors do aplikacji Express.js, jak poniżej:

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

Więcej informacji o korzystaniu z Firebase w aplikacjach Express i modułach oprogramowania pośredniczącego znajdziesz w Cloud Functionsdokumentacji.

Dalsze kroki