ウェブサービスの更新

リージョン ID

REGION_ID は、アプリの作成時に選択したリージョンに基づいて Google が割り当てる省略形のコードです。一部のリージョン ID は、一般的に使用されている国や州のコードと類似しているように見える場合がありますが、このコードは国または州に対応するものではありません。2020 年 2 月以降に作成されたアプリの場合、REGION_ID.r は App Engine の URL に含まれています。この日付より前に作成されたアプリの場合、URL のリージョン ID は省略可能です。

詳しくは、リージョン ID をご覧ください。

このセクションでは、前のセクションのウェブサービスのデプロイでデプロイしたサンプル ウェブサービスの更新を作成してテストし、デプロイする方法について説明します。

始める前に

この「アプリの構築」ガイドの前のセクションをまだ完了していない場合は、次の手順を行います。

  1. App Engine アプリで Google Cloud プロジェクトを作成します。
  2. 簡単な Node.js ウェブサービスを作成します。
  3. App Engine にウェブサービスをデプロイします。

サンプル ウェブサービスを更新する

以降のセクションでは、サンプル ウェブサービスを更新し、フォームと、ユーザーがフォームを送信したときに応答するハンドラを追加します。

ユーザー入力フォームを作成する

ユーザーがサーバーにデータを送信できるようにするには、HTML フォームを使用します。

  1. my-nodejs-service フォルダ内に、HTML ファイルを格納するための views という名前のフォルダを作成します。

  2. views フォルダ内に、form.html という名前の新規ファイルを作成し、次のコードを追加します。

    <!DOCTYPE html>
<html>
  <head>
    <title>My App Engine App</title>
  </head>
  <body>
    <h2>Create a new post</h2>
    <form method="POST" action="/submit">
      <div>
        <input type="text" name="name" placeholder="Name">
      </div>
      <div>
        <textarea name="message" placeholder="Message"></textarea>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </body>
</html>

この単純なフォームを使用して、ユーザーはサーバーに送信する名前とメッセージを入力できます。<form> 要素の method 属性と action 属性で指定されているように、このフォームは HTTP POST リクエストを使用してデータを /submit に送信します。

現時点で、ファイル構造は次のようになっているはずです。

my-nodejs-service/
  views/
    form.html
  app.yaml
  package.json
  server.js

フォームを表示する

  1. path モジュールをインポートするために、server.js ファイルの先頭に次の行を追加します。

    const path = require(`path`);

  2. 次の Express ハンドラを追加して、ユーザーが /submit を参照するとフォームが表示されるようにします。

    app.get('/submit', (req, res) => {
  res.sendFile(path.join(__dirname, '/views/form.html'));
});

送信されたデータを処理するためのハンドラを作成する

ユーザーがメッセージをサーバーに送信すると、そのデータを格納した POST リクエストが /submit に送信されます。リクエストの本文からデータを読み取るには、Express urlencoded ミドルウェアを使用して新しいリクエスト ハンドラを作成します。

  1. Express urlencoded ミドルウェアを使用するようにアプリを設定します。

    // This middleware is available in Express v4.16.0 onwards
app.use(express.urlencoded({extended: true}));

  2. データを読み取るために、server.js ファイルに POST ハンドラを追加します。

    app.post('/submit', (req, res) => {
  console.log({
    name: req.body.name,
    message: req.body.message,
  });
  res.send('Thanks for your message!');
});

このサンプル ハンドラはユーザー名とメッセージをコンソールに表示するだけですが、データに対するオペレーションの実行や、データベースへの保管もできます。

フォームをローカルでテストする

変更をデプロイする前に、新しいフォームをローカルでテストします。

  1. Node.js サーバーを起動します。

    npm start

  2. http://localhost:8080/submit にアクセスしてフォームを表示します。

    フォームを使用してメッセージを送信します。すると、ターミナルに名前とメッセージが表示されるはずです。

変更をデプロイする

変更をデプロイすると、デフォルト サービスの新しいバージョンが作成されて、トラフィックはその最新バージョンに自動的にルーティングされます。デプロイするには、次の手順に従います。

  1. my-nodejs-service フォルダから、次のコマンドを実行します。

    gcloud app deploy

    このコマンドは、ウェブサービスをデプロイするで説明したコマンドと同じものです。

  2. 新しいバージョンが Google Cloud コンソールに表示されることを確認します。

    バージョンを表示

    前のデプロイメントと現在のデプロイメントに対応する 2 つのバージョンが表示されます。

デプロイ完了後は、新しいフォームに https://PROJECT_ID.REGION_ID.r.appspot.com/submit からアクセスできます。フォームを使用してメッセージをいくつか送信してみてください。

以前のバージョンが不要になった場合は、Google Cloud コンソールの [バージョン] ページから削除できます。

次のステップ

これでユーザーがデータを送信するためのフォームがアプリに追加されたため、Google Cloud コンソールでアプリケーションのログを表示する方法を確認してください。