YAML設定で運用するNext.js管理コンソール — 複数サイト・複数アクションの一元化
本記事は生成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 利用者は このファイルだけ を編集すれば、コードを書かずに： ...