Updating Your Web Service

This section of the guide shows how to write, test, and deploy updates to the example web service you deployed in the previous section, Deploying Your Web Service.

Before you begin

If you haven't already completed the previous sections in this "Building an App" guide, do the following:

  1. Create a Google Cloud Platform project with an App Engine app.
  2. Write a simple nodejs web service.
  3. Deploy the web service on App Engine.

Updating the example web service

The following sections update the example web service with a form and a handler that responds when a user submits the form.

Creating a form for user input

To let a user submit data to your server, use an HTML form.

  1. In your my-nodejs-service folder, create a folder named views to store your HTML files.

  2. In the views folder, create a file named form.html and add the following code:

    <!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>

This simple form allows a user to enter a name and message to send to the server. It sends the data via an HTTP POST request to /submit, as specified by the method and action attributes on the <form> element.

At this point, you should have a file structure like the following:

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

Displaying the form

  1. Add the following line to the top of your server.js file to import the path module:

    const path = require(`path`);
    
  2. Add the following Express handler to show the form when a user browses to /submit:

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

Creating a handler for submitted data

When a user submits a message to the server, a POST request with the data is sent to /submit. To read the data from the body of the request, use the body-parser module from NPM and create a new request handler.

  1. From your my-nodejs-service folder, add body-parser as a dependency by running the following command:

    npm install body-parser
    
  2. At the beginning of your server.js file, import body-parser by adding the following:

    const bodyParser = require('body-parser');
    
  3. Set your Express app to use body-parser by adding the line:

    app.use(bodyParser.urlencoded({ extended: true }));
  4. Add a POST handler to your server.js file to read the data:

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

This sample handler logs the user's name and message to the console, but you could also perform operations on the data or store it in a database.

Testing the form locally

Test your new form locally before deploying your changes.

  1. Start your Node.js server:

    npm start
    
  2. View your form at http://localhost:8080/submit.

    Submit a message with the form. You should see your name and message appear in your terminal.

Deploying your changes

When you deploy an update, a new version of your default service is created and traffic is automatically routed to the latest version. To deploy:

  1. From your my-nodejs-service folder, run the following command:

    gcloud app deploy
    

    This is the same command you learned in Deploying Your Web Service.

  2. Confirm that a new version is listed in the GCP Console:

    View versions

    You should see two versions corresponding to the previous and current deployment.

After deploying, your new form is accessible at https://YOUR_PROJECT_ID.appspot.com/submit. Use it to submit a message or two!

If you do not need the previous version anymore, you can delete it from the versions page in the GCP Console.

Next steps

Now that your app has a form for users to submit data, learn how to view your application’s logs in the GCP Console.

¿Te ha resultado útil esta página? Enviar comentarios:

Enviar comentarios sobre...

App Engine standard environment for Node.js docs