kula のアーキテクチャと技術スタック

kula のアーキテクチャと技術スタック An architecture diagram generated by Archify. サイト運営者 · kintone 管理者 · Architecture component サイト運営者 kintone 管理者 記事の読者 · ブラウザ · Architecture component 記事の読者 ブラウザ 管理画面 · /account · React 18 · Vercel（Next.js 12 ホスティング） · Firebase Auth で保護 · Next.js 管理画面 /account · React 18 Firebase Auth で保護 公開記事ページ · /articles/[...slug] · Vercel（Next.js 12 ホスティング） · SSG + ISR（fallback: blocking） · Next.js 公開記事ページ /articles/[...slug] SSG + ISR（fallback: blocking） API Routes · /api/* · withSentry · Vercel（Next.js 12 ホスティング） · Next.js API Routes /api/* · withSentry Authentication · メール / Google · Architecture component · Firebase Authentication メール / Google Realtime Database · サブドメイン・アプリ設定 · Architecture component · kintone APIトークンを保管 · Firebase Realtime Database サブドメイン・アプリ設定 kintone APIトークンを保管 ユーザーの kintone · 記事の格納先アプリ · Architecture component ユーザーの kintone 記事の格納先アプリ アプリ登録・表示設定 記事を閲覧 メール / Google でログイン APIトークンと設定を保存 アプリ情報を検証 アプリ設定を取得 レコードを取得し記事化 投稿者だけ最新版を再取得 APIトークンを参照 REST API で取得 Vercel（Next.js 12 ホスティング） Legend Frontend Backend Database Security External

フロントエンド

  • • Next.js 12 Pages Router / React 18
  • • MUI + Emotion + Tailwind CSS
  • • Recoil で状態管理・next-pwa で PWA 化

データ連携

  • • @kintone/rest-api-client でレコード取得
  • • cheerio で本文を無害化し目次を生成
  • • ISR: 記事 1h / 一覧 4h / ユーザー 8h

運用

  • • Vercel にホスティング・Sentry でエラー収集
  • • ヘッダーロゴは Firebase Storage に保管
  • • サイトマップを 51 本に分割し SSR で生成