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

Połącz Cloud Functions z Firebase Hosting, aby generować i udostępniać dynamiczną zawartość 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 skalowania ich.

Na przykład przypadki użycia i przykłady funkcji Cloud Functions zintegrowanych z Firebase Hosting znajdziesz w naszym przeglądzie rozwiązań bezserwerowych .

Połącz funkcje chmury z hostingiem Firebase

W tej sekcji przedstawiono przykładowy przewodnik dotyczący łączenia funkcji z Hostingiem Firebase.

Pamiętaj, że aby poprawić wydajność udostępniania treści dynamicznych, możesz opcjonalnie dostroić ustawienia pamięci podręcznej .

Krok 1: Skonfiguruj funkcje chmury

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

    Szczegółowe instrukcje dotyczące instalowania interfejsu CLI i inicjowania hostingu można znaleźć w przewodniku wprowadzającym dotyczącym hostingu .

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

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

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

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

        firebase init functions

      2. Po wyświetleniu monitu wybierz opcję JavaScript (w tym przykładzie instruktażowym zastosowano 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, korzystając z pakietu Firebase Local Emulator Suite .

    1. W katalogu głównym lokalnego katalogu projektu uruchom następującą komendę:

      firebase emulators:start

    2. Uzyskaj dostęp do funkcji poprzez lokalny adres URL zwrócony 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.

Następny krok przeprowadzi Cię przez proces uzyskiwania dostępu do tej funkcji HTTPS z adresu URL hostingu Firebase, aby mogła ona generować dynamiczną zawartość dla Twojej witryny hostowanej przez Firebase.

Krok 3: Skieruj żą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 skierować wszystkie żądania ze ścieżki ../bigben na Twojej stronie Hostingowej, aby uruchomić 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)
    "pinTag": true           // optional (see note below)
  } ]
}

  3. Upewnij się, że przekierowanie działa zgodnie z oczekiwaniami, ponownie testując emulatory Firebase.

    1. W katalogu głównym lokalnego katalogu projektu uruchom następującą komendę:

      firebase emulators:start

    2. Odwiedź lokalnie hostowany adres URL swojej witryny zwrócony przez CLI (zwykle localhost:5000 ), ale dołącz adres URL za pomocą bigben , w ten sposób: http://localhost:5000/bigben

  4. Wykonaj iterację swojej funkcji i jej funkcjonalności w swojej witrynie. Użyj emulatorów Firebase, aby przetestować te iteracje.

Aby uzyskać najlepszą wydajność, połącz swoje funkcje z Hostingiem, wybierając jeden z następujących regionów:

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

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

Pamiętaj, że aby poprawić wydajność udostępniania treści dynamicznych, możesz opcjonalnie dostroić ustawienia pamięci podręcznej .

Krok 4: Wdróż swoją funkcję

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

  1. Wdróż swoją funkcję, a także zawartość i konfigurację hostingu 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 działającej witryny i funkcji pod następującymi adresami URL:

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

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

Użyj frameworka internetowego

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

W poniższej sekcji przedstawiono przykładowy przewodnik dotyczący używania Express.js z Firebase Hosting i Cloud Functions.

  1. Zainstaluj Express.js w swoim projekcie lokalnym, uruchamiając następującą komendę 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, który będzie obsługiwał indeks naszej witryny internetowej 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. Eksportuj aplikację Express.js jako funkcję HTTPS:

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

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

    {
 "hosting": {
   // ...

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

Dodaj oprogramowanie pośrednie

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 na naszych punktach końcowych.

  1. Zainstaluj oprogramowanie pośrednie 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 w następujący sposób:

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

Odwiedź dokumentację Cloud Functions , aby dowiedzieć się więcej o korzystaniu z Firebase z aplikacjami Express i modułami oprogramowania pośredniego.

Następne kroki