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

リージョン ID

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

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

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

始める前に

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

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

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

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

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

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

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

フォームを表示する

path モジュールをインポートするために、server.js ファイルの先頭に次の行を追加します。
```
const path = require(`path`);
```
次の Express ハンドラを追加して、ユーザーが /submit を参照するとフォームが表示されるようにします。
```
app.get('/submit', (req, res) => {
  res.sendFile(path.join(__dirname, '/views/form.html'));
});
```

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

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

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

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

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

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

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

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

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

Node.js サーバーを起動します。
```
npm start
```
http://localhost:8080/submit にアクセスしてフォームを表示します。

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

変更をデプロイする

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

my-nodejs-service フォルダから、次のコマンドを実行します。
```
gcloud app deploy
```
このコマンドは、ウェブサービスをデプロイするで説明したコマンドと同じものです。
新しいバージョンが Google Cloud コンソールに表示されることを確認します。

バージョンを表示

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

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

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

次のステップ

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