😱 Remixサイトが真っ白に！デプロイ地獄から這い上がった3日間の記録

// 犯人はコイツだった（当時は知る由もない）
export const loader = async ({ params, request }) => {
  const url = new URL(request.url);
  
  // 「これでJSONファイル取れるでしょ？」と思ってた
  const res = await fetch(`${url.origin}/data/articles.json`);
  
  if (!res.ok) {
    throw new Response("記事データの取得に失敗しました", { status: 500 });
  }
  
  const data = await res.json();
  // ...
};

# 恐る恐るアクセスしてみる
curl https://xxx.pages.dev/data/articles.json
# -> 404 Not Found

# えっ？？？

# ローカルで確認
$ ls -la build/client/data/
# articles.json ← ちゃんとある！

// この時の私の推測（外れ）
export default defineConfig({
  plugins: [
    tailwindcss(),
    remix({...}),
    tsconfigPaths(),
  ],
  // publicDir: "public", // これが足りないのかも？
});

// 外にファイル取りに行って迷子になる
const res = await fetch(`${url.origin}/data/articles.json`);
const data = await res.json(); // ←ここで失敗してた

// 最初からアプリに組み込んでおく
try {
  const { default: articlesData } = await import("~/data/articles.generated.json");
  const data = articlesData; // ←確実に取れる！
  
  if (!article) {
    throw new Response("記事が見つかりません", { status: 404 });
  }
} catch (error) {
  throw new Response("記事データの読み込みに失敗しました", { status: 500 });
}

// ❌ ビフォー：またもや迷子方式
const res = await fetch(`${url.origin}/data/articles.json`);
if (!res.ok) return json({ articles: [] }); // 😭
const data = await res.json();

// ✅ アフター：持ち込み方式で安心
let data;
try {
  const { default: articlesData } = await import("~/data/articles.generated.json");
  data = articlesData; // 🎉 確実に取れる！
} catch (error) {
  // もしダメでも親切にエラー処理
  return json({ 
    articles: [], 
    tags: [], 
    // ... その他のデフォルト値
  });
}

// scripts/build-articles.mjs
// 「保険をかける」気持ちで両方生成
await Promise.all([
  fs.writeFile('public/data/articles.json', jsonContent),     // 静的ファイル用
  fs.writeFile('app/data/articles.generated.json', jsonContent) // import用（メイン）
]);

# 1. 記事データ生成
node scripts/build-articles.mjs
# → public/data/articles.json (静的配信用)
# → app/data/articles.generated.json (import用)

# 2. Remixビルド
npx remix vite:build
# → import用JSONがバンドルされる

# 3. Cloudflare Pagesデプロイ
npx wrangler pages deploy build --project-name web-lukes-remix

// vite.config.ts 完全版
export default defineConfig({
  plugins: [
    tailwindcss(),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
  ],
  publicDir: "public",
});

const performanceComparison = {
  修正前: {
    記事ページ: "500エラー",
    ホームページ: "記事0件表示",
    読み込み方式: "Runtime fetch",
  },
  
  修正後: {
    記事ページ: "正常表示",
    ホームページ: "全記事表示",
    読み込み方式: "Build-time import",
    パフォーマンス向上: "静的バンドルによる高速化"
  }
};

修正前:
  - fetchリクエストの失敗リスク
  - 静的ファイル配信との競合
  - ランタイムエラーの可能性

修正後:
  - ビルド時エラー検出
  - 静的バンドルによる安定性
  - キャッシュ効率の向上

# Step 1: ローカル環境での動作確認
npm run dev
curl http://localhost:5173/articles/test-article

# Step 2: ビルド環境での確認
npm run build
ls -la build/client/data/

# Step 3: デプロイ環境での確認
curl https://xxx.pages.dev/data/articles.json
curl https://xxx.pages.dev/articles/test-article

# デプロイ履歴の確認
npx wrangler pages deployment list --project-name web-lukes-remix

# 特定デプロイの詳細確認
# Cloudflare Dashboard でビルドログを確認

// Step 1: エラーハンドリングの強化
try {
  const res = await fetch(`${url.origin}/data/articles.json`);
  if (!res.ok) {
    console.error('Fetch failed:', res.status, res.statusText);
    throw new Error(`HTTP ${res.status}: ${res.statusText}`);
  }
  // ...
} catch (error) {
  console.error('Article loading error:', error);
  throw new Response("詳細なエラー情報", { status: 500 });
}

// Step 2: フォールバック機能の実装
const loadArticleData = async () => {
  try {
    // Method 1: Import
    const { default: articlesData } = await import("~/data/articles.generated.json");
    return articlesData;
  } catch (importError) {
    try {
      // Method 2: Fetch (fallback)
      const res = await fetch('/data/articles.json');
      return await res.json();
    } catch (fetchError) {
      // Method 3: Default data
      return {};
    }
  }
};

// 推奨: 詳細なエラー情報
throw new Response(`Article not found: ${slug}`, { 
  status: 404,
  statusText: 'Article Not Found' 
});

// 非推奨: 汎用的なエラー
throw new Response("エラー", { status: 500 });

// 環境別の処理分岐
const isProduction = process.env.NODE_ENV === 'production';
const isDevelopment = !isProduction;

if (isDevelopment) {
  // 開発時: リアルタイムMDX読み込み
  const { getArticleFromMDX } = await import("~/utils/markdown.server");
  article = await getArticleFromMDX(slug);
} else {
  // 本番時: 事前ビルドJSON読み込み
  const { default: articlesData } = await import("~/data/articles.generated.json");
  article = articlesData[slug];
}

const safeArticleLoader = async (slug: string) => {
  try {
    const articleData = await loadArticleData();
    const article = articleData[slug];
    
    if (!article) {
      throw new Response(`Article "${slug}" not found`, { 
        status: 404,
        headers: { 'Content-Type': 'text/plain' }
      });
    }
    
    return article;
  } catch (error) {
    // ログ出力（本番環境ではログサービスに送信）
    console.error(`Article loading failed for ${slug}:`, error);
    
    if (error instanceof Response) {
      throw error;
    }
    
    throw new Response('Internal server error while loading article', { 
      status: 500 
    });
  }
};

// パフォーマンス監視
const trackArticleLoad = (slug: string, startTime: number) => {
  const duration = Date.now() - startTime;
  
  // Cloudflare Analytics や外部サービスに送信
  if (typeof window !== 'undefined') {
    navigator.sendBeacon('/api/metrics', JSON.stringify({
      event: 'article_load',
      slug,
      duration,
      timestamp: Date.now()
    }));
  }
};