ウェブサービスの更新

このセクションでは、更新を作成して既存の App Engine サービスにデプロイする方法を説明します。Node.js ランタイムとそのしくみについて詳しくは、Node.js ランタイム環境をご覧ください。

始める前に

  1. App Engine アプリを含む Google Cloud Platform プロジェクトを作成します
  2. Node.js ウェブサーバーを 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 に送信されます。リクエストの本文からデータを読み取るには、NPM の body-parser モジュールを使用して新しいリクエスト ハンドラを作成します。

  1. my-nodejs-service フォルダから次のコマンドを実行して、body-parser を依存関係として追加します。

    npm install body-parser
    
  2. body-parser をインポートするために、server.js ファイルの先頭に次の行を追加します。

    const bodyParser = require('body-parser');
    
  3. 次の行を追加して、body-parser を使用するように Express アプリを設定します。

    app.use(bodyParser.urlencoded({ extended: true }));
  4. データを読み取るために、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. 新しいバージョンが GCP Console に表示されることを確認します。

    バージョンを表示

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

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

以前のバージョンが不要になった場合は、GCP Console のバージョン ページから削除できます。

次のステップ

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

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

Node.js 用 App Engine スタンダード環境に関するドキュメント