😤『毎回全部ビルドするのもったいない！』から生まれたスマートデプロイシステムの奇跡

😡 「なんで毎回全部ビルド？時間の無駄！」からの出発

あるある悩み、ありませんか？

• 「記事1つ直しただけなのに、10分もビルドに時間かかる...」 😩
• 「画像1枚変えただけで全サイトリビルド...」 😤
• 「毎回同じファイル処理してる感じがして、なんかもったいない...」 😑

私も毎日こんな感じでした。特に記事を書いてはデプロイして、「あ、誤字発見」でまた全部ビルド...

「このままじゃ時間がいくらあっても足りない！」

そんな怒りとストレスから生まれたのが、スマートデプロイシステムです。

結果：ビルド時間90%削減、開発効率3倍向上 🚀

この記事では、同じような悩みを抱えているあなたに、私が血と汗と涙で編み出した「賢いデプロイシステム」の全貌をお伝えします。

深夜、コーヒーとお菓子に囲まれながらシステムを開発する私

🤔 「スマートデプロイって何？」を身近な例で

普通のデプロイ（従来方式）

想像してみてください。あなたがお弁当屋さんの店長だとして：

毎朝の準備：

• からあげ弁当のからあげを1個増やしただけなのに...
• 「よし、全メニュー作り直しだ！」
• のり弁、唐揚げ弁当、焼魚弁当、ハンバーグ弁当...全部最初から作り直し
• 朝6時に来て、開店10時... 4時間かかる 😱

これが従来のデプロイです。1つの記事を修正しただけで、全記事を再処理してしまう。

スマートデプロイ（改良版）

賢い準備：

• からあげ弁当のからあげを1個増やしただけなら...
• 「からあげ弁当だけ作り直そう」
• 他の弁当はそのまま使える
• 朝9時に来て、開店10時... 1時間で終了 ✨

これがスマートデプロイです。変更された部分だけを賢く検知して、必要最小限の処理で完了。

🔍 「どうやって変更を検知するの？」の仕組み

Git様に聞く作戦

私たちの秘密兵器はGitです。Gitは「何が変わったか」を完璧に覚えてくれている優秀な秘書みたいなもの。

// 「何か変わった？」とGitに聞く
const changedFiles = execSync('git diff --name-only').toString();

// 「記事ファイル(.mdx)が変わった？」
const changedMdxFiles = changedFiles.filter(file => 
  file.startsWith('content/articles/') && file.endsWith('.mdx')
);

日常例えで言うと：

• Git: 「昨日と比べて、このファイルとこのファイルが変わってますよ」
• 私たち: 「じゃあそのファイルだけ処理しよう！」
• 結果: 時間も労力も大幅節約 🎉

改良版！3段階の変更検知システム

私のスマートデプロイは3つの方法で変更を検知し、さらに安全性も向上させました：

🔧 改良ポイント：

• Setを使った効率的な重複除去
• getGitFilesヘルパー関数で安全な処理
• 空文字列チェックの強化

1段階目：ステージングエリアをチェック

// 改良版：安全な処理でエラーを防ぐ
const getGitFiles = (command) => {
  try {
    const output = execSync(command, { encoding: 'utf8' });
    const trimmed = output.trim();
    if (!trimmed) return []; // 空文字列は早期リターン
    return trimmed.split('\n').filter(file => file.length > 0);
  } catch (error) {
    return []; // エラー時は空配列を返す
  }
};

const stagedFiles = getGitFiles('git diff --cached --name-only');

2段階目：作業中の変更をチェック

// 「今、編集中のファイルある？」
const workingFiles = getGitFiles('git diff --name-only');

3段階目：最新コミットとの差分をチェック

// 「最後のコミットから何か変わった？」（他に変更がない場合のみ）
if (changedFiles.size === 0) {
  const commitFiles = getGitFiles('git diff HEAD~1 --name-only');
}

これって何がすごいかって？

• どんな状況でも変更を見逃さない
• エラーで止まらない安全設計
• 重複ファイルを自動除去で効率的
• 空文字列による誤動作を防止

🛠️ 実際のスマートデプロイコード

メインシステム（deploy-with-build.mjs）

import { execSync } from 'child_process';

async function deployWithBuild() {
  try {
    console.log('🚀 Starting smart deploy...');
    
    // Git で変更されたファイルを取得（複数のソースから）
    const changedFiles = new Set();
    
    // ヘルパー関数: Gitコマンドの出力を安全に処理
    const getGitFiles = (command) => {
      try {
        const output = execSync(command, { encoding: 'utf8' });
        const trimmed = output.trim();
        if (!trimmed) return [];
        return trimmed.split('\n').filter(file => file.length > 0);
      } catch (error) {
        return [];
      }
    };
    
    // 1. ステージングされた変更
    const stagedFiles = getGitFiles('git diff --cached --name-only');
    stagedFiles.forEach(file => changedFiles.add(file));
    
    // 2. 作業ディレクトリの変更（未ステージング）
    const workingFiles = getGitFiles('git diff --name-only');
    workingFiles.forEach(file => changedFiles.add(file));
    
    // 3. 最新コミットとの差分（他に変更がない場合のみ）
    if (changedFiles.size === 0) {
      const commitFiles = getGitFiles('git diff HEAD~1 --name-only');
      commitFiles.forEach(file => changedFiles.add(file));
      
      if (commitFiles.length === 0) {
        console.log('⚠️ No git changes detected from any source...');
      }
    }
    
    const changedFilesArray = Array.from(changedFiles);
    
    // MDXファイルの変更をチェック
    const changedMdxFiles = changedFilesArray.filter(file => 
      file.startsWith('content/articles/') && file.endsWith('.mdx')
    );
    
    if (changedMdxFiles.length > 0) {
      console.log(`📝 Found ${changedMdxFiles.length} changed MDX files:`);
      changedMdxFiles.forEach(file => console.log(`   - ${file}`));
      
      // 記事ビルドスクリプトを実行
      console.log('🔄 Running article build script...');
      execSync('node scripts/build-articles.mjs', { stdio: 'inherit' });
      
      // 変更されたファイルを再ステージング（JSONファイルが更新されたため）
      console.log('📦 Staging updated JSON files...');
      execSync('git add app/data/articles.generated.json public/data/articles.json', { stdio: 'inherit' });
      
    } else {
      console.log('ℹ️ No MDX files changed, skipping article build...');
    }
    
    // デプロイ実行
    console.log('🌐 Deploying to Cloudflare Pages...');
    execSync('npx wrangler pages deploy', { stdio: 'inherit' });
    
    console.log('✅ Deploy completed successfully!');
    
  } catch (error) {
    console.error('❌ Deploy failed:', error.message);
    process.exit(1);
  }
}

// 実行
deployWithBuild().catch(console.error);

package.json設定

{
  "scripts": {
    "deploy": "npm run build && wrangler pages deploy",
    "deploy:smart": "node scripts/deploy-with-build.mjs"
  }
}

使い方：

# 🐌 従来方式（全部ビルド）
npm run deploy

# ⚡ スマート方式（変更部分のみ）
npm run deploy:smart

📊 「どのくらい効果があるの？」実測データ

ビフォー・アフター比較

月間での効果

私の場合（記事を週3回更新）：

• 従来方式: 月間66分（1時間6分）のビルド時間
• スマート方式: 月間8分のビルド時間
• 節約時間: 58分/月 🎉

1年間だと...

• 節約時間: 約12時間
• この時間で新しい記事を12記事も書ける！

🎯 導入方法：あなたのプロジェクトでも使える

Step 1: スクリプトファイル作成

scripts/deploy-with-build.mjsを作成：

import { execSync } from 'child_process';

async function smartDeploy() {
  console.log('🚀 Smart deploy starting...');
  
  // あなたのプロジェクトに合わせて変更検知ロジックを調整
  const changedFiles = execSync('git diff --name-only', { encoding: 'utf8' })
    .trim().split('\n').filter(file => file);
  
  // 特定のファイルタイプが変更された時だけビルド
  const needsBuild = changedFiles.some(file => 
    file.endsWith('.md') || 
    file.endsWith('.mdx') ||
    file.startsWith('src/content/')
  );
  
  if (needsBuild) {
    console.log('📝 Content changed, building...');
    execSync('npm run build', { stdio: 'inherit' });
  } else {
    console.log('ℹ️ No content changes, skipping build...');
  }
  
  // あなたのデプロイコマンドに変更
  console.log('🌐 Deploying...');
  execSync('npm run deploy:static', { stdio: 'inherit' });
}

smartDeploy().catch(console.error);

Step 2: package.json更新

{
  "scripts": {
    "deploy:smart": "node scripts/deploy-with-build.mjs"
  }
}

Step 3: 使ってみる

npm run deploy:smart

💡 さらなる応用アイデア

1. ファイルタイプ別の処理

const changes = {
  articles: changedFiles.filter(f => f.includes('/articles/') && f.endsWith('.mdx')),
  images: changedFiles.filter(f => f.includes('/images/')),
  styles: changedFiles.filter(f => f.endsWith('.css') || f.endsWith('.scss'))
};

if (changes.articles.length > 0) {
  execSync('node scripts/build-articles.mjs');
}

if (changes.images.length > 0) {
  execSync('node scripts/optimize-images.mjs');
}

if (changes.styles.length > 0) {
  execSync('npm run build:css');
}

2. 環境別デプロイ

const env = process.env.NODE_ENV || 'production';

if (env === 'development') {
  console.log('🔧 Development deploy - minimal processing');
  // 開発環境は最小限の処理
} else {
  console.log('🚀 Production deploy - full optimization');
  // 本番環境は最適化も含む
}

3. 通知システム

if (changedMdxFiles.length > 0) {
  console.log(`📢 Updated articles: ${changedMdxFiles.join(', ')}`);
  
  // Slack通知やメール通知などを追加
  // await notifySlack(`記事更新: ${changedMdxFiles.length}件`);
}

⚠️ 「こんな時は注意！」ポイント

1. 初回デプロイは必ず全ビルド

// 初回かチェック
const hasBuiltBefore = fs.existsSync('build/timestamp');

if (!hasBuiltBefore) {
  console.log('🏗️ First time build - processing all files');
  execSync('npm run build', { stdio: 'inherit' });
  fs.writeFileSync('build/timestamp', Date.now().toString());
} else {
  // スマートデプロイロジック
}

2. 依存関係の変更は全ビルド

const configChanged = changedFiles.some(file => 
  file === 'package.json' ||
  file === 'vite.config.js' ||
  file === 'remix.config.js'
);

if (configChanged) {
  console.log('⚙️ Config changed - full rebuild required');
  execSync('npm run build', { stdio: 'inherit' });
  return;
}

3. エラーハンドリング

try {
  execSync('git diff --name-only', { encoding: 'utf8' });
} catch (error) {
  console.log('⚠️ Git not available, defaulting to full build');
  execSync('npm run build', { stdio: 'inherit' });
}

🎉 あなたへのメッセージ（効率化を目指す仲間へ）

「本当に効果あるの？」と疑問なあなたへ

この記事を読んでくれて、ありがとうございます。

きっと今、こんな気持ちではないですか？

「なんか複雑そう...」
「うちのプロジェクトでも使えるかな？」
「設定間違えたらサイトが壊れそう...」

その不安、めちゃくちゃわかります。

私も最初は「変なことして全部壊れたらどうしよう」って怖かったです。

でも大丈夫。小さく始めよう

✨ この記事で手に入れたもの：

• 🧠 知識：スマートデプロイの仕組みがわかった
• 🛠 道具：実際に使えるコードとアイデア
• 💪 勇気：「やってみよう」という気持ち

🚀 これからやること：

1. まずは別ブランチで試す：メインブランチは触らず安全にテスト
2. 小さく始める：最初は1つのファイルタイプから
3. 記録をつける：どのくらい時間が短縮されたか測ってみる

あなたの成功が楽しみです

数週間後のあなた：

• 「あの時、導入して良かった」
• 「デプロイが早くなって、もっと記事を書く時間ができた」
• 「チームメンバーからも感謝された」

そんな風になってるはず。

失敗しても大丈夫。私も何度も失敗しました。
でも、失敗するたびに学んで、最終的により良いシステムができました。

あなたの開発がもっと楽しくなることを願っています！ 🌟

---

もし導入で困ったことがあれば、遠慮なくコメントしてください。一緒に解決しましょう！

P.S. 初めてスマートデプロイが「45秒で完了しました」って表示された時の感動は忘れられません。あなたにもその瞬間を味わってもらいたいです。