Udostępniaj dynamiczną zawartość i hostuj mikrousługi za pomocą Cloud Functions

Połącz funkcje Cloud Functions z Hostingiem Firebase, aby generować i udostępniać treści dynamiczne lub tworzyć interfejsy API REST jako mikrousługi.

Cloud Functions dla 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 ma potrzeby zarządzania własnymi serwerami i ich skalowania.

Na przykład przypadki użycia i przykłady funkcji Cloud Functions zintegrowanych z Hostingiem Firebase znajdziesz w naszym omówieniu bezserwerowym .

Połącz funkcje chmury z Hostingiem Firebase

W tej sekcji znajdziesz instruktażowy przykład łączenia funkcji z Hostingiem Firebase.

Pamiętaj, że aby poprawić wydajność udostępniania zawartości dynamicznej, możesz opcjonalnie dostosować ustawienia pamięci podręcznej .

Krok 1: Skonfiguruj funkcje chmury

  1. Upewnij się, że masz najnowszą wersję interfejsu wiersza polecenia Firebase i zainicjowano Hosting Firebase.

    Szczegółowe instrukcje dotyczące instalowania interfejsu wiersza polecenia i inicjowania usługi Hosting znajdują się w przewodniku Wprowadzenie do usługi Hosting .

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

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

    • Jeśli nie skonfigurowałeś Cloud Functions:

      1. Zainicjuj Cloud Functions, uruchamiając następujące polecenie z katalogu głównego katalogu projektu:

        firebase init functions

      2. Po wyświetleniu monitu wybierz JavaScript (w tym przykładzie wykorzystano JS).

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

Krok 2: Utwórz i przetestuj funkcję HTTPS dla swojej witryny hostingowej

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

  2. Zastąp zawartość pliku następującym kodem.

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

    const functions = require('firebase-functions');

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. Przetestuj swoje funkcje lokalnie za pomocą pakietu Firebase Local Emulator Suite .

    1. Z katalogu głównego lokalnego katalogu projektu uruchom następujące polecenie:

      firebase emulators:start

    2. Uzyskaj dostęp do funkcji za pośrednictwem lokalnego adresu URL zwróconego przez CLI, na przykład: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

Odwiedź dokumentację Cloud Functions, aby dowiedzieć się więcej o żądaniach HTTPS.

W następnym kroku dowiesz się, jak uzyskać dostęp do tej funkcji HTTPS z adresu URL w Hostingu Firebase , aby umożliwić generowanie treści dynamicznych dla Twojej witryny hostowanej przez Firebase.

Krok 3: Kieruj żądania HTTPS do swojej funkcji

Dzięki regułom przepisywania możesz kierować żądania pasujące do określonych wzorców do jednego miejsca docelowego. Poniższe kroki pokazują, jak kierować wszystkie żądania ze ścieżki ../bigben w witrynie hostingowej, aby wykonać funkcję bigben .

  1. Otwórz plik firebase.json .

  2. Dodaj następującą konfigurację rewrite w sekcji hosting :

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben",
    "region": "us-central1"  // optional (see note below)
  } ]
}

  3. Sprawdź, czy przekierowanie działa zgodnie z oczekiwaniami, ponownie przeprowadzając testy na emulatorach Firebase.

    1. Z katalogu głównego lokalnego katalogu projektu uruchom następujące polecenie:

      firebase emulators:start

    2. Odwiedź lokalnie hostowany adres URL witryny, który jest zwracany przez CLI (zwykle localhost:5000 ), ale dołącz adres URL z bigben , na przykład: http://localhost:5000/bigben

  4. Iteruj swoją funkcję i jej funkcjonalność w swojej witrynie. Użyj emulatorów Firebase, aby przetestować te iteracje.

Odwiedź stronę konfiguracji hostingu, aby uzyskać więcej informacji na temat przepisywania reguł . Możesz też dowiedzieć się o kolejności priorytetów odpowiedzi w różnych konfiguracjach Hostingu.

Pamiętaj, że aby poprawić wydajność udostępniania zawartości dynamicznej, możesz opcjonalnie dostosować ustawienia pamięci podręcznej .

Krok 4: Wdróż swoją funkcję

Gdy funkcja działa zgodnie z oczekiwaniami w emulatorze, możesz przystąpić do wdrażania, testowania i uruchamiania jej przy użyciu rzeczywistych zasobów projektu. To dobry moment, aby rozważyć ustawienie opcji środowiska uruchomieniowego, aby kontrolować zachowanie skalowania dla funkcji działających w środowisku produkcyjnym.

  1. Wdróż swoją funkcję, a także zawartość hostingu i konfigurację w swojej witrynie, uruchamiając następujące polecenie z katalogu głównego lokalnego katalogu projektu:

    firebase deploy --only functions,hosting

  2. Uzyskaj dostęp do swojej aktywnej witryny i swojej funkcji pod następującymi 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żyj frameworka internetowego

Możesz używać struktur internetowych, takich jak Express.js , w Cloud Functions, aby obsługiwać dynamiczną zawartość swojej aplikacji i łatwiej pisać złożone aplikacje internetowe.

W poniższej sekcji przedstawiono instruktażowy przykład korzystania z Express.js z Hostingiem Firebase i Cloud Functions.

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

    npm install express --save

  2. Otwórz plik /functions/index.js , a następnie zaimportuj i zainicjuj Express.js:

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

  3. Dodaj następujące dwa punkty końcowe:

    1. Dodaj pierwszy punkt końcowy do obsługi indeksu 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, który zwraca liczbę BONG jako API, w formacie JSON, w /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 wszystkie żądania do funkcji app . To przepisanie umożliwia Express.js obsługę różnych skonfigurowanych podścieżek (w tym przykładzie / i /api ).

    {
 "hosting": {
   // ...

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

Dodaj oprogramowanie pośredniczące

Kontynuując nasz przykład, teraz, gdy używasz Express.js, możesz dodać oprogramowanie pośredniczące Express.js w typowy sposób. Na przykład możesz włączyć żądania CORS w naszych punktach końcowych.

  1. Zainstaluj oprogramowanie pośredniczące cors , uruchamiając następujące polecenie:

    npm install --save cors

  2. Otwórz plik /functions/index.js , a następnie dodaj cors do swojej aplikacji Express.js, na przykład:

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

Odwiedź dokumentację Cloud Functions, aby dowiedzieć się więcej o używaniu Firebase z aplikacjami Express i modułami oprogramowania pośredniczącego.

Następne kroki