Smile Comfort

Vercelのビルド時間が長すぎる？カスタムビルドタイムアウトで解決！【初心者向け】

投稿日：
更新日：

1. Vercelのビルドタイムアウトとは？

Vercelは、Webサイトやアプリケーションを簡単にデプロイできる便利なプラットフォームですが、ビルド時間には制限があります。この制限を超えてしまうと、ビルドが途中で中断され、デプロイに失敗してしまいます。

1.1 ビルドタイムアウトの基本

Vercelのビルドタイムアウト（Build Timeout）とは、Vercelがプロジェクトのビルド処理に費やすことができる最大時間のことです。デフォルトでは、15分に設定されています。

この制限は、リソースの浪費を防ぎ、プラットフォーム全体の安定性を維持するために設けられています。

1.2 なぜビルドタイムアウトが発生するのか？

ビルドタイムアウトが発生する主な原因は以下の通りです。

  • 大規模なプロジェクト: コード量が多い、アセット（画像、動画など）が多い
  • 複雑なビルド処理: 複雑な依存関係、時間のかかる処理（画像最適化、コード変換など）
  • 外部APIへの依存: 外部APIの応答遅延

1.3 ビルドタイムアウトが発生した場合の対処法

ビルドタイムアウトが発生した場合、まずは以下の点を確認してみましょう。

  • ビルド処理の最適化: 不要な処理を削除したり、処理時間を短縮したりする
  • コードの分割: コードを分割して、ビルド時間を短縮する
  • Vercelのプラン変更: より長いビルド時間制限が設定されたプランに変更する

それでも解決しない場合は、カスタムビルドタイムアウトの設定を検討しましょう。

2. カスタムビルドタイムアウトの設定方法

カスタムビルドタイムアウトを設定することで、デフォルトの15分よりも長いビルド時間を設定できます。

2.1 Vercelのプランを確認

カスタムビルドタイムアウトは、Vercelの有料プランでのみ利用可能です。無料プランでは設定できませんので、まずはプランを確認しましょう。

  • Proプラン: 最大30分
  • Enterpriseプラン: 最大60分

2.2 vercel.jsonファイルの設定

カスタムビルドタイムアウトを設定するには、プロジェクトのルートディレクトリにvercel.jsonファイルを作成し、buildセクションにmaxDurationプロパティを追加します。

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next",
      "config": {
        "maxDuration": 300 // ビルド時間を300秒（5分）に設定
      }
    }
  ]
}

注意点: maxDurationに設定できる最大時間は、プランによって異なります。Proプランの場合は最大1800秒（30分）、Enterpriseプランの場合は最大3600秒（60分）です。

2.3 環境変数の設定

環境変数を使ってカスタムビルドタイムアウトを設定することもできます。

Vercelのダッシュボードから、プロジェクトのSettings > Environment VariablesにVERCEL_BUILD_MAX_DURATIONという名前の環境変数を追加し、値を秒単位で設定します。

環境変数の設定は、vercel.jsonファイルの設定よりも優先されます。

3. ビルド時間の最適化

カスタムビルドタイムアウトを設定するだけでなく、ビルド時間そのものを最適化することも重要です。

3.1 不要な依存関係の削除

プロジェクトで使用していない依存関係（dependencies）を削除することで、ビルド時間を短縮できます。

package.jsonファイルを確認し、不要な依存関係を削除しましょう。

3.2 コードの分割

大規模なコードベースは、ビルド時間を長くする原因となります。コードを小さなモジュールに分割し、必要な時にだけロードするようにすることで、ビルド時間を短縮できます。

3.3 画像の最適化

画像は、Webサイトのパフォーマンスに大きな影響を与えます。画像を最適化することで、ビルド時間を短縮できるだけでなく、Webサイトの表示速度も向上します。

  • 画像の圧縮: 画像のファイルサイズを小さくする
  • 適切なフォーマットの選択: JPEG、PNG、WebPなど、用途に合ったフォーマットを選択する
  • レスポンシブ画像の利用: デバイスの画面サイズに合わせて、適切なサイズの画像を表示する

3.4 キャッシュの活用

Vercelは、ビルド結果をキャッシュ（Cache）します。キャッシュを活用することで、同じ内容のビルドを何度も行う必要がなくなり、ビルド時間を短縮できます。

4. まとめ

この記事では、Vercelのカスタムビルドタイムアウトについて解説しました。

  • Vercelのビルドタイムアウトは、デフォルトで15分に設定されている
  • カスタムビルドタイムアウトは、有料プランでのみ利用可能
  • vercel.jsonファイルまたは環境変数で設定できる
  • ビルド時間の最適化も重要

カスタムビルドタイムアウトを設定することで、ビルド時間制限によるエラーを解消し、大規模プロジェクトでもVercelを快適に利用できます。

次のステップ:

  • Vercelのプランを確認する
  • vercel.jsonファイルを作成し、maxDurationプロパティを設定する
  • ビルド時間の最適化に取り組む

関連リソース: