Hintergrundverarbeitung mit Node.js

---

Viele Anwendungen müssen eine Hintergrundverarbeitung außerhalb des Kontexts einer Webanfrage ausführen. In dieser Anleitung wird eine Webanwendung erstellt, mit der Nutzer Text eingeben können, der übersetzt werden soll. Anschließend wird eine Liste früherer Übersetzungen angezeigt. Die Übersetzung erfolgt in einem Hintergrundprozess, um die Anfrage des Nutzers nicht zu blockieren.

Das folgende Diagramm veranschaulicht den Ablauf der Übersetzungsanfrage.

Wie die in dieser Anleitung verwendete Anwendung funktioniert, sehen Sie an der Abfolge der Ereignisse:

1. Die Webseite wird aufgerufen, um eine Liste früherer Übersetzungen anzuzeigen, die in Firestore gespeichert sind.
2. Die Übersetzung eines Textes wird angefordert. Dazu wird ein HTML-Formular ausgefüllt.
3. Die Übersetzungsanfrage wird in Pub/Sub veröffentlicht.
4. Eine Cloud Functions-Funktion, die dieses Pub/Sub-Thema abonniert hat, wird ausgelöst.
5. Die Cloud Functions-Funktion verwendet Cloud Translation, um den Text zu übersetzen.
6. Die Cloud Functions-Funktion speichert das Ergebnis in Firestore.

Diese Anleitung richtet sich an alle, die mehr über die Hintergrundverarbeitung mit Google Cloud erfahren möchten. Es sind keine Vorkenntnisse in Pub/Sub, Firestore, App Engine oder Cloud Functions erforderlich. Etwas Erfahrung mit Node.js, JavaScript und HTML ist allerdings hilfreich, um den gesamten Code zu verstehen.

Lernziele

• Cloud Functions-Funktion verstehen und bereitstellen
• App Engine-Anwendung verstehen und bereitstellen
• Anwendung testen

Kosten

In diesem Dokument verwenden Sie die folgenden kostenpflichtigen Komponenten von Google Cloud:

• App Engine
• Cloud Functions
• Firestore
• Pub/Sub
• Cloud Translation

Mit dem Preisrechner können Sie eine Kostenschätzung für Ihre voraussichtliche Nutzung vornehmen. Neuen Google Cloud-Nutzern steht möglicherweise eine kostenlose Testversion zur Verfügung.

Nach Abschluss der in diesem Dokument beschriebenen Aufgaben können Sie weitere Kosten vermeiden, indem Sie die erstellten Ressourcen löschen. Weitere Informationen finden Sie unter Bereinigen.

Hinweis

1. Melden Sie sich bei Ihrem Google Cloud-Konto an. Wenn Sie mit Google Cloud noch nicht vertraut sind, erstellen Sie ein Konto, um die Leistungsfähigkeit unserer Produkte in der Praxis sehen und bewerten zu können. Neukunden erhalten außerdem ein Guthaben von 300 $, um Arbeitslasten auszuführen, zu testen und bereitzustellen.

2. Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.

   Hinweis: Wenn Sie die Ressourcen, die Sie in diesem Verfahren erstellen, nicht behalten möchten, erstellen Sie ein Projekt, anstatt ein vorhandenes Projekt auszuwählen. Wenn Sie fertig sind, können Sie das Projekt löschen und dadurch alle mit dem Projekt verknüpften Ressourcen entfernen.

   Zur Projektauswahl

3. Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein.

4. Firestore, Cloud Functions, Pub/Sub, and Cloud Translation APIs aktivieren.

   Aktivieren Sie die APIs

5. Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.

   Hinweis: Wenn Sie die Ressourcen, die Sie in diesem Verfahren erstellen, nicht behalten möchten, erstellen Sie ein Projekt, anstatt ein vorhandenes Projekt auszuwählen. Wenn Sie fertig sind, können Sie das Projekt löschen und dadurch alle mit dem Projekt verknüpften Ressourcen entfernen.

   Zur Projektauswahl

6. Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein.

7. Firestore, Cloud Functions, Pub/Sub, and Cloud Translation APIs aktivieren.

   Aktivieren Sie die APIs

8. Öffnen Sie die App in Google Cloud Console.

   Zu Cloud Shell

   Cloud Shell bietet Ihnen direkt über den Browser Befehlszeilenzugriff auf Ihre Cloud-Ressourcen. Öffnen Sie Cloud Shell im Browser und klicken Sie auf Fortfahren, um den Beispielcode herunterzuladen und ins Anwendungsverzeichnis zu wechseln.

9. Konfigurieren Sie in Cloud Shell das gcloud-Tool für die Verwendung Ihres Google Cloud-Projekts:

   # Configure gcloud for your project
   gcloud config set project YOUR_PROJECT_ID

Informationen zur Cloud Functions-Funktion

• Die Funktion beginnt mit dem Import mehrerer Abhängigkeiten wie Firestore und Translation. Die globalen Firestore- und Translation-Clients werden initialisiert, damit sie zwischen Funktionsaufrufen wiederverwendet werden können. So müssen Sie nicht für jeden Funktionsaufruf neue Clients initialisieren, was die Ausführung verlangsamen würde.

  background/function/translate.js

  Auf GitHub ansehen

  const Firestore = require('@google-cloud/firestore');
  const {Translate} = require('@google-cloud/translate').v2;
  
  const firestore = new Firestore();
  const translate = new Translate();

• Die Translation API übersetzt den String in die von Ihnen ausgewählte Sprache.

  background/function/translate.js

  Auf GitHub ansehen

  const [
    translated,
    {
      data: {translations},
    },
  ] = await translate.translate(original, language);
  const originalLanguage = translations[0].detectedSourceLanguage;
  console.log(
    `Translated ${original} in ${originalLanguage} to ${translated} in ${language}.`
  );

• Die Cloud Functions-Funktion parst die Pub/Sub-Nachricht, um den zu übersetzenden Text und die gewünschte Zielsprache abzurufen.

  Anschließend fordert die Anwendung eine Übersetzung an und speichert das Ergebnis in Firestore.

  background/function/translate.js

  Auf GitHub ansehen

  // translate translates the given message and stores the result in Firestore.
  // Triggered by Pub/Sub message.
  exports.translate = async (pubSubEvent) => {
    const {language, original} = JSON.parse(
      Buffer.from(pubSubEvent.data, 'base64').toString()
    );
  
    const [
      translated,
      {
        data: {translations},
      },
    ] = await translate.translate(original, language);
    const originalLanguage = translations[0].detectedSourceLanguage;
    console.log(
      `Translated ${original} in ${originalLanguage} to ${translated} in ${language}.`
    );
  
    // Store translation in firestore.
    await firestore.collection('translations').doc().set({
      language,
      original,
      translated,
      originalLanguage,
    });
  };

Cloud Functions-Funktion bereitstellen

• Stellen Sie die Cloud Functions-Funktion im selben Verzeichnis wie die Datei translate.js mit einem Pub/Sub-Trigger bereit:

  gcloud functions deploy translate --runtime nodejs10 --trigger-topic translate

Informationen zur Anwendung

Zur Webanwendung gehören zwei Hauptkomponenten:

• Ein Node.js-HTTP-Server für Webanfragen Der Server hat die folgenden beiden Endpunkte:
  • /: Listet alle vorhandenen Übersetzungen auf und zeigt ein Formular an, das Nutzer senden können, um neue Übersetzungen anzufordern.
  • /request-translation: Formulare werden an diesen Endpunkt gesendet, der die Anfrage zur asynchronen Übersetzung in Pub/Sub veröffentlicht.
• Eine HTML-Vorlage, die vom Node.js-Server mit den vorhandenen Übersetzungen ausgefüllt wird.

Der HTTP-Server

• Im Verzeichnis server beginnt app.js mit dem Einrichten der Anwendung und dem Registrieren von HTTP-Handlern:

  background/server/app.js

  Auf GitHub ansehen

  
  // This app is an HTTP app that displays all previous translations
  // (stored in Firestore) and has a form to request new translations. On form
  // submission, the request is sent to Pub/Sub to be processed in the background.
  
  // TOPIC_NAME is the Pub/Sub topic to publish requests to. The Cloud Function to
  // process translation requests should be subscribed to this topic.
  const TOPIC_NAME = 'translate';
  
  const express = require('express');
  const bodyParser = require('body-parser');
  const {PubSub} = require('@google-cloud/pubsub');
  const {Firestore} = require('@google-cloud/firestore');
  
  const app = express();
  const port = process.env.PORT || 8080;
  
  const firestore = new Firestore();
  
  const pubsub = new PubSub();
  const topic = pubsub.topic(TOPIC_NAME);
  
  // Use handlebars.js for templating.
  app.set('views', __dirname);
  app.set('view engine', 'html');
  app.engine('html', require('hbs').__express);
  
  app.use(bodyParser.urlencoded({extended: true}));
  
  app.get('/', index);
  app.post('/request-translation', requestTranslation);
  app.listen(port, () => console.log(`Listening on port ${port}!`));
  

• Der Index-Handler (/) ruft alle vorhandenen Übersetzungen aus Firestore ab und füllt eine HTML-Vorlage mit der Liste aus:

  background/server/app.js

  Auf GitHub ansehen

  
  // index lists the current translations.
  async function index(req, res) {
    const translations = [];
    const querySnapshot = await firestore.collection('translations').get();
    querySnapshot.forEach((doc) => {
      console.log(doc.id, ' => ', doc.data());
      translations.push(doc.data());
    });
  
    res.render('index', {translations});
  }
  

• Neue Übersetzungen werden durch Senden eines HTML-Formulars angefordert. Der Handler für Übersetzungsanfragen, der unter /request-translation registriert ist, parst das gesendete Formular, validiert die Anfrage und veröffentlicht eine Nachricht in Pub/Sub:

  background/server/app.js

  Auf GitHub ansehen

  
  // requestTranslation parses the request, validates it, and sends it to Pub/Sub.
  function requestTranslation(req, res) {
    const language = req.body.lang;
    const original = req.body.v;
  
    const acceptableLanguages = ['de', 'en', 'es', 'fr', 'ja', 'sw'];
    if (!acceptableLanguages.includes(language)) {
      throw new Error(`Invalid language ${language}`);
    }
  
    console.log(`Translation requested: ${original} -> ${language}`);
  
    const buffer = Buffer.from(JSON.stringify({language, original}));
    topic.publish(buffer);
    res.sendStatus(200);
  }

HTML-Vorlage

Die HTML-Vorlage ist die Grundlage für die HTML-Seite, die dem Nutzer angezeigt wird, damit er frühere Übersetzungen sehen und neue anfordern kann. Die Vorlage wird vom HTTP-Server mit der Liste der vorhandenen Übersetzungen ausgefüllt.

• Das <head>-Element der HTML-Vorlage enthält Metadaten, Stylesheets und JavaScript für die Seite:
  background/server/index.html

  Auf GitHub ansehen

  <html>
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Translations</title>
  
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
      <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script>
          $(document).ready(function() {
              $("#translate-form").submit(function(e) {
                  e.preventDefault();
                  // Get value, make sure it's not empty.
                  if ($("#v").val() == "") {
                      return;
                  }
                  $.ajax({
                      type: "POST",
                      url: "/request-translation",
                      data: $(this).serialize(),
                      success: function(data) {
                          // Show snackbar.
                          console.log(data);
                          var notification = document.querySelector('.mdl-js-snackbar');
                          $("#snackbar").removeClass("mdl-color--red-100");
                          $("#snackbar").addClass("mdl-color--green-100");
                          notification.MaterialSnackbar.showSnackbar({
                              message: 'Translation requested'
                          });
                      },
                      error: function(data) {
                          // Show snackbar.
                          console.log("Error requesting translation");
                          var notification = document.querySelector('.mdl-js-snackbar');
                          $("#snackbar").removeClass("mdl-color--green-100");
                          $("#snackbar").addClass("mdl-color--red-100");
                          notification.MaterialSnackbar.showSnackbar({
                              message: 'Translation request failed'
                          });
                      }
                  });
              });
          });
      </script>
      <style>
          .lang {
              width: 50px;
          }
          .translate-form {
              display: inline;
          }
      </style>
  </head>

  Die Seite bindet CSS von Material Design Lite (MDL) und JavaScript-Assets ein. Mit MDL können Sie Ihren Websites einen Material Design-Look verleihen.

  Mithilfe von JQuery wartet die Seite, bis das Dokument fertig geladen ist, und legt dann einen Handler für gesendete Formulare fest. Wenn das Formular zur Übersetzungsanfrage gesendet wird, bestätigt die Seite mithilfe einer minimalen Formularvalidierung, dass der Wert nicht leer ist, und sendet dann eine asynchrone Anfrage an den Endpunkt /request-translation.

  Schließlich wird in einer MDL-Snackbar angegeben, ob die Anfrage erfolgreich war oder ob ein Fehler aufgetreten ist.

• Der HTML-Text der Seite verwendet ein MDL-Layout und mehrere MDL-Komponenten, um eine Liste von Übersetzungen und ein Formular zum Anfordern weiterer Übersetzungen anzuzeigen:
  background/server/index.html

  Auf GitHub ansehen

  <body>
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header class="mdl-layout__header">
              <div class="mdl-layout__header-row">
                  <!-- Title -->
                  <span class="mdl-layout-title">Translate with Background Processing</span>
              </div>
          </header>
          <main class="mdl-layout__content">
              <div class="page-content">
                  <div class="mdl-grid">
                  <div class="mdl-cell mdl-cell--1-col"></div>
                      <div class="mdl-cell mdl-cell--3-col">
                          <form id="translate-form" class="translate-form">
                              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                  <input class="mdl-textfield__input" type="text" id="v" name="v">
                                  <label class="mdl-textfield__label" for="v">Text to translate...</label>
                              </div>
                              <select class="mdl-textfield__input lang" name="lang">
                                  <option value="de">de</option>
                                  <option value="en">en</option>
                                  <option value="es">es</option>
                                  <option value="fr">fr</option>
                                  <option value="ja">ja</option>
                                  <option value="sw">sw</option>
                              </select>
                              <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" type="submit"
                                  name="submit">Submit</button>
                          </form>
                      </div>
                      <div class="mdl-cell mdl-cell--8-col">
                          <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                              <thead>
                                  <tr>
                                      <th class="mdl-data-table__cell--non-numeric"><strong>Original</strong></th>
                                      <th class="mdl-data-table__cell--non-numeric"><strong>Translation</strong></th>
                                  </tr>
                              </thead>
                              <tbody>
                                  {{#each translations}}
                                  <tr>
                                      <td class="mdl-data-table__cell--non-numeric">
                                          <span class="mdl-chip mdl-color--primary">
                                              <span class="mdl-chip__text mdl-color-text--white">{{ originalLanguage }} </span>
                                          </span>
                                      {{ original }}
                                      </td>
                                      <td class="mdl-data-table__cell--non-numeric">
                                          <span class="mdl-chip mdl-color--accent">
                                              <span class="mdl-chip__text mdl-color-text--white">{{ language }} </span>
                                          </span>
                                          {{ translated }}
                                      </td>
                                  </tr>
                                  {{/each}}
                              </tbody>
                          </table>
                          <br/>
                          <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onClick="window.location.reload();">
                              Refresh
                          </button>
                      </div>
                  </div>
              </div>
              <div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar" id="snackbar">
                  <div class="mdl-snackbar__text mdl-color-text--black"></div>
                  <button type="button" class="mdl-snackbar__action"></button>
              </div>
          </main>
      </div>
  </body>
  
  </html>

Webanwendung bereitstellen

Sie können die App Engine-Standardumgebung verwenden, um eine Anwendung zu erstellen und bereitzustellen, die zuverlässig unter hoher Last und mit großen Datenmengen ausgeführt wird.

In dieser Anleitung wird das HTTP-Front-End in der App Engine-Standardumgebung bereitgestellt.

Die Datei app.yaml konfiguriert die App Engine-Anwendung:

background/server/app.yaml

Auf GitHub ansehen

runtime: nodejs10

• Stellen Sie die Anwendung aus demselben Verzeichnis wie die Datei app.yaml in der App Engine-Standardumgebung bereit:

  gcloud app deploy

Anwendung testen

Nachdem Sie die Cloud Functions-Funktion und die App Engine-Anwendung bereitgestellt haben, können Sie eine Übersetzung anfordern.

1. Geben Sie die folgende URL ein,um die App in Ihrem Browser aufzurufen:

   https://PROJECT_ID.REGION_ID.r.appspot.com

   Dabei gilt:

   • PROJECT_ID: Ihre Google Cloud-Projekt-ID
   • REGION_ID: Code, der Ihrer Anwendung von App Engine zugewiesen wird

   Es gibt eine Seite mit einer leeren Liste von Übersetzungen und einem Formular zum Anfordern neuer Übersetzungen.

2. Geben Sie im Feld Zu übersetzender Text einen Text ein, der übersetzt werden soll, z. B. Hello, World.
3. Wählen Sie in der Drop-down-Liste eine Sprache aus, in die Sie den Text übersetzen möchten.
4. Klicken Sie auf Senden.
5. Klicken Sie zum Aktualisieren der Seite auf Aktualisieren . Die Übersetzungsliste enthält jetzt eine neue Zeile. Wenn Sie keine Übersetzung sehen, warten Sie einige Sekunden und versuchen es dann noch einmal. Ist immer noch keine Übersetzung zu sehen, lesen Sie den nächsten Abschnitt zum Debugging der Anwendung.

Fehler in der Anwendung beheben

Wenn Sie keine Verbindung zur App Engine-Anwendung herstellen können oder keine neuen Übersetzungen sehen, gehen Sie so vor:

1. Prüfen Sie, ob die gcloud-Bereitstellungsbefehle erfolgreich ausgeführt wurden und keine Fehler ausgegeben haben. Wenn Fehler aufgetreten sind, beheben Sie sie, bevor Sie die Cloud Functions-Funktion und die App Engine-Anwendung noch einmal bereitstellen.

2. Rufen Sie in der Google Cloud Console die Seite „Loganzeige“ auf.

   Zur Seite „Loganzeige“
   1. Klicken Sie in der Drop-down-Liste Kürzlich ausgewählte Ressourcen auf GAE-Anwendung und dann auf Alle Werte für module_id. Sie sehen eine Liste der Anfragen, die Sie beim Besuch Ihrer Anwendung gestellt haben. Wenn keine Anfragenliste angezeigt wird, bestätigen Sie, dass Sie Alle Werte für module_id aus der Drop-down-Liste ausgewählt haben. Wenn Fehlermeldungen in der Google Cloud Console angezeigt werden, prüfen Sie, ob der Code Ihrer Anwendung mit dem Code im Abschnitt zum Verständnis der Anwendung übereinstimmt.
   2. Klicken Sie in der Drop-down-Liste Kürzlich ausgewählte Ressourcen auf Cloud Functions-Funktion und dann auf Alle Funktionsnamen. Daraufhin wird für jede angeforderte Übersetzung eine Funktion angezeigt. Wenn nicht, prüfen Sie, ob die Cloud Functions-Funktion und die App Engine-Anwendung dasselbe Pub/Sub-Thema verwenden:
      • Prüfen Sie in der Datei background/server/app.js, ob die TOPIC_NAME-Konstante "translate" lautet.
      • Geben Sie beim Bereitstellen der Cloud Functions-Funktion unbedingt das Flag --trigger-topic=translate an.

Bereinigen

Damit Ihrem Google Cloud-Konto die in dieser Anleitung verwendeten Ressourcen nicht in Rechnung gestellt werden, löschen Sie entweder das Projekt, das die Ressourcen enthält, oder Sie behalten das Projekt und löschen die einzelnen Ressourcen.

Cloud-Projekt löschen

Achtung: Das Löschen von Projekten hat folgende Auswirkungen:
• Alle Inhalte des Projekts werden gelöscht. Wenn Sie für die Aufgaben in diesem Dokument ein bereits bestehendes Projekt verwendet haben und dieses löschen, werden auch alle anderen im Rahmen des Projekts erstellten Daten gelöscht.
• Benutzerdefinierte Projekt-IDs gehen verloren. Beim Erstellen dieses Projekts haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie weiterhin verwenden möchten. Damit die URLs, die die Projekt-ID nutzen, z. B. eine appspot.com-URL, erhalten bleiben, sollten Sie ausgewählte Ressourcen innerhalb des Projekts löschen, statt das gesamte Projekt.
1. Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.

   Zur Seite „Ressourcen verwalten“

2. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen.
3. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Shut down (Beenden), um das Projekt zu löschen.

App Engine-Instanz löschen

1. Rufen Sie in der Google Cloud Console die Seite Versionen für App Engine auf.

   Zur Seite "Versionen"

2. Klicken Sie auf das Kästchen für die nicht standardmäßige Anwendungsversion, die Sie löschen möchten.
   Hinweis: Die einzige Möglichkeit, die Standardversion Ihrer App Engine-Anwendung zu löschen, besteht im Löschen Ihres Projekts. Sie können jedoch die Standardversion in der Google Cloud Console anhalten. Diese Aktion fährt alle mit der Version verbundenen Instanzen herunter. Sie können diese Instanzen später neu starten.

   In der Standardumgebung der App Engine können Sie die Standardversion nur dann anhalten, wenn Ihre Anwendung eine manuelle oder einfache Skalierung aufweist.

3. Klicken Sie zum Löschen der Anwendungsversion auf Löschen.

Cloud Functions-Funktion löschen

• Löschen Sie die in dieser Anleitung erstellte Cloud Functions-Funktion:

  gcloud functions delete Translate

Nächste Schritte

• Weitere Cloud Functions-Anleitungen testen
• Mehr über App Engine erfahren
• Cloud Run testen, um zustandslose Container in einer vollständig verwalteten Umgebung oder im eigenen Google Kubernetes Engine-Cluster auszuführen