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

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

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 ich skalować.

Przykładowe przypadki użycia i przykłady Cloud Functions zintegrowanych z Firebase Hosting, znajdziesz w omówieniu technologii bezserwerowej.

Łączenie Cloud Functions z Firebase Hosting

W tej sekcji znajdziesz przykład łączenia funkcji z Firebase Hosting.

Aby zwiększyć wydajność wyświetlania 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 że masz zainicjowaną usługę Firebase Hosting.

    Szczegółowe instrukcje instalowania interfejsu CLI i inicjowania Hosting znajdziesz w przewodniku dla początkujących dotyczącym Hosting.

  2. Upewnij się, że masz skonfigurowaną usługę Cloud Functions:

    • Jeśli masz już skonfigurowaną usługę Cloud Functions, możesz przejść do kroku 2. Tworzenie i testowanie funkcji HTTPS.

    • Jeśli nie masz skonfigurowanej usługi Cloud Functions:

      1. Zainicjuj Cloud Functions, uruchamiając to polecenie w katalogu głównym projektu:

        firebase init functions

      2. Gdy pojawi się prośba, wybierz JavaScript (w tym przykładzie używamy JS).

      3. Sprawdź, czy w katalogu projektu lokalnego znajduje się katalog functions (utworzony przez właśnie uruchomione polecenie Firebase). W tym functions katalogu znajduje się kod dla 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, wysyłając sygnał BONG o każdej godzinie, 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ą Firebase Local Emulator Suite.

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

      firebase emulators:start

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

Więcej informacji o żądaniach HTTPS znajdziesz w dokumentacji Cloud Functions.

W następnym kroku dowiesz się, jak uzyskać dostęp do tej funkcji HTTPS z adresu Firebase Hosting URL, aby mogła ona generować treści dynamiczne dla witryny hostowanej w Firebase.

Krok 3. Kieruj żądania HTTPS do funkcji

Za pomocą reguł przekierowania możesz kierować żądania pasujące do określonych wzorców do jednego miejsca docelowego. Z tych instrukcji dowiesz się, jak kierować wszystkie żądania ze ścieżki ../bigben w witrynie Hosting do wykonania funkcji bigben.

  1. Otwórz plik firebase.json.

  2. Dodaj tę konfigurację rewrite w sekcji hosting:

    "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 za pomocą emulatorów Firebase.

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

      firebase emulators:start

    2. Otwórz lokalnie hostowany adres URL witryny zwrócony przez interfejs CLI (zwykle localhost:5000), ale dodaj do niego bigben, np.: http://localhost:5000/bigben

  4. Iteracyjnie rozwijaj funkcję i jej działanie w witrynie. Do testowania tych iteracji używaj emulatorów Firebase.

Aby uzyskać najlepszą wydajność, umieść funkcje w tej samej lokalizacji co Hosting przez wybranie jednego 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 dla więcej szczegółów. Możesz też dowiedzieć się więcej o kolejności priorytetów odpowiedzi w przypadku różnych Hosting konfiguracji.

Aby zwiększyć wydajność wyświetlania treści dynamicznych, możesz opcjonalnie dostosować ustawienia pamięci podręcznej.

Krok 4. Wdróż funkcję

Gdy funkcja będzie działać w emulatorze zgodnie z oczekiwaniami, możesz ją wdrożyć, przetestować i uruchomić za pomocą rzeczywistych zasobów projektu. Warto wtedy rozważyć ustawienie opcji środowiska wykonawczego, aby kontrolować skalowanie funkcji działających w środowisku produkcyjnym.

  1. Wdróż funkcję oraz treści i konfigurację Hosting w witrynie, uruchamiając to polecenie w katalogu głównym lokalnego projektu:

    firebase deploy --only functions,hosting

  2. Uzyskaj dostęp do witryny i funkcji na tych adresach URL:

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

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

ustaw je jako publiczne lub zaktualizuj Firebase CLI.

Korzystanie z platformy internetowej

W Cloud Functions możesz używać platform internetowych, takich jak Express.js, abyCloud Functions wyświetlać treści dynamiczne aplikacji i łatwiej tworzyć złożone aplikacje internetowe.

W tej sekcji znajdziesz przykład korzystania z Express.js z Firebase Hosting i Cloud Functions.

  1. Zainstaluj Express.js w swoim projekcie lokalnym, uruchamiając to polecenie w 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/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 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. Dodaj też punkt końcowy, który będzie zwracać liczbę sygnałów BONG jako interfejs API w formacie JSON pod adresem /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 przekierowanie umożliwia Express.js wyświetlanie różnych ścieżek podrzędnych, które skonfigurowaliśmy (w tym przykładzie / i /api).

    {
 "hosting": {
   // ...

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

Dodawanie elementu pośredniczącego

W tym przykładzie, gdy używasz już Express.js, możesz dodać element pośredniczący Express.js w typowy sposób. Możesz na przykład włączyć CORS żądania w naszych punktach końcowych.

  1. Zainstaluj element pośredniczący 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 w ten sposób:

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

Więcej informacji o korzystaniu z Firebase z aplikacjami Express i modułami pośredniczącymi znajdziesz w dokumentacji Cloud Functions.

Dalsze kroki