😆

Trigger.dev + Vercel 完全デプロイガイド

2025/07/02に公開

triggerdev

triggerdotdev

tech

📝 概要

Trigger.devとVercelを使用したプロジェクトのデプロイ手順と、よくある落とし穴をまとめた完全ガイドです。

⚠️ 最重要ポイント

Vercel Deploy ≠ Trigger.dev Deploy

Vercelにpushしても、Trigger.devには自動反映されません
それぞれ独立したサーバーなので、別々にデプロイが必要です

🏗️ アーキテクチャ理解

src/
├── trigger/           ← Trigger.devサーバーで実行
│   ├── stock-check.ts
│   └── image-process.ts
├── app/api/           ← Vercelサーバーで実行
│   └── trpc/
└── components/        ← Vercelサーバーで実行

🚀 標準デプロイ手順

Step1: 開発環境テスト

npx trigger.dev dev --skip-update-check

Step 2: PR マージ前の最終確認

# ビルドエラーがないか
npm run build

# lintエラーがないか  
npm run check

# Trigger.dev動作確認
npx trigger.dev dev --skip-update-check

Step 3: デプロイ判定チェックリスト

修正箇所を確認：

src/trigger/ 配下を修正？ → Trigger.dev deploy必要
src/app/, src/components/ のみ？ → Vercel deployのみ
両方修正？ → 両方deployが必要

Step 4: mainブランチへマージ

# PRをマージ → Vercelの自動デプロイが開始される

Step 5: Vercel Deploy確認

Vercel dashboardでビルドステータスを監視
エラーがあれば即座に対応

Step 6: Trigger.dev Deploy（必要な場合）

# mainブランチに切り替え
git checkout main
git pull origin main

# 本番環境のTrigger.devにデプロイ
npx trigger.dev deploy --skip-update-check

🎯 変更パターン別ガイド

パターン1: Trigger内の処理変更

// src/trigger/stock-check.ts を修正
export const stockCheckTask = task({
  id: "stock-check",
  run: async (payload) => {
    // ここを変更
    const improvedLogic = await newProcessingMethod(payload);
    return improvedLogic;
  }
});

必要なデプロイ:

# Trigger.devへのデプロイが必須
npx trigger.dev deploy --env production

パターン2: API/UI変更のみ

// src/app/api/trpc/stock-check.ts を修正
export const stockCheckRouter = router({
  start: publicProcedure
    .mutation(async ({ input }) => {
      // UI関連の変更
      const response = await processInput(input);
      
      // Trigger呼び出し（変更なし）
      await stockCheckTask.trigger({ data: response });
      return response;
    })
});

必要なデプロイ:

# Vercel deployのみで反映
git push origin main

🚨 忘れやすいケース

ケース1: ログ追加

// src/trigger/image-process.ts
logger.info("新しいログを追加");  // ← この変更

→ Trigger.dev deployしないと新ログは出ない

ケース2: エラーハンドリング改善

// src/trigger/stock-check.ts
catch (error) {
  // エラーハンドリングを改善
  logger.error("詳細なエラー情報", { error });
}

→ Trigger.dev deployしないとエラー処理は変わらない

🔍 デプロイ状況の確認方法

# 現在のTrigger.dev環境確認
npx trigger.dev status --env production

# 最新のdeploy履歴
npx trigger.dev deployments list --env production

# 実行中のタスク確認
npx trigger.dev runs list --env production

# Vercel側の最新commit確認
git log --oneline -5

🛠️ 運用パターン

緊急修正の場合

# 1. Trigger.devのみ即座にデプロイ
npx trigger.dev deploy --env production

# 2. 後でVercel側にもマージ（必要があれば）
git push origin main

段階的デプロイ

# 1. Trigger.devをステージング環境でテスト
npx trigger.dev deploy --env staging

# 2. 動作確認後、本番デプロイ
npx trigger.dev deploy --env production

# 3. 後日Vercel側も更新
git push origin main

💡 ベストプラクティス

package.jsonにスクリプト追加

{
  "scripts": {
    "deploy:trigger": "npx trigger.dev deploy --env production",
    "deploy:full": "npm run deploy:trigger && git push origin main",
    "deploy:check": "npx trigger.dev status --env production"
  }
}

⚡ Quick Reference

修正箇所	必要なデプロイ	コマンド
`src/trigger/`	Trigger.dev	`npx trigger.dev deploy`
`src/app/`	Vercel	`git push origin main`
`src/components/`	Vercel	`git push origin main`
両方	両方	上記両方のコマンド

📌 注意事項

--skip-update-check オプションはTrigger.devのバージョンチェックをスキップします
データ整合性のため、APIの互換性を保つよう注意してください
両環境は個別にモニタリングが必要です