Closed5ヶ月前にクローズ10

100日チャレンジ day8 (Gitホスティングサービス)

昨日

https://zenn.dev/gin_nazo/scraps/b473ea4791c7f6
https://blog.framinal.life/entry/2025/04/14/154104
100日チャレンジに感化されたので、アレンジして自分でもやってみます。

 やりたいこと世の中のさまざまなドメインの簡易実装をつくり、バックエンドの実装に慣れる(dbスキーマ設計や、関数の分割、使いやすいインターフェイスの切り方に慣れる
設計力(これはシステムのオーバービューを先に自分で作ってaiに依頼できるようにする
生成aiをつかったバイブコーティングになれる
実際にやったことはzennのスクラップにまとめ、成果はzennのブログにまとめる(アプリ自体の公開は必須ではないかコードはgithubにおく)

 できたもの

riddle_tec

Gitをホスティンングしてプルリクをつくったりレビューができるやつ）
Git 周りが複雑で難色を示されたので、この二つに頼ることで進めるようにした
https://www.npmjs.com/package/git-http-backend?activeTab=versions

https://github.com/isomorphic-git/isomorphic-git

riddle_tec

承知いたしました。まず、修正した仕様書をここに提示します。UI に関する追加要件を反映しました。

 Day 8: Git リポジトリブラウザ & クローンサーバー 仕様書
 概要isomorphic-git と git-http-backend を利用して、ローカル環境で動作するシンプルな Git リポジトリのブラウジング機能と、HTTP 経由での git clone 機能を提供する Web アプリケーションを作成します。UI からリポジトリを作成でき、クローン用のコマンドも表示されます。

 機能要件リポジトリ作成 (API)
エンドポイント: POST /api/repos
リクエストボディ: { "name": "repository-name" }
処理:
指定された名前でサーバー上に空の bare Git リポジトリ (.git) を作成 (isomorphic-git の init)。場所: repositories/。
リポジトリ名とパスをデータベース (SQLite) に保存。
作成されたリポジトリ情報を返す。

バリデーション: リポジトリ名の形式、重複チェック。
リポジトリ作成 (UI)
場所: リポジトリ一覧ページ ( / )
UI: リポジトリ名を入力するフォームと作成ボタン。
処理: フォーム送信時に POST /api/repos を呼び出し、成功したらリポジトリ一覧を更新する。
リポジトリ一覧表示 (UI)
ルートパス: /
処理: データベースからリポジトリ一覧を取得し、各リポジトリへのリンク (/repos/[repoName]) 付きで表示する。リポジトリ作成フォームも同ページに表示する。
ファイル/ディレクトリ一覧表示 (UI)
ルートパス: /repos/[repoName]
処理:

isomorphic-git を使用し、リポジトリのデフォルトブランチのルートディレクトリの内容を取得。
取得した内容をリスト形式で表示（ファイルはファイル内容表示ページへのリンク）。

クローンコマンド表示: このリポジトリをクローンするための git clone http://localhost:3001/api/repos/[repoName]/git コマンドを表示する。

ファイル内容表示 (UI)
ルートパス: /repos/[repoName]/blob/[...filePath]
処理:

isomorphic-git を使用し、指定されたファイルの内容を取得。
Markdown ファイル (.md) は HTML としてレンダリング表示。
その他はプレーンテキストとして表示。

git clone 機能 (API)
エンドポイント: GET および POST リクエストを /api/repos/[repoName]/git/[...gitPath] で受け付ける。
処理:
npm パッケージ git-http-backend を利用。
システムにインストールされている git http-backend CGI を呼び出して Smart HTTP プロトコルを処理。
ローカルからの git clone http://localhost:3001/api/repos/[repoName]/git を成功させる。

riddle_tec

この問題がよく起きるので base.mdc に書いた

Next.js 15 から Route Handler の params などの動的 API が非同期になり、アクセス前に await する必要があるという変更ですね。失念しておりました。
https://nextjs.org/docs/messages/sync-dynamic-apis のドキュメントに従い、handleGitRequest 関数内で params オブジェクト自体を await してからプロパティにアクセスするように修正します。