Mettre à jour votre service Web

ID de la région

Le REGION_ID est un code abrégé que Google attribue en fonction de la région que vous sélectionnez lors de la création de votre application. Le code ne correspond pas à un pays ou une province, même si certains ID de région peuvent ressembler aux codes de pays et de province couramment utilisés. Pour les applications créées après février 2020, REGION_ID.r est inclus dans les URL App Engine. Pour les applications existantes créées avant cette date, l'ID de région est facultatif dans l'URL.

En savoir plus sur les ID de région

Cette section du guide explique comment écrire, tester et déployer des mises à jour sur l'exemple de service Web que vous avez déployé dans la section précédente, Déployer votre service Web.

Avant de commencer

Si vous n'avez pas encore complété les sections précédentes de ce guide "Concevoir une application", procédez comme suit :

  1. Créez un projet Google Cloud avec une application App Engine.
  2. Créez un service Web Node.js simple.
  3. Déployez le service Web sur App Engine.

Mettre à jour l'exemple de service Web

Les sections suivantes mettent à jour l'exemple de service Web pour y ajouter un formulaire et un gestionnaire qui répond lorsqu'un utilisateur envoie le formulaire.

Créer un formulaire pour les entrées utilisateur

Pour permettre à un utilisateur d'envoyer des données à votre serveur, utilisez un formulaire HTML.

  1. Dans votre dossier my-nodejs-service, créez un dossier nommé views pour stocker vos fichiers HTML.

  2. Dans le dossier views, créez un fichier nommé form.html et ajoutez le code suivant :

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

Ce formulaire simple permet à un utilisateur de saisir un nom et un message à envoyer au serveur. Il envoie les données via une requête HTTP POST à /submit, comme spécifié par les attributs method et action de l'élément <form>.

À ce stade, vous devriez disposer d'une structure de fichiers de ce type :

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

Afficher le formulaire

  1. Ajoutez la ligne suivante en haut de votre fichier server.js pour importer le module path :

    const path = require(`path`);
    
  2. Ajoutez le gestionnaire Express suivant pour afficher le formulaire lorsqu'un utilisateur accède à /submit :

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

Créer un gestionnaire pour les données envoyées

Lorsqu'un utilisateur envoie un message au serveur, une requête POST contenant les données est envoyée à /submit. Pour lire les données à partir du corps de la requête, utilisez le middleware Express urlencoded et créez un gestionnaire de requêtes.

  1. Configurez votre application pour utiliser le middleware Express urlencoded :

    // This middleware is available in Express v4.16.0 onwards
    app.use(express.urlencoded({extended: true}));
  2. Ajoutez un gestionnaire POST à votre fichier server.js pour lire les données :

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

Cet exemple de gestionnaire enregistre le nom de l'utilisateur et le message dans la console, mais vous pouvez également effectuer des opérations sur les données ou les stocker dans une base de données.

Tester le formulaire en local

Testez votre nouveau formulaire localement avant de déployer vos modifications.

  1. Démarrez votre serveur Node.js :

    npm start
    
  2. Affichez votre formulaire à l'adresse http://localhost:8080/submit.

    Envoyez un message à l'aide du formulaire. Votre nom et votre message doivent s'afficher sur votre terminal.

Déployer vos modifications

Lorsque vous déployez une mise à jour, une nouvelle version de votre service par défaut est créée, et le trafic est automatiquement acheminé vers la dernière version. Pour déployer une mise à jour :

  1. Depuis votre dossier my-nodejs-service, exécutez la commande suivante :

    gcloud app deploy
    

    Il s'agit de la même commande que celle que vous avez apprise pour déployer votre service Web.

  2. Confirmez qu'une nouvelle version est répertoriée dans la console Google Cloud :

    Afficher les versions

    Vous devez voir deux versions correspondant au déploiement précédent et au déploiement actuel.

Après le déploiement, votre nouveau formulaire est accessible à l'adresse https://PROJECT_ID.REGION_ID.r.appspot.com/submit. Utilisez-le pour envoyer un ou deux messages.

Si vous n'avez plus besoin de la version précédente, vous pouvez la supprimer de la page "Versions" dans la console Google Cloud.

Étapes suivantes

Maintenant que votre application dispose d'un formulaire permettant aux utilisateurs d'envoyer des données, découvrez comment afficher les journaux de votre application dans la console Google Cloud.