Node.js を使用したバックグラウンド処理

多くのアプリでは、ウェブ リクエストのコンテキストの外部でバックグラウンド処理を行う必要があります。このチュートリアルでは、ユーザーが翻訳するテキストを入力した後、以前の翻訳のリストを表示するウェブアプリを作成します。翻訳は、ユーザーのリクエストをブロックしないようにバックグラウンド プロセスで行われます。

次の図は、翻訳リクエストのプロセスを示しています。

アーキテクチャの図

チュートリアル アプリが動作する際のイベントの順序は次のとおりです。

  1. ウェブページにアクセスすると、Firestore に保存されている以前の翻訳のリストが表示されます。
  2. HTML フォームに入力してテキストの翻訳をリクエストします。
  3. 翻訳リクエストは Pub/Sub にパブリッシュされます。
  4. 対象の Pub/Sub トピックに登録されている Cloud 関数がトリガーされます。
  5. Cloud 関数は、Cloud Translation を使用してテキストを翻訳します。
  6. Cloud 関数は結果を Firestore に保存します。

このチュートリアルは、Google Cloud でのバックグラウンド処理の詳細に関心をお持ちの方を対象としています。Pub/Sub、Firestore、App Engine、Cloud Functions についての経験は必須要件ではありません。ただし、Node.js、JavaScript、HTML の経験をお持ちであれば、すべてのコードを理解する際に有用です。

目標

  • Cloud 関数を理解し、デプロイします。
  • App Engine アプリを理解し、デプロイします。
  • アプリを試してみます。

料金

このチュートリアルでは、課金対象である次の Google Cloud コンポーネントを使用します。

料金計算ツールを使うと、予想使用量に基づいて費用の見積もりを生成できます。新しい Google Cloud ユーザーは無料トライアルをご利用いただけます。

このチュートリアルを終了した後、作成したリソースを削除すると、それ以上の請求は発生しません。詳しくは、クリーンアップをご覧ください。

始める前に

  1. Google アカウントにログインします。

    Google アカウントをまだお持ちでない場合は、新しいアカウントを登録します。

  2. Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

    [プロジェクトの選択] ページに移動

  3. Cloud プロジェクトに対して課金が有効になっていることを確認します。プロジェクトに対して課金が有効になっていることを確認する方法を学習する

  4. Firestore, Cloud Functions, Pub/Sub, and Cloud Translation API を有効にします。

    API を有効にする

  5. Google Cloud Console から、Cloud Shell でアプリを開きます。

    Cloud Shell に移動

    Cloud Shell を使用すると、ブラウザからコマンドラインで直接クラウド リソースにアクセスできます。ブラウザで Cloud Shell を開き、[続行] をクリックしてサンプルコードをダウンロードし、アプリ ディレクトリに移動します。

  6. Cloud Shell で、gcloud ツールを構成して Google Cloud プロジェクトを使用します。
    # Configure gcloud for your project
    gcloud config set project YOUR_PROJECT_ID

Cloud 関数について

  • この関数は、Firestore や Translation のようないくつかの依存関係をインポートすることから始まります。グローバル Firestore クライアントと Translation クライアントは、関数呼び出し間で再利用できるように初期化されます。これにより、実行速度の低下の要因となる、関数の呼び出しごとに新しいクライアントを初期化することが必要なくなります。

    const Firestore = require('@google-cloud/firestore');
    const {Translate} = require('@google-cloud/translate').v2;
    
    const firestore = new Firestore();
    const translate = new Translate();
  • 翻訳 API は、選択した言語に文字列を翻訳します。

    const [
      translated,
      {
        data: {translations},
      },
    ] = await translate.translate(original, language);
    const originalLanguage = translations[0].detectedSourceLanguage;
    console.log(
      `Translated ${original} in ${originalLanguage} to ${translated} in ${language}.`
    );
  • Cloud 関数は Pub/Sub メッセージを解析して、翻訳するテキストとターゲット言語を取得します。

    その後、アプリが翻訳をリクエストし、結果を Firestore に保存します。

    // 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 関数のデプロイ

  • translate.js ファイルと同じディレクトリで、Pub/Sub トリガーを使用して Cloud 関数をデプロイします。

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

アプリについて

ウェブアプリには主に次の 2 つのコンポーネントがあります。

  • ウェブ リクエストを処理する Node.js HTTP サーバー。サーバーには、次の 2 つのエンドポイントがあります。
    • /: 既存のすべての翻訳を一覧表示し、ユーザーが新しい翻訳をリクエストする際に送信できるフォームを表示します。
    • /request-translation: フォーム送信はこのエンドポイントに送信され、Pub/Sub へのリクエストがパブリッシュされ、翻訳は非同期で処理されます。
  • Node.js サーバーによって既存の翻訳が入力された HTML テンプレート。

HTTP サーバー

  • server ディレクトリ内で、アプリの設定と HTTP ハンドラの登録により app.js を開始します。

    
    // 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}!`));
    
  • インデックス ハンドラ(/)は、Firestore から既存の翻訳をすべて取得し、リストを使用して HTML テンプレートへの入力を行います。

    
    // 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});
    }
    
  • 新しい翻訳をリクエストするには、HTML フォームを送信します。/request-translation に登録されているリクエスト翻訳ハンドラは、フォーム送信を解析してリクエストを検証し、メッセージを Pub/Sub にパブリッシュします。

    
    // 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 テンプレート

HTML テンプレートはユーザーに表示される HTML ページの基礎となり、以前の翻訳を表示して新しい翻訳をリクエストできます。HTTP サーバーは、既存の翻訳のリストを使用してテンプレートへの入力を行います。

  • HTML テンプレートの <head> 要素には、ページのメタデータ、スタイルシート、JavaScript が含まれます。
    <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>

    このページでは、Material Design Lite(MDL)の CSS アセットと JavaScript アセットを取得します。MDL によって、ウェブサイトに Material Design の外観を追加できます。

    ページは JQuery を使用してドキュメントの読み込みが完了するのを待ち、フォーム送信ハンドラを設定します。翻訳のリクエスト フォームが送信されるたびに、ページは最小限のフォームの検証を行い値が空でないことを確認してから、非同期リクエストを /request-translation エンドポイントに送信します。

    最後に、リクエストが成功したか、またはエラーが発生したかを示す MDL スナックバーが表示されます。

  • ページの HTML 本文は、MDL レイアウトといくつかの MDL コンポーネントを使用して、翻訳のリストと追加の翻訳をリクエストするフォームを表示します。
    <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>

ウェブアプリのデプロイ

App Engine スタンダード環境を使用すると、高負荷で大量のデータが存在する状況でも確実に動作するアプリをビルドしてデプロイできます。

このチュートリアルでは、App Engine スタンダード環境を使用して HTTP フロントエンドをデプロイします。

app.yaml は App Engine アプリを構成します。

runtime: nodejs10
  • app.yaml ファイルと同じディレクトリから、App Engine スタンダード環境にアプリをデプロイします。
    gcloud app deploy

アプリをテストする

Cloud 関数と App Engine アプリをデプロイしたら、翻訳のリクエストを試行します。

  1. ブラウザでアプリを表示するには、次の URL を入力します。

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

    以下を置き換えます。

    翻訳に関する空のリストと新しい翻訳をリクエストするためのフォームを掲載したページがあります。

  2. [翻訳するテキスト] フィールドに、翻訳するテキスト(Hello, World など)を入力します。
  3. テキストを翻訳する対象言語をプルダウン リストから選択します。
  4. [送信] をクリックします。
  5. ページを更新するには、[Refresh](更新)をクリックします。翻訳リストに新しい行が追加されます。翻訳が表示されない場合は、数秒待ってからもう一度お試しください。それでも翻訳が表示されない場合は、アプリのデバッグに関する次のセクションをご覧ください。

アプリのデバッグ

App Engine アプリに接続できない場合や、新しい翻訳が表示されない場合は、次の点をご確認ください。

  1. gcloud デプロイ コマンドが正常に終了して、エラーを出力しなかったことを確認します。エラーが発生した場合は、それらを修正してから、もう一度 Cloud 関数のデプロイApp Engine アプリを試みます。
  2. Google Cloud Console で、ログビューア ページに移動します。

    [ログビューア] ページに移動
    1. [最近選択したリソース] プルダウン リストで [GAE アプリケーション] をクリックし、[All module_id] をクリックします。アプリにアクセスした以降のリクエストのリストが表示されます。リクエストのリストが表示されない場合は、プルダウン リストで [All module_id ] が選択されていることを確認します。エラー メッセージが Cloud Console に出力された場合は、アプリのコードがアプリの理解に関するセクション内のコードと一致することを確認します。
    2. [最近選択したリソース] プルダウン リストで、[Cloud Function] をクリックしてから、[すべての関数名] をクリックします。リクエストされた翻訳ごとに関数が表示されます。表示されない場合は、Cloud 関数と App Engine アプリが同じ Pub/Sub トピックを使用していることを確認します。
      • background/server/app.js ファイルで、TOPIC_NAME 定数が "translate" になっているか確認します。
      • Cloud 関数をデプロイする場合は、必ず --trigger-topic=translate フラグを含める必要があります。

クリーンアップ

このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、リソースを含むプロジェクトを削除するか、プロジェクトを維持して個々のリソースを削除します。

Cloud プロジェクトの削除

  1. Cloud Console で [リソースの管理] ページに移動します。

    [リソースの管理] に移動

  2. プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
  3. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

App Engine インスタンスの削除

  1. Cloud Console で、App Engine の [バージョン] ページに移動します。

    [バージョン] ページに移動

  2. デフォルト以外で削除するアプリのバージョンのチェックボックスをオンにします。
  3. [削除] をクリックして、アプリのバージョンを削除します。

Cloud 関数の削除

  • このチュートリアルで作成した Cloud 関数を削除します。
    gcloud functions delete Translate

次のステップ