😭『なんで記事が反映されへんの！？』3時間の格闘から生まれたデプロイシステム完全改良記

// app/routes/_index.tsx の問題部分
export const loader = async ({ request }: LoaderFunctionArgs) => {
  let data: Record<string, Article>;
  try {
    // ここが問題だった！
    const { default: articlesData } = await import("~/data/articles.generated.json");
    data = articlesData as Record<string, Article>;
  } catch (error) {
    return json({ articles: [] as Article[], page: pageParam, pages: 0, per: perParam, total: 0 });
  }
  // ...
};

// 単純だけど非効率
const deploySimple = () => {
  run('node scripts/build-articles.mjs');
  run('npx remix vite:build'); // 毎回フルビルド
  run('npx wrangler pages deploy');
};

// 根本的な解決
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  let data: Record<string, Article> | null = null;
  
  try {
    // 静的ファイルから動的に読み込み
    const res = await fetch(new URL("/data/articles.json", url).toString());
    if (res.ok) {
      data = (await res.json()) as Record<string, Article>;
    }
  } catch {}
  
  if (!data) {
    return json({ articles: [] as Article[], page: pageParam, pages: 0, per: perParam, total: 0 });
  }
  // ...
};

// scripts/deploy-with-build.mjs の改良版
async function deployWithBuild() {
  console.log('🚀 Starting smart deploy...');

  // より堅牢な変更検知
  const changed = collectChangedFiles();
  const changedFiles = Array.from(changed);
  const mdxChanged = changedFiles.some(
    (f) => f.startsWith('content/articles/') && f.endsWith('.mdx')
  );

  if (mdxChanged) {
    console.log('📝 MDX changes detected. Regenerating article JSON...');
    run('node scripts/build-articles.mjs');
  }

  // 常にRemixアプリはリビルド（但し高速）
  console.log('🔧 Building Remix app...');
  run('npx remix vite:build');

  // 正しいディレクトリをデプロイ
  console.log('🌐 Deploying to Cloudflare Pages...');
  run('npx wrangler pages deploy ./build/client --project-name=web-lukes-remix');
}

// Before: import地獄
const { default: articlesData } = await import("~/data/articles.generated.json");

// After: fetch天国  
const res = await fetch(new URL("/data/articles.json", url).toString());
const data = await res.json();

// 変更検知の改良
function collectChangedFiles() {
  const sources = [
    'git diff --cached --name-only',
    'git diff --name-only', 
    'git diff HEAD~1 --name-only', // CI環境での浅い履歴対応
  ];
  
  const lists = sources.map((cmd) => {
    try {
      const out = getOutput(cmd);
      return out ? out.split('\n').filter(Boolean) : [];
    } catch {
      return [];
    }
  });
  
  return new Set(lists.flat()); // 重複除去
}

// 賢いビルド戦略
if (mdxChanged) {
  // 記事が変更された場合のみJSON再生成
  run('node scripts/build-articles.mjs');
}

// 常にRemixはリビルド（でも高速）
run('npx remix vite:build');

// 正しいディレクトリをデプロイ
run('npx wrangler pages deploy ./build/client');

npm run deploy:smart

🚀 Starting smart deploy...
📝 MDX changes detected. Regenerating article JSON...
🚀 Processing 18 MDX files...
✅ Generated public/data/articles.json with 18 articles
🔧 Building Remix app...
✓ built in 2.74s
🌐 Deploying to Cloudflare Pages (build/client)...
✨ Deployment complete!

// 実測値（3回平均）
const performanceData = {
  "ビルド時間": {
    before: "不定（失敗時は無限）",
    after: "2.74秒（安定）"
  },
  
  "デプロイ時間": {
    before: "5-10分（試行錯誤含む）", 
    after: "1.5分（確実）"
  },
  
  "記事反映率": {
    before: "70%（運ゲー）",
    after: "100%（確実）"
  },
  
  "開発ストレス": {
    before: "😭😭😭😭😭",
    after: "😊✨"
  }
};

// ❌ ビルド時に固定されるデータ
import staticData from './static-data.json';

// ✅ 動的に更新されるデータ  
const dynamicData = await fetch('/api/dynamic-data').then(r => r.json());

// ❌ 雑なエラーハンドリング
try {
  const data = await doSomething();
} catch {
  // 何もしない（最悪）
}

// ✅ 適切なエラーハンドリング
try {
  const data = await doSomething();
  return data;
} catch (error) {
  console.error('Failed to fetch data:', error);
  return defaultValue; // フォールバック値
}

// ❌ 単一のGitコマンドに依存
const changedFiles = execSync('git diff --name-only').toString().split('\n');

// ✅ 複数ソースでフォールバック
function collectChangedFiles() {
  const sources = [
    'git diff --cached --name-only',
    'git diff --name-only',
    'git diff HEAD~1 --name-only'
  ];
  
  return new Set(sources.flatMap(cmd => {
    try {
      return execSync(cmd, { encoding: 'utf8' }).trim().split('\n').filter(Boolean);
    } catch {
      return [];
    }
  }));
}

// 何度実行しても同じ結果になるように
const deploy = async () => {
  // 1. 常にクリーンな状態から開始
  await cleanup();
  
  // 2. 必要なファイルを生成
  await generateAssets();
  
  // 3. 検証してからデプロイ
  await validate();
  await deployToProduction();
};