Blog

開発プロセスの移行とサイト統合

著者: 山岸和利
更新: 編集履歴
technextjssupabase

これまでブログの運用に用いてきたDocusaurusから、Next.jsとSupabaseを組み合わせた構成へと刷新しました。これに併せてSEOの観点およびポートフォリオとブログの権威性を集約するためにドメインをykzts.com配下へと統合しています。

Docusaurusからの移行

従来のDocusaurusによる運用では以下の制約や管理上の懸念がありました。

  • 執筆環境の制約: 記事の執筆にMarkdownを用いる必要があること
  • 運用上の制約: 標準機能での予約投稿が困難であること
  • 秘匿性の欠如: ファイルベースで管理する性質上、公開前の記事であってもPull Requestなどのプロセスを通じて本文が露出してしまうこと

これらの課題を解消するため、データベースをバックエンドに持つ動的なシステム構成へと移行しました。

サイト構成とドメイン統合

本プロジェクトでは複数のアプリケーションを一つのリポジトリで管理するモノレポ構成をとっていますが、今回の刷新に合わせてURLの統合も行いました。

複数のアプリケーションを同一のURL配下で扱うマイクロフロントエンド構成を採用したことで、ポートフォリオとブログをykzts.comという一つの起点からシームレスに提供しています。これによってユーザー体験の向上とドメイン評価の集約を図っています。

AI エージェントを活用した開発フロー

本プロジェクトでは、リポジトリ内に定義したAGENTS.mdに基づき、人間とAIエージェントが共通のコンテキストを共有して開発を進める体制を構築しています。

具体的な開発手順は以下の通りです。

  • Issue の具体化: 人間がタイトルのみのIssueを起票し、CodeRabbitのAgent Chat機能を用いて実装要件やタスクリストをIssue内に補完
  • 実装の自動生成: 補完されたIssueをソースとして、GitHub CopilotのCoding AgentがPull Requestを直接作成
  • 多層的なレビュー: 作成されたコードに対し、まずCodeRabbitが自動レビューを実施。その結果を踏まえ、最終的に人間がコードの妥当性やセキュリティ (機密情報の漏洩や脆弱性の侵入防止) を検証し、マージを判断

人間は「何を作るか」という意思決定と安全性の担保に注力し、実装およびその整合性の確認作業の多くをエージェントに委ねる形をとっています。

データベース設計

バックエンドの構築においてはSupabaseをベースとしたスキーマ設計をすべてコードベースで管理しています。記事データはpostsテーブルで管理していますが、直接の操作を制限してPL/pgSQLで定義した関数を介してのみ書き込みを行う設計としました。これによりpost_versionsテーブルへ変更履歴を不変に保存する仕組みを強制しています。

またpgvectorを導入したデータベースレベルでの検索機能を実装しました。後述するAI SDKを活用した関連記事の自動抽出などはこの設計によって支えられています。

ローカル開発環境の管理

開発の効率化のため、config.tomlやseed.sqlを整備し、ローカル開発環境の再現性を確保しています。これにより、本番環境と同等のスキーマや初期データを手元の環境で即座に実行することができ、開発サイクルの高速化を図っています。

AI SDKとVercel AI Gatewayによる運用の自動化

本システムではAI SDKを通じてVercel AI Gatewayを活用し、各モデルを透過的に利用する構成をとっています。これは開発時のみならず、実際のサイト運用における各機能の自動化に寄与しています。

管理画面にはAI SDKを用いて日本語タイトルと本文から英語のslugを自動生成する機能を実装しました。ここでは既存データとの重複チェックといった処理もツールコールによって自動化されています。また関連記事抽出のトリガーとなるベクトルデータの生成・管理においても AI SDK を活用しています。