YAML設定で運用するNext.js管理コンソール — 複数サイト・複数アクションの一元化

Sun, 03 May 2026 18:00:00 +0900

本記事は生成AIと共同で執筆しています。事実関係は可能な範囲で公式ドキュメント等と照合していますが、誤りが含まれている可能性があります。重要な判断を行う前にご自身でも一次情報をご確認ください。

前回の記事で、組織向けに「非エンジニアが操作できる管理コンソール」をGitHub App + Cloudflare Accessで構築した話を書きました。本記事はその続編で、「サイトを増やしてもコードに触らずに済む」「1サイトに複数アクションを持たせる」 ために、設定をYAMLに外部化した設計を整理します。

当初の設計の限界

最初は src/lib/sites.ts に TypeScript の配列としてサイトを直書きしていました。

export const SITES = [
 {
 id: 'site-a',
 url: 'https://site-a.example.com/',
 action: { type: 'github-workflow', repo: '...', workflow: 'admin.yml' },
 },
 // ...
]

この設計には以下の問題がありました。

サイトを追加するたびにコード変更が必要 — i18nテキスト用にmessages.jsonも編集
1サイト1アクションが前提になっていた — 「デプロイ」「再インデックス」「バックアップ」など複数を扱いたいときに表現できない
OSSとして配布したときに利用者がコードを触らないと動かせない — 設定がコードに混在しているとフォークして編集する流れになり、本家の更新を取り込みにくい

YAML 1ファイルへの集約

これを config.yml 1ファイルへの集約に書き換えました。アプリのブランディング・サイト定義・アクション定義・各テキストのja/en、すべてここに入ります。

app:
 title:
 ja: 管理コンソール
 en: Admin Console
 homePage:
 heading:
 ja: 管理コンソール
 en: Admin Console
 lead:
 ja: 各サイトのカードを開いて、操作を実行できます。
 en: Open a site card to run operations.

sites:
 - id: site-a
 name:
 ja: サイトA
 en: Site A
 description:
 ja: サイトAの説明
 en: Description
 url: https://site-a.example.com/
 actions:
 - id: deploy
 label:
 ja: デプロイを実行
 en: Deploy
 description:
 ja: ビルドして公開します。
 en: Build and publish.
 type: github-workflow
 repo: your-org/site-a
 workflow: deploy.yml
 ref: main
 - id: es-sync
 label:
 ja: ESインデックス更新
 en: Re-index
 description:
 ja: Elasticsearchを再同期します。
 en: Re-syncs Elasticsearch.
 type: github-workflow
 repo: your-org/site-a
 workflow: es-sync.yml
 ref: main
 inputs:
 - name: dry_run
 type: boolean
 default: false
 label:
 ja: Dry run
 en: Dry run

利用者は このファイルだけ を編集すれば、コードを書かずに：

Yaml on デジタルアーカイブシステムの技術ブログ

YAML設定で運用するNext.js管理コンソール — 複数サイト・複数アクションの一元化

当初の設計の限界

YAML 1ファイルへの集約