Erstellen einer GitHub-App, die auf Webhookereignisse reagiert

Einführung

In diesem Tutorial wird veranschaulicht, wie du Code schreibst, um eine GitHub App zu erstellen, die als Reaktion auf ein Webhookereignis eine API-Anforderung sendet. Insbesondere wenn ein Pull Request in einem Repository geöffnet wird, auf das der App Zugriff gewährt wurde, empfängt die App ein Pull Request-Webhookereignis. Anschließend verwendet die App die API von GitHub, um dem Pull Request einen Kommentar hinzuzufügen.

In diesem Tutorial verwendest du deinen Computer oder Codespace als Server, während du deine App entwickelst. Sobald die App für die Verwendung in der Produktion bereit ist, solltest du deine App auf einem dedizierten Server bereitstellen.

In diesem Tutorial wird JavaScript verwendet, du kannst jedoch jede Programmiersprache verwenden, die du auf deinem Server ausführen kannst.

Informationen zu Webhooks

Wenn du eine GitHub App registrierst, kannst du eine Webhook-URL angeben und Webhookereignisse abonnieren. Wenn die Aktivität auf GitHub ein Ereignis auslöst, das deine App abonniert hat, sendet GitHub ein Webhookereignis an die Webhook-URL deiner App.

Du kannst beispielsweise deine GitHub App abonnieren, um das Pull Request-Webhookereignis zu empfangen. Wenn ein Pull Request in einem Repository geöffnet wird, auf das der App Zugriff gewährt wurde, sendet GitHub ein Pull Request-Webhookereignis an die Webhook-URL deiner App. Wenn mehrere Aktionen das Ereignis auslösen können, enthält die Ereignisnutzlast ein action-Feld, das angibt, welche Art von Aktion das Ereignis ausgelöst hat. In diesem Beispiel wäre action der Wert von opened, da das Ereignis ausgelöst wurde, weil ein Pull Request geöffnet wurde.

Wenn deine App auf einem Server ausgeführt wird, der auf diese Webhookereignisse lauscht, kann deine App eine Aktion ausführen, wenn sie ein Webhookereignis empfängt. Beispielsweise kann deine App die GitHub-API verwenden, um einen Kommentar an den Pull Request zu senden, wenn sie ein Pull Request-Webhookereignis empfängt.

Weitere Informationen findest du unter Verwenden von Webhooks mit GitHub-Apps. Informationen zu möglichen Webhookereignissen und -aktionen findest du unter Webhook-Ereignisse und -Nutzlasten.

Voraussetzungen

In diesem Tutorial muss dein Computer oder Codespace Node.js Version 20 oder höher und npm Version 6.12.0 oder höher ausführen. Weitere Informationen findest du unter Node.js.

In diesem Tutorial wird vorausgesetzt, dass du über grundlegende Kenntnisse der JavaScript- und ES6-Syntax verfügst.

Einrichten

Die folgenden Abschnitte führen dich durch die Einrichtung der folgenden Komponenten:

• ein Repository zum Speichern des Codes für deine App
• eine Möglichkeit zum lokalen Empfang von Webhooks
• eine GitHub App-Registrierung, die Pull Request-Webhookereignisse abonniert hat, über die Berechtigung zum Hinzufügen von Kommentaren zu Pull Requests verfügt und eine Webhook-URL verwendet, die du lokal empfangen kannst

Erstellen eines Repositorys zum Speichern des Codes für deine App

1. Erstelle ein Repository zum Speichern des Codes für deine App. Weitere Informationen findest du unter Ein neues Repository erstellen.
2. Klone dein Repository aus dem vorherigen Schritt. Weitere Informationen findest du unter Ein Repository klonen. Du kannst einen lokalen Klon oder GitHub Codespaces verwenden.
3. Navigiere in einem Terminal zu dem Verzeichnis, in dem dein Klon gespeichert ist.
4. Wenn das Verzeichnis noch keine .gitignore-Datei enthält, füge eine .gitignore-Datei hinzu. Du fügst dieser Datei später Inhalte hinzu. Weitere Informationen zu .gitignore-Dateien findest du unter Ignorieren von Dateien.

In späteren Schritten fügst du diesem Repository weiteren Code hinzu.

Abrufen einer Webhook-Proxy-URL

Um deine App lokal zu entwickeln, kannst du eine Webhook-Proxy-URL verwenden, um Webhooks von GitHub an deinen Computer oder Codespace weiterzuleiten. In diesem Tutorial wird „Smee.io“ verwendet, um eine Webhook-Proxy-URL bereitzustellen und Webhooks weiterzuleiten.

1. Navigiere im Browser zu https://smee.io/.
2. Klicke auf Neuen Kanal starten.
3. Kopiere die vollständige URL unter „Webhook-Proxy-URL“. Du verwendest diese URL in einem späteren Schritt.

Registrieren einer GitHub App

Für dieses Tutorial benötigst du eine GitHub App-Registrierung mit folgenden Eigenschaften:

• aktive Webhooks
• Verwendung einer Webhook-URL, die du lokal empfangen kannst
• Repositoryberechtigung „Pull Request“
• Abonnement des Webhookereignisses „Pull Request“

Die folgenden Schritte führen dich durch das Registrieren einer GitHub App mit diesen Einstellungen. Weitere Informationen zu GitHub App-Einstellungen findest du unter Registrieren einer GitHub-App.

1. Klicke auf GitHub in der oberen rechten Ecke einer beliebigen Seite auf dein Profilfoto.
2. Navigiere zu den Einstellungen für dein Konto.
   • Klicken Sie bei einer App, die zu einem persönlichen Konto gehört, auf Einstellungen.
   • Für eine App im Besitz einer Organisation:
     1. Klicke auf Deine Organisationen.
     2. Klicke dann rechts neben der Organisation auf Einstellungen.
3. Klicke auf der linken Seitenleiste auf Entwicklereinstellungen.
4. Klicke auf der linken Randleiste auf GitHub Apps .
5. Klicke auf Neue GitHub-App.
6. Gib unter „Name der GitHub-App“ einen Namen für deine App ein. Beispielsweise USERNAME-webhook-test-app, wobei USERNAME dein GitHub-Benutzername ist.
7. Gib unter „Homepage-URL“ eine URL für deine App ein. Du kannst beispielsweise die URL des Repositorys verwenden, das du erstellt hast, um den Code für deine App zu speichern.
8. Überspringe die Abschnitte „Identifizieren und Autorisieren von Benutzern“ und „Nach der Installation“ dieses Tutorials. Weitere Informationen zu diesen Einstellungen findest du unter Registrieren einer GitHub-App.
9. Stelle sicher, dass unter „Webhooks“ die Option Aktiv ausgewählt ist.
10. Gib unter „Webhook-URL“ deine Webhook-Proxy-URL von früher ein. Weitere Informationen findest du unter Abrufen einer Webhook-Proxy-URL.
11. Gib unter „Webhookgeheimnis“ eine zufällige Zeichenfolge ein. Du wirst diese Zeichenfolge später noch verwenden.
12. Wähle unter „Repositoryberechtigungen“ neben „Pull Requests“ die Option Lesen & Schreiben aus.
13. Wähle unter „Ereignisse abonnieren“ die Option Pull Request aus.
14. Wähle unter „Wo kann diese GitHub-App installiert werden?“ die Option Nur in diesem Konto aus. Du kannst dies später ändern, wenn du deine App veröffentlichen möchtest.
15. Klicke auf GitHub-App erstellen.

Schreiben von Code für deine App

Die folgenden Abschnitte führen dich durch das Schreiben von Code, damit deine App auf Webhookereignisse reagiert.

Installieren von Abhängigkeiten

In diesem Tutorial wird das octokit-Modul von GitHub verwendet, um Webhookereignisse zu verarbeiten und API-Anforderungen zu stellen. Weitere Informationen zu Octokit.js findest du unter Skripterstellung mit der REST-API und JavaScript und in der Octokit.js-Infodatei.

In diesem Tutorial wird das dotenv-Modul verwendet, um Informationen zu deiner App aus einer .env-Datei zu lesen. Weitere Informationen findest du unter dotenv.

In diesem Tutorial wird „Smee.io“ verwendet, um Webhooks von GitHub an deinen lokalen Server weiterzuleiten. Weitere Informationen findest du unter smee-client.

1. Navigiere in einem Terminal zu dem Verzeichnis, in dem dein Klon gespeichert ist.
2. Führe npm init --yes aus, um eine package.json-Datei mit den npm-Standardwerten zu erstellen.
3. Führe aus npm install octokit.
4. Führe aus npm install dotenv.
5. Führe aus npm install smee-client --save-dev. Da du während der Entwicklung deiner App nur „Smee.io“ zum Weiterleiten von Webhooks verwendest, ist dies eine Entwicklungsabhängigkeit.
6. Füge der .gitignore-Datei node_modules hinzu.

Speichern der identifizierenden Informationen und Anmeldeinformationen deiner App

In diesem Tutorial erfährst du, wie du die Anmeldeinformationen deiner App und identifizierende Informationen als Umgebungsvariablen in einer .env-Datei speichern kannst. Wenn du deine App bereitstellst, musst du die Art und Weise ändern, in der die Anmeldeinformationen gespeichert werden. Weitere Informationen findest du unter Bereitstellen deiner App.

Stelle sicher, dass du dich auf einem sicheren Computer befindest, bevor du diese Schritte ausführst, da du deine Anmeldeinformationen lokal speicherst.

1. Navigiere in deinem Terminal zu dem Verzeichnis, in dem dein Klon gespeichert ist.

2. Erstelle eine Datei namens .env auf der obersten Ebene dieses Verzeichnisses.

3. Füge der .gitignore-Datei .env hinzu. Dadurch verhinderst du, dass du versehentlich die Anmeldeinformationen deiner App committest.

4. Füge der .env-Datei den folgenden Inhalt hinzu. Ersetze YOUR_HOSTNAME durch den Namen von Ihre GitHub Enterprise Server-Instance. Du aktualisierst die anderen Werte in einem späteren Schritt.

   Text

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

5. Navigiere zur Seite „Einstellungen“ für deine App:

   1. Klicke auf GitHub in der oberen rechten Ecke einer beliebigen Seite auf dein Profilfoto.

   2. Navigiere zu den Einstellungen für dein Konto.

      • Klicken Sie bei einer App, die zu einem persönlichen Konto gehört, auf Einstellungen.
      • Für eine App im Besitz einer Organisation:
        1. Klicke auf Deine Organisationen.
        2. Klicke dann rechts neben der Organisation auf Einstellungen.

   3. Klicke auf der linken Seitenleiste auf Entwicklereinstellungen.

   4. Klicke auf der linken Randleiste auf GitHub Apps .

   5. Klicke neben dem Namen deiner App auf Bearbeiten.

6. Suche auf der Einstellungenseite deiner App neben „App-ID“ die App-ID für deine App.

7. Ersetze in deiner .env-Datei YOUR_APP_ID durch die App-ID deiner App.

8. Klicke auf der Einstellungenseite deiner App unter „Private Schlüssel“ auf Privaten Schlüssel generieren. Es wird ein privater Schlüssel im PEM-Format auf deinen Computer heruntergeladen. Weitere Informationen findest du unter Verwalten privater Schlüssel für GitHub-Apps.

9. Wenn du einen Codespace verwendest, verschiebe die heruntergeladene PEM-Datei in deinen Codespace, damit dein Codespace auf die Datei zugreifen kann.

10. Ersetze in deiner .env-Datei YOUR_PRIVATE_KEY_PATH durch den vollständigen Pfad zu deinem privaten Schlüssel, einschließlich der .pem-Erweiterung.

11. Ersetze in deiner .env-Datei YOUR_WEBHOOK_SECRET durch das Webhookgeheimnis für deine App. Wenn du dein Webhookgeheimnis vergessen hast, klicke unter „Webhookgeheimnis (optional)“ auf Geheimnis ändern. Gib ein neues Geheimnis ein, und klicke dann auf Änderungen speichern.

Hinzufügen von Code zum Reagieren auf Webhookereignisse

Erstelle auf der obersten Ebene des Verzeichnisses, in dem der Klon gespeichert ist, eine JavaScript-Datei, die den Code für deine App enthalten soll. In diesem Tutorial wird die Datei mit app.js benannt.

Füge app.js den folgenden Code hinzu. Der Code enthält Anmerkungen, die die einzelnen Teile erläutern.

// 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,
      headers: {
        "x-github-api-version": "2022-11-28",
      },
    });
  } 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,
      headers: {
        "x-github-api-version": "2022-11-28",
      },
    });
  } 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,
      headers: {
        "x-github-api-version": "2022-11-28",
      },
    });
  } 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.')
});

Hinzufügen eines Skripts zum Ausführen des Codes für deine App

1. Füge dem scripts-Objekt in deiner Datei package.json ein Skript mit dem Namen server hinzu, das node app.js ausführt. Beispiel:

   JSON

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

   Wenn du die Datei, die den Code deiner App enthält, mit einem anderen Namen als app.js versehen hast, ersetze app.js durch den relativen Pfad zu der Datei, die den Code deiner App enthält.

2. Füge in deiner Datei package.json einen Schlüssel der obersten Ebene namens type mit dem Wert module hinzu. Beispiel:

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

Deine package.json-Datei sollte in etwa wie folgt aussehen. Der Wert name und die Versionsnummern unter dependencies und devDependencies können bei dir abweichen.

  {
  "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"
  }
}

Testen

Führe die folgenden Schritte aus, um die App zu testen, die du oben erstellt hast.

Installieren der App

Damit deine App einen Kommentar zu Pull Requests in einem Repository hinterlassen kann, muss sie in dem Konto installiert werden, das das Repository besitzt, und ihr muss Zugriff auf dieses Repository gewährt werden. Da deine App privat ist, kann sie nur auf dem Konto installiert werden, das Besitzer der App ist.

1. Erstelle in dem Konto, das Besitzer der von dir erstellten App ist, ein neues Repository zum Installieren der App. Weitere Informationen findest du unter Ein neues Repository erstellen.

2. Navigiere zur Seite „Einstellungen“ für deine App:

   1. Klicke auf GitHub in der oberen rechten Ecke einer beliebigen Seite auf dein Profilfoto.

   2. Navigiere zu den Einstellungen für dein Konto.

      • Klicken Sie bei einer App, die zu einem persönlichen Konto gehört, auf Einstellungen.
      • Für eine App im Besitz einer Organisation:
        1. Klicke auf Deine Organisationen.
        2. Klicke dann rechts neben der Organisation auf Einstellungen.

   3. Klicke auf der linken Seitenleiste auf Entwicklereinstellungen.

   4. Klicke auf der linken Randleiste auf GitHub Apps .

   5. Klicke neben dem Namen deiner App auf Bearbeiten.

3. Klicke auf Öffentliche Seite.

4. Klicke auf Installieren.

5. Wähle Nur Repositorys auswählen aus.

6. Wähle das Dropdownmenü Repositorys auswählen aus, und klicke auf das Repository, das du am Anfang dieses Abschnitts ausgewählt hast.

7. Klicke auf Installieren.

Starten deines Servers

Zum Testen verwendest du deinen Computer oder Codespace als Server. Deine App reagiert nur auf Webhooks, wenn dein Server ausgeführt wird.

1. Navigiere in einem Terminal zu dem Verzeichnis, in dem der Code deiner App gespeichert ist.

2. Führe npx smee -u WEBHOOK_PROXY_URL -t http://localhost:3000/api/webhook aus, um weitergeleitete Webhooks von „Smee.io“ zu empfangen. Ersetze WEBHOOK_PROXY_URL durch deine Webhook-Proxy-URL von früher. Wenn du deine URL vergessen hast, findest du sie im Feld "Webhook-URL" auf der Einstellungenseite deiner App.

   Ungefähr folgende Ausgabe sollte angezeigt werden. WEBHOOK_PROXY_URL ist dabei deine Webhook-Proxy-URL:

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

3. Navigiere in einem zweiten Terminalfenster zu dem Verzeichnis, in dem der Code deiner App gespeichert ist.

4. npm run server ausführen. Auf deinem Terminal sollte Server is listening for events at: http://localhost:3000/api/webhook angezeigt werden.

Testen deiner App

Da dein Server jetzt ausgeführt wird und weitergeleitete Webhooksereignisse empfängt, teste deine App, indem du einen Pull Request für das Repository öffnest, das du bei der Installation der App ausgewählt hast.

1. Öffne einen Pull Request für das Repository, das du bei der Installation deiner App ausgewählt hast. Weitere Informationen findest du unter Erstellen eines Pull Requests.

   Verwende unbedingt das Repository, das du bei der Installation deiner App ausgewählt hast, und nicht das Repository, in dem der Code deiner App gespeichert ist. Weitere Informationen findest du unter Installieren der App.

2. Navigiere zu deiner Webhook-Proxy-URL auf „smee.io“. Es sollte ein pull_request-Ereignis angezeigt werden. Dies zeigt, dass GitHub beim Erstellen eines Pull Requests erfolgreich ein Pull Request-Ereignis gesendet hat.

3. In dem Terminal, in dem du npm run server ausgeführt hast, sollte Ähnliches wie „Pull Request-Ereignis für #1 empfangen“ angezeigt werden, wobei die ganze Zahl nach # die Nummer des Pull Requests ist, den du geöffnet hast.

4. Auf der Zeitachse deines Pull Requests sollte ein Kommentar deiner App angezeigt werden.

5. Gib in beiden Terminalfenstern STRG+C ein, um den Server zu beenden und nicht mehr auf weitergeleitete Webhooks zu lauschen.

Nächste Schritte

Da du nun über eine App verfügst, die auf Webhookereignisse reagiert, solltest du den Code deiner App erweitern, deine App bereitstellen und sie öffentlich machen.

Ändern des App-Codes

In diesem Tutorial wurde gezeigt, wie du einen Kommentar zu einem Pull Request postest, wenn ein Pull Request geöffnet wurde. Du kannst den Code aktualisieren, um auf verschiedene Arten von Webhookereignissen zu reagieren, oder etwas anderes als Reaktion auf das Webhookereignis zu tun.

Denke daran, die Berechtigungen deiner App zu aktualisieren, wenn deine App zusätzliche Berechtigungen für die API-Anforderungen benötigt, die du erstellen möchtest, oder die Webhookereignisse, die du empfangen möchtest. Weitere Informationen findest du unter Auswählen von Berechtigungen für eine GitHub-App.

In diesem Tutorial wurde der gesamte Code in einer einzelnen Datei gespeichert. Möglicherweise möchtest du jedoch Funktionen und Komponenten auf separate Dateien aufteilen.

Bereitstellen deiner App

In diesem Tutorial wurde gezeigt, wie du deine App lokal entwickelst. Wenn du bereit bist, deine App bereitzustellen, musst du Änderungen vornehmen, um deine App zu bedienen und die Anmeldeinformationen deiner App zu schützen. Welche Schritte du ausführst, hängt vom verwendeten Server ab, aber die folgenden Abschnitte enthalten allgemeine Anleitungen.

Hosten deiner App auf einem Server

In diesem Tutorial wurde dein Computer oder Codespace als Server verwendet. Sobald die App für die Verwendung in der Produktion bereit ist, solltest du deine App auf einem dedizierten Server bereitstellen. Du kannst beispielsweise Azure App Service nutzen.

Aktualisieren der Webhook-URL

Sobald du über einen Server verfügst, der für den Empfang von Webhookdatenverkehr von GitHub eingerichtet ist, aktualisiere die Webhook-URL in deinen App-Einstellungen. Du solltest „Smee.io“ nicht verwenden, um deine Webhooks in der Produktion weiterzuleiten.

Aktualisieren der Konstanten port und host

Wenn du deine App bereitstellst, solltest du den Host und Port ändern, wo dein Server lauscht.

Beispielsweise kannst du eine Umgebungsvariable PORT auf deinem Server festlegen, um den Port anzugeben, an dem dein Server lauschen soll. Du kannst eine Umgebungsvariable NODE_ENV auf deinem Server auf production festlegen. Anschließend kannst du die Stelle aktualisieren, wo dein Code die Konstanten port und host definiert, sodass dein Server auf alle verfügbaren Netzwerkschnittstellen (0.0.0.0) statt auf die lokale Netzwerkschnittstelle (localhost) deines Bereitstellungsports lauscht:

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';

Schützen der Anmeldeinformationen deiner App

Du solltest niemals den privaten Schlüssel deiner App oder das Webhookgeheimnis veröffentlichen. In diesem Tutorial wurden die Anmeldeinformationen deiner App in einer von Git ignorierten .env-Datei gespeichert. Wenn du deine App bereitstellst, solltest du eine sichere Methode zum Speichern der Anmeldeinformationen auswählen und deinen Code aktualisieren, um den Wert entsprechend abzurufen. Du kannst die Anmeldeinformationen beispielsweise mit einem Geheimnisverwaltungsdienst wie Azure Key Vault speichern. Wenn deine App ausgeführt wird, kann sie die Anmeldeinformationen abrufen und in Umgebungsvariablen auf dem Server speichern, auf dem deine App bereitgestellt wird.

Weitere Informationen findest du unter Best Practices beim Erstellen einer GitHub-App.

Freigeben der App

Wenn du deine App für andere Benutzer und Organisationen freigeben möchtest, mache deine App öffentlich. Weitere Informationen findest du unter Öffentlich- oder Privatmachen einer GitHub-App.

Bewährte Methode befolgen

Du solltest Best Practices für deine GitHub App befolgen. Weitere Informationen findest du unter Best Practices beim Erstellen einer GitHub-App.