GitHubをCMSに！NestJSでAPI実装する実践方法【コード付き】

GitHubリポジトリ構成例：

/posts
  ├── 2024-01-15-github-api-guide.md
  ├── 2024-01-20-nestjs-tips.md
  └── 2024-01-25-typescript-tricks.md

GITHUB_OWNER=your-username
GITHUB_REPO=your-repo-name
GITHUB_TARGET_DIRECTORY=/posts
GITHUB_PAT=ghp_xxxxxxxxxxxxxxxxxxxx

import { Controller, Get, Param, HttpException, HttpStatus } from '@nestjs/common';
import { ApiTags, ApiOperation, ApiResponse } from '@nestjs/swagger';

@ApiTags('GitHub CMS')
@Controller('api/github-cms')
export class GitHubCmsController {
  private readonly baseUrl = 'https://api.github.com';
  private readonly githubPat = '取得したPATを埋め込んでね！';
  private readonly githubOwner = 'リポジトリOwnerを入れてね';
  private readonly githubRepo = 'リポジトリ名を入れてね！';
  private readonly githubTargetDirectory = '/posts';

  private async githubRequest(path: string): Promise<any> {
    const response = await fetch(`${this.baseUrl}${path}`, {
      headers: {
        'Authorization': `Bearer ${this.githubPat}`,
        'Accept': 'application/vnd.github+json',
        'User-Agent': 'github-cms-client/1.0'
      }
    });

    if (!response.ok) {
      const errorMessages = {
        401: 'GitHub認証エラー: PATを確認してください',
        403: 'アクセス権限がありません',
        404: 'リソースが見つかりません',
        429: 'レート制限に達しました'
      };

      throw new HttpException(
        errorMessages[response.status] || `GitHub API Error: ${response.status}`,
        response.status
      );
    }

    return response.json();
  }

  @Get('files')
  @ApiOperation({ summary: 'Markdownファイル一覧を取得' })
  @ApiResponse({ status: 200, description: 'ファイル一覧' })
  async getFiles() {
    const path = `/repos/${this.githubOwner}/${this.githubRepo}/contents${this.githubTargetDirectory}`;
    const files = await this.githubRequest(path);

    const markdownFiles = files.filter((file: any) =>
      file.type === 'file' && file.name.endsWith('.md')
    );

    return markdownFiles.map((file: any) => ({
      name: file.name,
      path: file.path,
      sha: file.sha,
      size: file.size,
      downloadUrl: file.download_url
    }));
  }

  @Get('files/:filename')
  @ApiOperation({ summary: '特定のMarkdownファイルの内容を取得' })
  @ApiResponse({ status: 200, description: 'ファイル内容' })
  @ApiResponse({ status: 404, description: 'ファイルが見つかりません' })
  async getFileContent(@Param('filename') filename: string) {
    if (!filename.endsWith('.md')) {
      filename += '.md';
    }

    const path = `/repos/${this.githubOwner}/${this.githubRepo}/contents${this.githubTargetDirectory}/${filename}`;

    try {
      const file = await this.githubRequest(path);

      const content = Buffer.from(file.content, 'base64').toString('utf-8');

      return {
        name: file.name,
        path: file.path,
        content: content,
        sha: file.sha,
        size: file.size,
        downloadUrl: file.download_url,
        htmlUrl: file.html_url
      };
    } catch (error) {
      if (error.status === 404) {
        throw new HttpException('ファイルが見つかりません', HttpStatus.NOT_FOUND);
      }
      throw error;
    }
  }

  @Get('rate-limit')
  @ApiOperation({ summary: 'GitHub APIレート制限情報を取得' })
  @ApiResponse({ status: 200, description: 'レート制限情報' })
  async getRateLimit() {
    const data = await this.githubRequest('/rate_limit');

    return {
      limit: data.rate.limit,
      remaining: data.rate.remaining,
      resetAt: new Date(data.rate.reset * 1000),
      used: data.rate.limit - data.rate.remaining
    };
  }
}

# ファイル一覧を取得
GET /api/github-cms/files

# 特定のファイル内容を取得
GET /api/github-cms/files/2024-01-15-github-api-guide.md

# レート制限を確認
GET /api/github-cms/rate-limit

// GET /api/github-cms/files
[
  {
    "name": "2024-01-15-github-api-guide.md",
    "path": "posts/2024-01-15-github-api-guide.md",
    "sha": "abc123...",
    "size": 2048,
    "downloadUrl": "https://raw.githubusercontent.com/..."
  },
  // ...
]

// GET /api/github-cms/files/2024-01-15-github-api-guide.md
{
  "name": "2024-01-15-github-api-guide.md",
  "path": "posts/2024-01-15-github-api-guide.md",
  "content": "# GitHub API活用ガイド\\n\\n本文...",
  "sha": "abc123...",
  "size": 2048,
  "downloadUrl": "https://raw.githubusercontent.com/...",
  "htmlUrl": "https://github.com/..."
}

// React/Next.jsでの実装
import { useEffect, useState } from 'react';

export default function BlogList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/api/github-cms/files')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>ブログ記事一覧</h1>
      {posts.map(post => (
        <div key={post.sha}>
          <Link href={`/blog/${post.name.replace('.md', '')}`}>
            {post.name.replace('.md', '')}
          </Link>
        </div>
      ))}
    </div>
  );
}