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

Połącz funkcje Cloud Functions z Hostingiem Firebase, aby generować i obsługiwać dynamiczne treści lub tworzenie interfejsów REST API jako mikroserwisów.

Cloud Functions dla Firebase umożliwia automatyczne uruchamianie backendu w odpowiedzi na żądania HTTPS. Twój kod jest przechowywany w chmurze Google, działa w środowisku zarządzanym. Nie musisz zarządzać własnym kontem ani je skalować serwerów.

Przykładowe przypadki użycia i przykłady dotyczące funkcji w Cloud Functions zintegrowanych z Hosting Firebase, zapoznaj się z naszą Omówienie technologii bezserwerowych.

Łączenie Cloud Functions z Hostingiem Firebase

W tej sekcji znajdziesz przykładowy przewodnik łączenia funkcji Hosting Firebase.

Pamiętaj, że aby poprawić wydajność wyświetlania treści dynamicznej, możesz: (opcjonalnie) dostosuj ustawienia pamięci podręcznej.

Krok 1. Skonfiguruj Cloud Functions

  1. Sprawdź, czy masz najnowszą wersję interfejsu wiersza poleceń Firebase masz zainicjowany Hosting Firebase.

    Szczegółowe instrukcje instalowania i inicjowania interfejsu wiersza poleceń Hosting, zobacz Wprowadzenie do Hostingu.

  2. Sprawdź, czy masz skonfigurowane Cloud Functions:

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

    • Jeśli masz nie skonfigurowane funkcje Cloud Functions:

      1. Zainicjuj funkcje w Cloud Functions, uruchamiając to polecenie z katalog główny projektu:

        firebase init functions

      2. Gdy pojawi się odpowiedni komunikat, wybierz JavaScript (ten zwykły przewodnik korzysta z języka JS).

      3. Sprawdź, czy w projekcie lokalnym masz katalog functions (utworzonego przed chwilą uruchomionego polecenia Firebase). Ten Katalog functions to miejsce, w którym znajduje się kod Cloud Functions.

Krok 2. Utwórz i przetestuj funkcję HTTPS w swojej witrynie w Hostingu

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

  2. Zastąp zawartość pliku poniższym kodem.

    Ten kod tworzy funkcję HTTPS (o nazwie bigben), która odpowiada na żądania HTTPS z parametrem BONG dla każdej godziny dnia, tak jak w przypadku zegara.

    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 funkcje lokalnie za pomocą Pakiet emulatorów lokalnych Firebase.

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

      firebase emulators:start

    2. Uzyskaj dostęp do funkcji za pomocą lokalnego adresu URL zwróconego przez interfejs wiersza poleceń, w przypadku przykład: http://localhost:5001/PROJECT_ID/us-central1/bigben

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

W następnym kroku opisujemy, jak uzyskać dostęp do tej funkcji HTTPS z poziomu Adres URL Hostingu Firebase, aby mógł generować zawartość dynamiczną dla Witryna hostowana w Firebase.

Krok 3. Kieruj żądania HTTPS do swojej funkcji

Na reguły przepisywania, możesz kierować żądania pasujące do określonych wzorców w jednym miejscu docelowym. Poniższe kroki pokazują jak przekierować wszystkie żądania ze ścieżki ../bigben w Hostingu do uruchomienia funkcji 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, wykonując test ponownie z użyciem parametru Emulatory Firebase.

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

      firebase emulators:start

    2. Otwórz hostowany lokalnie adres URL swojej witryny zwrócony przez interfejs wiersza poleceń (zwykle localhost:5000), ale dołącz do adresu URL ciąg bigben w ten sposób: http://localhost:5000/bigben

  4. Zapoznaj się ze swoimi funkcjami i funkcjami w witrynie. Użyj za pomocą emulatorów Firebase, które pozwalają przetestować te iteracje.

Aby uzyskać najlepszą wydajność, kolokuj funkcje za pomocą Hostingu przez wybierając jeden z tych regionów:

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

Odwiedź stronę konfiguracji Hostingu dla domeny Dowiedz się więcej o regułach przepisywania. Dostępne opcje dowiedz się też więcej na temat kolejność priorytetów odpowiedzi dla różnych konfiguracji hostingu.

Pamiętaj, że aby poprawić wydajność wyświetlania treści dynamicznej, możesz: (opcjonalnie) dostosuj ustawienia pamięci podręcznej.

Krok 4. Wdróż funkcję

Gdy funkcja będzie działać w emulatorze zgodnie z oczekiwaniami, możesz przejść do wdrażanie, testowanie i uruchamianie go przy użyciu prawdziwych zasobów projektu. To jest to dobry moment, by ustawić opcje środowiska wykonawczego na kontrolowanie zachowania skalowania dla funkcji działających w środowisku produkcyjnym.

  1. Wdróż funkcję oraz treść i konfigurację Hostingu w , uruchamiając poniższe polecenie w katalogu głównym projektu lokalnego: katalogu:

    firebase deploy --only functions,hosting

  2. Aktywna witryna i funkcje możesz uzyskać 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żyć platform internetowych, takich jak Express.js w Cloud Functions, aby udostępniać dynamiczne treści w aplikacji i łatwiej pisać złożone aplikacje internetowe.

W tej sekcji znajdziesz szczegółowy przykład użycia pliku Express.js z Hosting Firebase i Cloud Functions.

  1. Zainstaluj plik Express.js w projekcie lokalnym, 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 te 2 punkty końcowe:

    1. Dodaj pierwszy punkt końcowy, aby udostępniać 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. I kolejny punkt końcowy do zwrócenia liczby BONG jako interfejsu API w formacie JSON w formacie „/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. Dzięki temu skryptowi Express.js może obsługiwać inną ścieżkę podrzędną skonfigurowane (w tym przykładzie są to / i /api).

    {
 "hosting": {
   // ...

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

Dodaj oprogramowanie pośredniczące

Używając kodu Express.js, możesz dodać kod Oprogramowanie pośredniczące Express.js w typowy sposób. Możesz na przykład włączyć 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 następnie dodaj cors do aplikacji Express.js np.:

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

Zapoznaj się z dokumentacją Cloud Functions. .

Dalsze kroki