Génération d’une application GitHub qui répond aux événements de webhook

Introduction

Ce tutoriel montre comment écrire du code pour créer une GitHub App qui effectue une requête d’API en réponse à un événement de webhook. Plus précisément, lorsqu’une demande de tirage est ouverte dans un référentiel auquel l’application a obtenu l’accès, l’application reçoit un événement webhook de demande de tirage. Ensuite, l’application utilise l’API de GitHub pour ajouter un commentaire à la demande de tirage.

Dans ce tutoriel, vous allez utiliser votre ordinateur ou codespace comme serveur pendant que vous développez votre application. Une fois que l’application est prête pour être utilisée en production, vous devez déployer votre application sur un serveur dédié.

Ce tutoriel utilise JavaScript, mais vous pouvez utiliser n’importe quel langage de programmation que vous pouvez exécuter sur votre serveur.

À propos des webhooks

Lorsque vous inscrivez une GitHub App, vous pouvez spécifier une URL de webhook et vous abonner aux événements de webhook. Lorsque l’activité sur GitHub déclenche un événement auquel votre application est abonnée, GitHub envoie un événement de webhook à l’URL du webhook de votre application.

Par exemple, vous pouvez abonner votre GitHub App à l’événement de webhook de demande de tirage. Lorsqu’une demande de tirage est ouverte dans un référentiel auquel l’application a obtenu l’accès, GitHub envoie un événement de webhook de demande de tirage à l’URL du webhook de votre application. Si plusieurs actions peuvent déclencher l’événement, la charge utile de l’événement inclut un champ action pour indiquer le type d’action qui a déclenché l’événement. Dans cet exemple, la valeur de action serait opened puisque l’événement a été déclenché parce qu’une demande de tirage a été ouverte.

Si votre application s’exécute sur un serveur qui écoute ces événements de webhook, elle peut effectuer une action lorsqu’elle reçoit un événement de webhook. Par exemple, votre application peut utiliser l’API GitHub pour publier un commentaire dans la demande de tirage lorsqu’elle reçoit un événement de webhook de demande de tirage.

Pour plus d’informations, consultez « Utilisation de webhooks avec des applications GitHub ». Pour plus d’informations sur les actions et événements de webhook possibles, consultez « Événements et charges utiles du webhook ».

Prérequis

Ce tutoriel nécessite que votre ordinateur ou codespace exécute Node.js version 20 ou ultérieure et npm version 6.12.0 ou ultérieure. Pour plus d’informations, consultez Node.js.

Ce tutoriel part du principe que vous avez une compréhension de base de la syntaxe JavaScript et ES6.

Programme d’installation

Les sections suivantes vous guident tout au long de la configuration des composants suivants :

• un référentiel pour stocker le code de votre application
• un moyen de recevoir des webhooks localement
• Une inscription d’GitHub App qui est abonnée aux événements de webhook « demande de tirage (pull request) », a l’autorisation d’ajouter des commentaires aux demandes de tirage et utilise une URL de webhook que vous pouvez recevoir localement

Créer un référentiel pour stocker le code de votre application

1. Créez un référentiel pour stocker le code de votre application. Pour plus d’informations, consultez « Création d’un dépôt ».
2. Clonez votre référentiel à partir de l’étape précédente. Pour plus d’informations, consultez « Clonage d’un dépôt ». Vous pouvez utiliser un clone local ou GitHub Codespaces.
3. Dans un terminal, accédez au répertoire dans lequel votre clone est stocké.
4. Si le répertoire n’inclut pas encore de fichier .gitignore, ajoutez un fichier .gitignore. Vous ajouterez du contenu à ce fichier ultérieurement. Pour plus d’informations sur les fichiers .gitignore, consultez « Ignorer des fichiers ».

Vous ajouterez plus de code à ce référentiel dans les étapes ultérieures.

Obtenir une URL de proxy webhook

Pour développer votre application localement, vous pouvez utiliser une URL de proxy webhook pour transférer des webhooks à partir de GitHub vers votre ordinateur ou codespace. Ce tutoriel utilise Smee.io pour fournir une URL de proxy webhook et transférer des webhooks.

1. Dans votre navigateur, accédez à https://smee.io/.
2. Cliquez sur Démarrer un nouveau canal.
3. Copiez l’URL complète sous « URL du proxy webhook ». Vous utiliserez cette adresse ultérieurement.

Inscrire une GitHub App

Pour ce tutoriel, vous devez disposer d’une inscription d’GitHub App qui :

• a des webhooks actifs
• utilise une URL de webhook que vous pouvez recevoir localement
• dispose de l’autorisation de référentiel « Demande de tirage (pull request) »
• s’abonne à l’événement de webhook « Demande de tirage (pull request) »

Les étapes suivantes vous guident tout au long de l’inscription d’une GitHub App avec ces paramètres. Pour plus d’informations sur les GitHub App, consultez « Inscription d’une application GitHub ».

1. Dans le coin supérieur droit de n’importe quelle page sur GitHub, cliquez sur votre photo de profil.
2. Accédez aux paramètres de votre compte.
   • Pour une application appartenant à un compte personnel, cliquez sur Paramètres.
   • Pour une application appartenant à une organisation :
     1. Cliquez sur Vos organisations.
     2. À droite de l’organisation, cliquez sur Paramètres.
3. Dans la barre latérale gauche, cliquez sur Paramètres de développeur.
4. Dans la barre latérale à gauche, cliquez sur GitHub Apps .
5. Cliquez sur Nouvelle application GitHub.
6. Sous « Nom de l’application GitHub », entrez un nom pour votre application. Par exemple, USERNAME-webhook-test-app où USERNAME est votre nom d'utilisateur GitHub.
7. Sous « URL de la page d’accueil », entrez une URL pour votre application. Par exemple, vous pouvez utiliser l’URL du référentiel que vous avez créé pour stocker le code de votre application.
8. Ignorez les sections « Identification et autorisation des utilisateurs » et « Après installation » pour ce tutoriel. Pour plus d’informations sur ces paramètres, consultez « Inscription d’une application GitHub ».
9. Assurez-vous que Actif est sélectionné sous « Webhooks ».
10. Sous « URL de webhook », entrez l’URL de votre proxy webhook à partir d’une version antérieure. Pour plus d’informations, consultez « Obtenir une URL de proxy webhook ».
11. Sous « Webhook secret », entrez une chaîne aléatoire. Vous utiliserez cette chaîne plus tard.
12. Sous « Autorisations du référentiel », en regard de « Demandes de tirage », sélectionnez Lire et écrire.
13. Sous « S’abonner aux événements », sélectionnez Demande de tirage.
14. Sous « Où cette application GitHub peut-elle être installée ? », sélectionnez Uniquement sur ce compte. Vous pouvez le modifier cela ultérieurement si vous souhaitez publier votre application.
15. Cliquez sur Créer une application GitHub.

Écrire du code pour votre application

Les sections suivantes vous guident tout au long de l’écriture du code pour que votre application réponde aux événements de webhook.

Installer des dépendances

Ce tutoriel utilise le module octokit de GitHub pour gérer les événements de webhook et effectuer des demandes d’API. Pour plus d’informations sur Octokit.js, consultez « Écriture de scripts avec l’API REST et JavaScript » et le fichier README d’Octokit.js.

Ce tutoriel utilise le module dotenv pour lire des informations sur votre application à partir d’un fichier .env. Pour plus d’informations, consultez dotenv.

Ce tutoriel utilise Smee.io pour transférer des webhooks de GitHub vers votre serveur local. Pour plus d’informations, consultez smee-client.

1. Dans un terminal, accédez au répertoire dans lequel votre clone est stocké.
2. Exécutez npm init --yes pour créer un fichier package.json à l’aide des valeurs par défaut npm.
3. Exécutez npm install octokit.
4. Exécutez npm install dotenv.
5. Exécutez npm install smee-client --save-dev. Étant donné que vous n’utiliserez Smee.io que pour transférer des webhooks pendant le développement de votre application, il s’agit d’une dépendance de développement.
6. Ajoutez node_modules à votre fichier .gitignore.

Stocker les informations d’identification et les informations de connexion de votre application

Ce tutoriel vous montre comment stocker les informations d’identification de votre application et identifier les informations en tant que variables d’environnement dans un fichier .env. Quand vous déployez votre application, vous voudrez modifier la façon dont vous stockez les informations d'identification. Pour plus d’informations, consultez « Déployer votre application ».

Assurez-vous que vous êtes sur un ordinateur sécurisé avant d’effectuer ces étapes, car vous allez stocker vos informations d’identification localement.

1. Dans votre terminal, accédez au répertoire dans lequel votre clone est stocké.

2. Créez un fichier appelé .env au niveau supérieur de ce répertoire.

3. Ajoutez .env à votre fichier .gitignore. Cette action vous empêche de valider accidentellement les informations d'identification de votre application.

4. Ajoutez le contenu suivant à votre fichier .env. Remplacez YOUR_HOSTNAME par le nom de votre instance GitHub Enterprise Server. Vous mettrez à jour les autres valeurs ultérieurement.

   Text

   APP_ID="YOUR_APP_ID"
   WEBHOOK_SECRET="YOUR_WEBHOOK_SECRET"
   PRIVATE_KEY_PATH="YOUR_PRIVATE_KEY_PATH"
   ENTERPRISE_HOSTNAME="YOUR_HOSTNAME"
   

5. Accédez à la page Paramètres de votre application :

   1. Dans le coin supérieur droit de n’importe quelle page sur GitHub, cliquez sur votre photo de profil.

   2. Accédez aux paramètres de votre compte.

      • Pour une application appartenant à un compte personnel, cliquez sur Paramètres.
      • Pour une application appartenant à une organisation :
        1. Cliquez sur Vos organisations.
        2. À droite de l’organisation, cliquez sur Paramètres.

   3. Dans la barre latérale gauche, cliquez sur Paramètres de développeur.

   4. Dans la barre latérale à gauche, cliquez sur GitHub Apps .

   5. En regard du nom de votre application, cliquez sur Modifier.

6. Dans la page des paramètres de votre application, en regard de « ID d’application », recherchez l’ID d’application de votre application.

7. Dans votre fichier, .env remplacez YOUR_APP_ID par l’ID d’application de votre application.

8. Dans la page des paramètres de votre application, sous « Clés privées », cliquez sur Générer une clé privée. Une clé privée au format PEM est téléchargée sur votre ordinateur. Pour plus d’informations, consultez « Gestion des clés privées pour les applications GitHub ».

9. Si vous utilisez un codespace, déplacez le fichier PEM téléchargé dans votre codespace afin que votre codespace puisse accéder au fichier.

10. Dans votre fichier .env, remplacez YOUR_PRIVATE_KEY_PATH le chemin complet de votre clé privée, y compris l’extension .pem.

11. Dans votre fichier .env, remplacez YOUR_WEBHOOK_SECRET par le secret webhook de votre application. Si vous avez oublié votre secret webhook, sous « Secret webhook (facultatif) », cliquez sur Modifier le secret. Entrez un nouveau secret, puis cliquez sur Enregistrer les modifications.

Ajouter du code pour répondre aux événements de webhook

Au niveau supérieur de ce répertoire où votre clone est stocké, créez un fichier JavaScript qui doit contenir le code de votre application. Dans ce tutoriel, le fichier est nommé app.js.

Ajoutez le code suivant à app.js. Le code inclut des annotations qui expliquent chaque partie.

// These are the dependencies for this file.
//
// You installed the `dotenv` and `octokit` modules earlier. The `@octokit/webhooks` is a dependency of the `octokit` module, so you don't need to install it separately. The `fs` and `http` dependencies are built-in Node.js modules.
import dotenv from "dotenv";
import {App, Octokit} from "octokit";
import {createNodeMiddleware} from "@octokit/webhooks";
import fs from "fs";
import http from "http";

// This reads your `.env` file and adds the variables from that file to the `process.env` object in Node.js.
dotenv.config();

// This assigns the values of your environment variables to local variables.
const appId = process.env.APP_ID;
const webhookSecret = process.env.WEBHOOK_SECRET;
const privateKeyPath = process.env.PRIVATE_KEY_PATH;
const enterpriseHostname = process.env.ENTERPRISE_HOSTNAME;

// This reads the contents of your private key file.
const privateKey = fs.readFileSync(privateKeyPath, "utf8");

// This creates a new instance of the Octokit App class.
const app = new App({
  appId: appId,
  privateKey: privateKey,
  webhooks: {
    secret: webhookSecret
  },
  Octokit: Octokit.defaults({
    baseUrl: `https://${enterpriseHostname}/api/v3`,
  }),
});

// This defines the message that your app will post to pull requests.
const messageForNewPRs = "Thanks for opening a new PR! Please follow our contributing guidelines to make your PR easier to review.";

// This adds an event handler that your code will call later. When this event handler is called, it will log the event to the console. Then, it will use GitHub's REST API to add a comment to the pull request that triggered the event.
async function handlePullRequestOpened({octokit, payload}) {
  console.log(`Received a pull request event for #${payload.pull_request.number}`);

  try {
    await octokit.request("POST /repos/{owner}/{repo}/issues/{issue_number}/comments", {
      owner: payload.repository.owner.login,
      repo: payload.repository.name,
      issue_number: payload.pull_request.number,
      body: messageForNewPRs,
    });
  } catch (error) {
    if (error.response) {
      console.error(`Error! Status: ${error.response.status}. Message: ${error.response.data.message}`)
    }
    console.error(error)
  }
};

// This sets up a webhook event listener. When your app receives a webhook event from GitHub with a `X-GitHub-Event` header value of `pull_request` and an `action` payload value of `opened`, it calls the `handlePullRequestOpened` event handler that is defined above.
app.webhooks.on("pull_request.opened", handlePullRequestOpened);

// This logs any errors that occur.
app.webhooks.onError((error) => {
  if (error.name === "AggregateError") {
    console.error(`Error processing request: ${error.event}`);
  } else {
    console.error(error);
  }
});

// This determines where your server will listen.
//
// For local development, your server will listen to port 3000 on `localhost`. When you deploy your app, you will change these values. For more information, see "[Deploy your app](#deploy-your-app)."
const port = 3000;
const host = 'localhost';
const path = "/api/webhook";
const localWebhookUrl = `http://${host}:${port}${path}`;

// This sets up a middleware function to handle incoming webhook events.
//
// Octokit's `createNodeMiddleware` function takes care of generating this middleware function for you. The resulting middleware function will:
//
//    - Check the signature of the incoming webhook event to make sure that it matches your webhook secret. This verifies that the incoming webhook event is a valid GitHub event.
//    - Parse the webhook event payload and identify the type of event.
//    - Trigger the corresponding webhook event handler.
const middleware = createNodeMiddleware(app.webhooks, {path});

// This creates a Node.js server that listens for incoming HTTP requests (including webhook payloads from GitHub) on the specified port. When the server receives a request, it executes the `middleware` function that you defined earlier. Once the server is running, it logs messages to the console to indicate that it is listening.
http.createServer(middleware).listen(port, () => {
  console.log(`Server is listening for events at: ${localWebhookUrl}`);
  console.log('Press Ctrl + C to quit.')
});

import dotenv from "dotenv";
import {App, Octokit} from "octokit";
import {createNodeMiddleware} from "@octokit/webhooks";
import fs from "fs";
import http from "http";

dotenv.config();

const appId = process.env.APP_ID;
const webhookSecret = process.env.WEBHOOK_SECRET;
const privateKeyPath = process.env.PRIVATE_KEY_PATH;
const enterpriseHostname = process.env.ENTERPRISE_HOSTNAME;

const privateKey = fs.readFileSync(privateKeyPath, "utf8");

const app = new App({
  appId: appId,
  privateKey: privateKey,
  webhooks: {
    secret: webhookSecret
  },
  Octokit: Octokit.defaults({
    baseUrl: `https://${enterpriseHostname}/api/v3`,
  }),
});

const messageForNewPRs = "Thanks for opening a new PR! Please follow our contributing guidelines to make your PR easier to review.";

async function handlePullRequestOpened({octokit, payload}) {
  console.log(`Received a pull request event for #${payload.pull_request.number}`);
  try {
    await octokit.request("POST /repos/{owner}/{repo}/issues/{issue_number}/comments", {
      owner: payload.repository.owner.login,
      repo: payload.repository.name,
      issue_number: payload.pull_request.number,
      body: messageForNewPRs,
    });
  } catch (error) {
    if (error.response) {
      console.error(`Error! Status: ${error.response.status}. Message: ${error.response.data.message}`)
    }
    console.error(error)
  }
};

app.webhooks.on("pull_request.opened", handlePullRequestOpened);

app.webhooks.onError((error) => {
  if (error.name === "AggregateError") {
    console.error(`Error processing request: ${error.event}`);
  } else {
    console.error(error);
  }
});

const port = 3000;
const host = 'localhost';
const path = "/api/webhook";
const localWebhookUrl = `http://${host}:${port}${path}`;

const middleware = createNodeMiddleware(app.webhooks, {path});

http.createServer(middleware).listen(port, () => {
  console.log(`Server is listening for events at: ${localWebhookUrl}`);
  console.log('Press Ctrl + C to quit.')
});

// These are the dependencies for this file.
//
// You installed the `dotenv` and `octokit` modules earlier. The `@octokit/webhooks` is a dependency of the `octokit` module, so you don't need to install it separately. The `fs` and `http` dependencies are built-in Node.js modules.
import dotenv from "dotenv";
import {App, Octokit} from "octokit";
import {createNodeMiddleware} from "@octokit/webhooks";
import fs from "fs";
import http from "http";

// This reads your `.env` file and adds the variables from that file to the `process.env` object in Node.js.
dotenv.config();

// This assigns the values of your environment variables to local variables.
const appId = process.env.APP_ID;
const webhookSecret = process.env.WEBHOOK_SECRET;
const privateKeyPath = process.env.PRIVATE_KEY_PATH;
const enterpriseHostname = process.env.ENTERPRISE_HOSTNAME;

// This reads the contents of your private key file.
const privateKey = fs.readFileSync(privateKeyPath, "utf8");

// This creates a new instance of the Octokit App class.
const app = new App({
  appId: appId,
  privateKey: privateKey,
  webhooks: {
    secret: webhookSecret
  },
  Octokit: Octokit.defaults({
    baseUrl: `https://${enterpriseHostname}/api/v3`,
  }),
});

// This defines the message that your app will post to pull requests.
const messageForNewPRs = "Thanks for opening a new PR! Please follow our contributing guidelines to make your PR easier to review.";

// This adds an event handler that your code will call later. When this event handler is called, it will log the event to the console. Then, it will use GitHub's REST API to add a comment to the pull request that triggered the event.
async function handlePullRequestOpened({octokit, payload}) {
  console.log(`Received a pull request event for #${payload.pull_request.number}`);

  try {
    await octokit.request("POST /repos/{owner}/{repo}/issues/{issue_number}/comments", {
      owner: payload.repository.owner.login,
      repo: payload.repository.name,
      issue_number: payload.pull_request.number,
      body: messageForNewPRs,
    });
  } catch (error) {
    if (error.response) {
      console.error(`Error! Status: ${error.response.status}. Message: ${error.response.data.message}`)
    }
    console.error(error)
  }
};

// This sets up a webhook event listener. When your app receives a webhook event from GitHub with a `X-GitHub-Event` header value of `pull_request` and an `action` payload value of `opened`, it calls the `handlePullRequestOpened` event handler that is defined above.
app.webhooks.on("pull_request.opened", handlePullRequestOpened);

// This logs any errors that occur.
app.webhooks.onError((error) => {
  if (error.name === "AggregateError") {
    console.error(`Error processing request: ${error.event}`);
  } else {
    console.error(error);
  }
});

// This determines where your server will listen.
//
// For local development, your server will listen to port 3000 on `localhost`. When you deploy your app, you will change these values. For more information, see "[Deploy your app](#deploy-your-app)."
const port = 3000;
const host = 'localhost';
const path = "/api/webhook";
const localWebhookUrl = `http://${host}:${port}${path}`;

// This sets up a middleware function to handle incoming webhook events.
//
// Octokit's `createNodeMiddleware` function takes care of generating this middleware function for you. The resulting middleware function will:
//
//    - Check the signature of the incoming webhook event to make sure that it matches your webhook secret. This verifies that the incoming webhook event is a valid GitHub event.
//    - Parse the webhook event payload and identify the type of event.
//    - Trigger the corresponding webhook event handler.
const middleware = createNodeMiddleware(app.webhooks, {path});

// This creates a Node.js server that listens for incoming HTTP requests (including webhook payloads from GitHub) on the specified port. When the server receives a request, it executes the `middleware` function that you defined earlier. Once the server is running, it logs messages to the console to indicate that it is listening.
http.createServer(middleware).listen(port, () => {
  console.log(`Server is listening for events at: ${localWebhookUrl}`);
  console.log('Press Ctrl + C to quit.')
});

Ajouter un script pour exécuter le code de votre application

1. À l’objet scripts dans votre fichier package.json, ajoutez un script appelé server qui exécute node app.js. Par exemple :

   JSON

   "scripts": {
     "server": "node app.js"
   }
   

   Si vous avez attribué au fichier qui contient le code de votre application un nom différent de app.js, remplacez app.js par le chemin d’accès relatif au fichier qui contient le code de votre application.

2. Dans votre fichier package.json, ajoutez une clé type de niveau supérieur avec la valeur module. Par exemple :

      {
       // rest of the JSON object,
       "version": "1.0.0",
       "description": "",
       "type": "module",
       // rest of the JSON object,
     }
   

Votre fichier package.json doit ressembler à ce qui suit. La valeur name et les numéros de version sous dependencies et devDependencies peuvent différer pour vous.

  {
  "name": "github-app-webhook-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "server": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "octokit": "^2.0.14"
  },
  "devDependencies": {
    "smee-client": "^1.2.3"
  }
}

Test

Suivez ces étapes pour tester l’application que vous avez créée ci-dessus.

Installer votre application

Pour que votre application laisse un commentaire sur les demandes de tirage dans un référentiel, elle doit être installée sur le compte propriétaire du référentiel et lui accorder l’accès. Étant donné que votre application est privée, elle ne peut être installée que sur le compte propriétaire de l’application.

1. Dans le compte propriétaire de l’application que vous avez créée, créez un nouveau référentiel sur lequel installer l’application. Pour plus d’informations, consultez « Création d’un dépôt ».

2. Accédez à la page Paramètres de votre application :

   1. Dans le coin supérieur droit de n’importe quelle page sur GitHub, cliquez sur votre photo de profil.

   2. Accédez aux paramètres de votre compte.

      • Pour une application appartenant à un compte personnel, cliquez sur Paramètres.
      • Pour une application appartenant à une organisation :
        1. Cliquez sur Vos organisations.
        2. À droite de l’organisation, cliquez sur Paramètres.

   3. Dans la barre latérale gauche, cliquez sur Paramètres de développeur.

   4. Dans la barre latérale à gauche, cliquez sur GitHub Apps .

   5. En regard du nom de votre application, cliquez sur Modifier.

3. Cliquez sur Page publique.

4. Cliquez sur Installer.

5. Sélectionner Ne sélectionner que les référentiels.

6. Sélectionnez le menu déroulant Sélectionner les référentiels , puis cliquez sur le référentiel que vous avez choisi au début de cette section.

7. Cliquez sur Installer.

Démarrer votre serveur

À des fins de test, vous utiliserez votre ordinateur ou codespace comme serveur. Votre application répond uniquement aux webhooks lorsque votre serveur est en cours d’exécution.

1. Dans un terminal, accédez au répertoire dans lequel le code de votre application est stocké.

2. Pour recevoir des webhooks transférés à partir de Smee.io, exécutez npx smee -u WEBHOOK_PROXY_URL -t http://localhost:3000/api/webhook. Remplacez WEBHOOK_PROXY_URL par l’URL de proxy de votre webhook précédent. Si vous avez oublié votre URL, vous pouvez la trouver dans le champ « URL du webhook » de la page des paramètres de votre application.

   Une sortie de ce type doit s’afficher, où WEBHOOK_PROXY_URL est l’URL de votre proxy webhook :

   Forwarding WEBHOOK_PROXY_URL to http://localhost:3000/api/webhook
   Connected WEBHOOK_PROXY_URL
   

3. Dans une deuxième fenêtre du terminal, accédez au répertoire dans lequel le code de votre application est stocké.

4. Exécuter npm run server. Votre terminal doit indiquer Server is listening for events at: http://localhost:3000/api/webhook.

Test de l'application

Maintenant que votre serveur exécute et reçoit des événements de webhooks transférés, testez votre application en ouvrant une demande de tirage sur le référentiel que vous avez sélectionné lorsque vous avez installé votre application.

1. Ouvrez une demande de tirage sur le référentiel que vous avez sélectionné lors de l’installation de votre application. Pour plus d’informations, consultez « Création d’une demande de tirage ».

   Veillez à utiliser le référentiel que vous avez sélectionné lors de l’installation de votre application et non le référentiel où le code de votre application est stocké. Pour plus d’informations, consultez « Installer votre application ».

2. Accédez à l’URL du proxy de votre webhook sur smee.io. Un événement pull_request devrait apparaître. Cela indique que GitHub a correctement envoyé un événement de demande de tirage lorsque vous avez créé une demande de tirage.

3. Dans le terminal où vous avez exécuté npm run server, vous devez voir quelque chose comme « Reçu un événement de demande de tirage pour #1 » où l’entier après le # est le numéro de la demande de tirage que vous avez ouverte.

4. Dans la chronologie de votre demande de tirage, vous devez voir un commentaire de votre application.

5. Dans les deux fenêtres du terminal, entrez Ctrl+C pour arrêter votre serveur et arrêter d’écouter les webhooks transférés.

Étapes suivantes

Maintenant que vous disposez d’une application qui répond aux événements de webhook, vous pouvez développer le code de votre application, déployer votre application et rendre votre application publique.

Modifier le code de l’application

Ce tutoriel a montré comment publier un commentaire sur une demande de tirage lors de l’ouverture d’une demande de tirage. Vous pouvez mettre à jour le code pour répondre à différents types d’événements de webhook ou pour faire quelque chose de différent en réponse à l’événement wde ebhook.

N’oubliez pas de mettre à jour les autorisations de votre application si des autorisations supplémentaires sont nécessaires pour les demandes d’API que vous souhaitez effectuer ou les événements de webhook que vous souhaitez recevoir. Pour plus d’informations, consultez « Choix des autorisations pour une application GitHub ».

Ce tutoriel a stocké tout le code dans un fichier unique, mais vous pouvez déplacer des fonctions et des composants dans des fichiers distincts.

Déployer votre application

Ce tutoriel a montré comment développer votre application localement. Lorsque vous êtes prêt à déployer votre application, vous devez apporter des modifications pour servir votre application et sécuriser les informations d’identification de votre application. Les étapes que vous effectuez dépendent du serveur que vous utilisez, mais les sections suivantes offrent des conseils généraux.

Héberger votre application sur un serveur

Ce tutoriel a utilisé votre ordinateur ou codespace comme serveur. Une fois que l’application est prête pour être utilisée en production, vous devez déployer votre application sur un serveur dédié. Par exemple, vous pouvez utiliser Azure App Service.

Mettre à jour l’URL du webhook

Une fois que vous disposez d’un serveur configuré pour recevoir le trafic webhook à partir de GitHub, mettez à jour l’URL du webhook dans les paramètres de votre application. Vous ne devez pas utiliser Smee.io pour transférer vos webhooks en production.

Mettre à jour les constantes port et host

Lorsque vous déployez votre application, vous souhaitez modifier l’hôte et le port d’écoute de votre serveur.

Par exemple, vous pouvez définir une variable d’environnement PORT sur votre serveur pour indiquer le port d’écoute probable de votre serveur. Vous pouvez définir une variable d’environnement NODE_ENV sur votre serveur sur production. Ensuite, vous pouvez mettre à jour l’emplacement où votre code définit les constantes port et host afin que votre serveur écoute toutes les interfaces réseau disponibles (0.0.0.0) au lieu de l’interface réseau locale (localhost) sur votre port de déploiement :

const port = process.env.PORT || 3000;
const host = process.env.NODE_ENV === 'production' ? '0.0.0.0' : 'localhost';

const port = process.env.PORT || 3000;
const host = process.env.NODE_ENV === 'production' ? '0.0.0.0' : 'localhost';

Sécuriser les informations d’identification de votre application

Vous ne devez jamais rendre public la clé privée ou le secret du webhook de votre application. Ce tutoriel a stocké les informations d’identification de votre application dans un fichier gitignored .env. Quand vous déployez votre application, choisissez un moyen sécurisé de stocker les informations d'identification et de mettre à jour votre code pour obtenir la valeur en conséquence. Par exemple, vous pouvez stocker les informations d’identification avec un service de gestion des secrets comme Azure Key Vault. Lorsque votre application s’exécute, elle peut récupérer les informations d’identification et les stocker dans des variables d’environnement sur le serveur sur lequel votre application est déployée.

Pour plus d’informations, consultez « Meilleures pratiques pour la création d’une application GitHub ».

Partager vos données

Si vous souhaitez partager votre application avec d’autres utilisateurs et organisations, rendez-la publique. Pour plus d’informations, consultez « Rendre une application GitHub publique ou privée ».

Suivre les bonnes pratiques

Vous devez vous efforcer de suivre les bonnes pratiques avec votre GitHub App. Pour plus d’informations, consultez « Meilleures pratiques pour la création d’une application GitHub ».