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

Połącz interfejs Cloud Functions z parametrem Firebase Hosting, aby generować i udostępniać swoje treści dynamiczne, lub twórz interfejsy API typu 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 łączenia funkcji z 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. Sprawdź, czy masz najnowszą wersję interfejsu wiersza poleceń Firebase i czy masz zainicjowaną 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 skonfigurowanej usługi 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 lokalnym katalogu projektu (utworzonego za pomocą uruchomionego właśnie polecenia Firebase) znajduje się 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 katalogu głównym lokalnego katalogu projektu 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 usługi 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. Kieruj żądania HTTPS do swojej funkcji

Dzięki regułom przepisywania możesz kierować żądania, które pasują do określonych wzorców, do jednego miejsca docelowego. Z instrukcji poniżej dowiesz się, jak kierować wszystkie żądania ze ścieżki ../bigben w Twojej witrynie Hosting, aby wykonać funkcję 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, ponownie testując je za pomocą emulatorów Firebase.

    1. W katalogu głównym lokalnego katalogu projektu 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. Do testowania tych iteracji użyj emulatorów Firebase.

Aby uzyskać najlepszą wydajność, kolokuj funkcje z funkcją Hosting, wybierając 1 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 przypadku różnych konfiguracji 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 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 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 umożliwia Express.js wyświetlanie różnych ścieżek podrzędnych skonfigurowanych 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 do aplikacji Express.js plik cors 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ą.

Dalsze kroki