Firebase is back at Google I/O on May 10! Register now

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

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Połącz funkcje Cloud Functions z Hostingiem Firebase, aby generować i udostępniać zawartość dynamiczną 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 i skalowania własnych serwerów.

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

Połącz Cloud Functions z Hostingiem Firebase

Ta sekcja zawiera przykład łączenia funkcji z Hostingiem Firebase.

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

Krok 1: Skonfiguruj Cloud Functions

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

    Aby uzyskać szczegółowe instrukcje dotyczące instalowania interfejsu wiersza polecenia i inicjowania hostingu, zapoznaj się z przewodnikiem wprowadzającym dotyczącym hostingu .

  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 masz skonfigurowanych Cloud Functions:

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

        firebase init functions

      2. Po wyświetleniu monitu wybierz JavaScript (w tym przykładzie instruktażowym użyto 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 usługi 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. W katalogu głównym 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 Hostingu Firebase, aby mogła generować zawartość dynamiczną 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 skierować wszystkie żądania ze ścieżki ../bigben na Twojej stronie 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. Potwierdź, że przekierowanie działa zgodnie z oczekiwaniami, ponownie testując za pomocą emulatorów Firebase.

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

      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 , na przykład: http://localhost:5000/bigben

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

Odwiedź stronę konfiguracji hostingu, aby uzyskać więcej informacji o regułach przepisywania . Możesz również 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 dostosować ustawienia pamięci podręcznej .

Krok 4: Wdróż swoją funkcję

Gdy funkcja działa w emulatorze zgodnie z oczekiwaniami, 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 w celu kontrolowania zachowania skalowania dla funkcji działających w środowisku produkcyjnym.

  1. Wdróż swoją funkcję oraz 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 aktywnej 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

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

Poniższa sekcja zawiera przykładowy przewodnik dotyczący używania Express.js z Firebase Hosting 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, aby obsługiwać indeks naszej witryny w / .

      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, aby zwrócić liczbę BONG jako API, w formacie JSON, pod /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 . 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 w 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, 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średniego.

Następne kroki