PRをApproveしたら愛猫のLGTM画像が投稿されるGitHub Appを作った

1. GitHub上でPRをApprove
   ↓
2. GitHubがWebhookを送信（HTTPリクエスト）
   ↓
3. Next.js APIがWebhookを受信
   ↓
4. 署名検証（本当にGitHubからか？）
   ↓
5. イベントハンドラー起動
   ↓
6. Contentful APIからランダムに画像を取得
   ↓
7. GitHub APIでPRにコメント投稿

pnpm add @octokit/app @octokit/webhooks @octokit/rest
pnpm add -D @octokit/webhooks-types

import { App } from "@octokit/app";
 
if (!process.env.GITHUB_APP_ID) {
  throw new Error("GITHUB_APP_ID is not set");
}
 
if (!process.env.GITHUB_APP_PRIVATE_KEY) {
  throw new Error("GITHUB_APP_PRIVATE_KEY is not set");
}
 
// GitHub App instance
export const app = new App({
  appId: process.env.GITHUB_APP_ID,
  privateKey: process.env.GITHUB_APP_PRIVATE_KEY.replace(/\\n/g, "\n"),
});
 
/**
 * Get Octokit instance for a specific installation
 */
export async function getOctokitForInstallation(installationId: number) {
  return await app.getInstallationOctokit(installationId);
}

import {
  AssetCollectionApiDocument,
  type AssetCollectionApiQuery,
} from "@/generated/schema";
import { apolloClient } from "@/lib/apolloClient";
 
export async function getRandomLgtmImage(): Promise<string | null> {
  try {
    const res = await apolloClient.query<AssetCollectionApiQuery>({
      query: AssetCollectionApiDocument,
      fetchPolicy: "no-cache",
    });
 
    const items = res.data.assetCollection?.items ?? [];
 
    if (items.length === 0) {
      return null;
    }
 
    // ランダムに1枚選択
    const randomIndex = Math.floor(Math.random() * items.length);
    const randomItem = items[randomIndex];
 
    return randomItem?.url ?? null;
  } catch (error) {
    console.error("Failed to fetch random LGTM image:", error);
    return null;
  }
}

import { getOctokitForInstallation } from "./app";
 
export interface CommentParams {
  installationId: number;
  owner: string;
  repo: string;
  issueNumber: number;
  imageUrl: string;
}
 
export async function postLgtmComment({
  installationId,
  owner,
  repo,
  issueNumber,
  imageUrl,
}: CommentParams): Promise<void> {
  try {
    const octokit = await getOctokitForInstallation(installationId);
 
    // Markdownで画像を埋め込み
    await octokit.request(
      "POST /repos/{owner}/{repo}/issues/{issue_number}/comments",
      {
        owner,
        repo,
        issue_number: issueNumber,
        body: `![LGTM](${imageUrl})`,
      }
    );
 
    console.log(
      `Successfully posted LGTM comment to ${owner}/${repo}#${issueNumber}`
    );
  } catch (error) {
    console.error("Failed to post LGTM comment:", error);
    throw error;
  }
}

import type { PullRequestReviewEvent } from "@octokit/webhooks-types";
import { getRandomLgtmImage } from "../queries/randomImage";
import { postLgtmComment } from "./comments";
 
export async function handlePullRequestReview(
  payload: PullRequestReviewEvent
): Promise<void> {
  // Approveされた時のみ処理
  if (payload.action !== "submitted" || payload.review.state !== "approved") {
    console.log(
      `Skipping non-approved review: action=${payload.action}, state=${payload.review.state}`
    );
    return;
  }
 
  console.log(
    `Processing approved review from ${payload.review.user.login} on PR #${payload.pull_request.number}`
  );
 
  try {
    // ランダムにLGTM画像を取得
    const imageUrl = await getRandomLgtmImage();
 
    if (!imageUrl) {
      console.error("No LGTM images available");
      return;
    }
 
    // PRにコメント投稿
    await postLgtmComment({
      installationId: payload.installation?.id ?? 0,
      owner: payload.repository.owner.login,
      repo: payload.repository.name,
      issueNumber: payload.pull_request.number,
      imageUrl,
    });
 
    console.log(
      `Successfully posted LGTM image to ${payload.repository.full_name}#${payload.pull_request.number}`
    );
  } catch (error) {
    console.error("Failed to handle pull request review:", error);
    throw error;
  }
}

import { Webhooks } from "@octokit/webhooks";
import type { PullRequestReviewEvent } from "@octokit/webhooks-types";
import { NextResponse } from "next/server";
import { handlePullRequestReview } from "@/lib/github/webhooks";
 
if (!process.env.GITHUB_WEBHOOK_SECRET) {
  throw new Error("GITHUB_WEBHOOK_SECRET is not set");
}
 
const webhooks = new Webhooks({
  secret: process.env.GITHUB_WEBHOOK_SECRET,
});
 
// イベントハンドラーを登録
webhooks.on("pull_request_review", async ({ payload }) => {
  await handlePullRequestReview(payload as PullRequestReviewEvent);
});
 
export async function POST(request: Request) {
  try {
    // Webhookヘッダーから情報を取得
    const signature = request.headers.get("x-hub-signature-256");
    const id = request.headers.get("x-github-delivery");
    const event = request.headers.get("x-github-event");
 
    if (!signature || !id || !event) {
      console.error("Missing required webhook headers");
      return NextResponse.json(
        { error: "Missing required headers" },
        { status: 400 }
      );
    }
 
    const body = await request.text();
 
    // 署名検証とハンドラー実行
    await webhooks.verifyAndReceive({
      id,
      name: event as any,
      signature,
      payload: body,
    });
 
    return NextResponse.json({ success: true });
  } catch (error) {
    console.error("Webhook processing error:", error);
 
    if (error instanceof Error && error.message.includes("signature")) {
      return NextResponse.json(
        { error: "Invalid signature" },
        { status: 401 }
      );
    }
 
    return NextResponse.json(
      { error: "Internal server error" },
      { status: 500 }
    );
  }
}