メインコンテンツへスキップ
Code & Craft
ツール比較 約9分で読めます

Vercel v1.40 新機能でフロントエンドデプロイを自動化｜環境変数管理・プレビューデプロイ・分析機能の活用【2026年最新】

Vercel CLI v1.40（2026年3月リリース）の新機能を徹底解説。環境変数の一括管理、プレビューデプロイの条件分岐、Speed Insights連携など、実務で使える自動化テクニックを紹介します。

Vercel CLI v1.40が2026年3月にリリースされ、環境変数管理の効率化、プレビューデプロイの柔軟性向上、Speed Insights連携など、フロントエンド開発者の生産性を大きく向上させる機能が追加されました。本記事では、これらの新機能を実際のワークフローに組み込む方法を、コマンド例とともに詳しく解説します。

Vercel v1.40 で追加された主要な新機能

2026年3月にリリースされたVercel CLI v1.40では、以下の機能が新たに導入されました。これらは公式ブログ（2026年3月12日公開）およびGitHubリリースノートで発表されています。

1. 環境変数の一括管理コマンド（vercel env pull/pushの強化）

従来のvercel env pullに加え、v1.40では複数環境への一括適用と差分検出機能が追加されました。これにより、.env.localと.env.productionを個別に管理する必要がなくなり、開発・ステージング・本番環境の変数同期が容易になります。

# 全環境の環境変数を一括取得（v1.40新機能）
vercel env pull --all

# 差分がある環境変数のみを表示（v1.40新機能）
vercel env diff production preview

# 特定の環境変数を複数環境に一括適用
vercel env add DATABASE_URL --target production,preview,development

2. プレビューデプロイの条件付き実行（vercel deploy --if）

v1.40では、--ifフラグを使用して特定のファイル変更時のみデプロイを実行できるようになりました。これにより、ドキュメント更新やテストファイル変更時の不要なデプロイを防ぎ、ビルド時間とコストを削減できます。

# src/ ディレクトリに変更がある場合のみプレビューデプロイ
vercel deploy --prebuilt --if="src/**"

# package.json または next.config.js が変更された場合のみ本番デプロイ
vercel deploy --prod --if="package.json,next.config.js"

3. Speed Insights 統合とCLIからのパフォーマンス確認

v1.40では、Vercel Speed InsightsのデータをCLIから直接確認できるvercel insightsコマンドが追加されました。これにより、デプロイ後すぐにCore Web Vitalsの測定結果を確認できます。

# 最新デプロイのSpeed Insightsデータを取得
vercel insights --deployment latest

# 本番環境の直近7日間のLCP・FID・CLSを表示
vercel insights --production --period 7d

以下は、Vercel CLI v1.40を使った自動デプロイワークフローの全体像です。

flowchart TD
    A["git push"] --> B{"CI環境でVercel CLI v1.40実行"}
    B --> C["vercel env pull --all<br/>（環境変数同期）"]
    C --> D{"vercel deploy --if='src/**'<br/>（条件付きデプロイ）"}
    D -->|変更あり| E["プレビューデプロイ実行"]
    D -->|変更なし| F["デプロイスキップ"]
    E --> G["vercel insights --deployment latest<br/>（パフォーマンス確認）"]
    G --> H{"Speed Insights基準<br/>（LCP < 2.5s）"}
    H -->|合格| I["vercel promote<br/>（本番昇格）"]
    H -->|不合格| J["Slack通知：最適化が必要"]

デプロイワークフロー全体図。条件付きデプロイとSpeed Insights連携により、品質を担保しながら無駄なビルドを削減できます。

環境変数管理の自動化｜開発・本番の同期を効率化

環境変数の一括取得と差分管理

従来、Vercelの環境変数は管理画面で個別に設定する必要がありましたが、v1.40のvercel env pull --allを使うことで、全環境の環境変数を一度にローカルへ取得できます。

# プロジェクトルートで実行（初回セットアップ）
vercel link

# 全環境の環境変数を取得
vercel env pull --all
# → .env.development.local, .env.preview.local, .env.production.local が生成される

差分管理にはvercel env diffを使用します。これにより、ステージング環境と本番環境で設定が異なる変数を素早く特定できます。

# プレビュー環境と本番環境の環境変数を比較
vercel env diff preview production

# 出力例:
# + DATABASE_URL (production only)
# - DEBUG_MODE (preview only)
# ~ API_ENDPOINT (different values)

CI/CDパイプラインでの環境変数同期

GitHub Actionsと組み合わせることで、デプロイ前に自動的に環境変数を同期できます。以下は、プルリクエスト作成時にプレビュー環境の変数を同期する例です。

name: Deploy Preview with Env Sync
on:
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Install Vercel CLI
        run: npm install -g vercel@1.40
      
      - name: Pull Environment Variables
        run: vercel env pull --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      
      - name: Deploy to Preview
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
        env:
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

注意点: --tokenオプションを使用する際は、GitHub SecretsにVercel Token（Dashboard > Settings > Tokens で作成）を登録してください。

プレビューデプロイの条件分岐｜無駄なビルドを削減

--if フラグによる条件付きデプロイ

v1.40の--ifフラグを使うと、特定のファイルパターンに変更がある場合のみデプロイを実行できます。これにより、READMEの更新やテストファイルの変更時に不要なデプロイを防げます。

# アプリケーションコード（src/）に変更がある場合のみデプロイ
vercel deploy --if="src/**/*.{ts,tsx,js,jsx}"

# 設定ファイルまたはパッケージが更新された場合のみ
vercel deploy --prod --if="package.json,pnpm-lock.yaml,next.config.js"

グロブパターンは内部的にmicromatchを使用しており、以下のような複雑な条件も指定できます。

# docs/とtests/を除く全ファイルの変更時にデプロイ
vercel deploy --if="!(docs|tests)/**"

# TypeScript・JSファイルまたはCSSファイルの変更時のみ
vercel deploy --if="**/*.{ts,tsx,js,jsx,css}"

GitHub Actionsでの条件付きデプロイ実装例

以下は、変更されたファイルパスを取得し、条件に応じてデプロイする実装例です。

name: Conditional Deploy
on:
  push:
    branches: [main, develop]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2  # 差分検出のため直前のコミットも取得
      
      - name: Get changed files
        id: changed-files
        uses: tj-actions/changed-files@v42
        with:
          files: |
            src/**
            app/**
            pages/**
      
      - name: Deploy if app files changed
        if: steps.changed-files.outputs.any_changed == 'true'
        run: |
          npm install -g vercel@1.40
          vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}

この設定により、src/、app/、pages/ディレクトリに変更がある場合のみデプロイが実行されます。ドキュメント更新（docs/）やCI設定変更（.github/）ではデプロイされません。

Speed Insights連携｜デプロイ直後にパフォーマンスを検証

CLIからのSpeed Insightsデータ取得

v1.40では、vercel insightsコマンドを使ってSpeed InsightsのCore Web Vitalsデータを取得できます。これにより、デプロイ後すぐにパフォーマンス劣化を検知できます。

# 最新デプロイのSpeed Insightsを表示
vercel insights --deployment latest

# 出力例:
# Deployment: https://myapp-abc123.vercel.app
# Period: Last 24 hours
# 
# Core Web Vitals:
# LCP (Largest Contentful Paint): 1.8s (Good)
# FID (First Input Delay): 45ms (Good)
# CLS (Cumulative Layout Shift): 0.05 (Good)
# 
# Real User Metrics (RUM):
# Total page views: 1,247
# p75 LCP: 2.1s
# p75 FID: 78ms
# p75 CLS: 0.08

CI/CDでのパフォーマンスゲート実装

以下は、デプロイ後にSpeed Insightsを確認し、LCPが2.5秒を超える場合は本番昇格をブロックする実装例です。

name: Deploy with Performance Gate
on:
  push:
    branches: [main]

jobs:
  deploy-and-verify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Deploy to Preview
        id: deploy
        run: |
          npm install -g vercel@1.40
          DEPLOYMENT_URL=$(vercel deploy --token=${{ secrets.VERCEL_TOKEN }} | tail -n1)
          echo "url=$DEPLOYMENT_URL" >> $GITHUB_OUTPUT
      
      - name: Wait for Speed Insights data
        run: sleep 60  # データ収集まで待機
      
      - name: Check Performance
        id: insights
        run: |
          INSIGHTS=$(vercel insights --deployment ${{ steps.deploy.outputs.url }} --token=${{ secrets.VERCEL_TOKEN }} --json)
          LCP=$(echo $INSIGHTS | jq -r '.lcp.p75')
          echo "lcp=$LCP" >> $GITHUB_OUTPUT
          
          # LCPが2.5秒を超える場合は失敗
          if (( $(echo "$LCP > 2.5" | bc -l) )); then
            echo "❌ LCP ($LCP s) exceeds threshold (2.5s)"
            exit 1
          fi
      
      - name: Promote to Production
        if: success()
        run: vercel promote ${{ steps.deploy.outputs.url }} --token=${{ secrets.VERCEL_TOKEN }}

注意: Speed Insightsのデータ収集には数分かかる場合があります。実際の運用では、sleepの代わりにポーリング処理を実装することを推奨します。

以下は、Speed Insightsを使ったデプロイ後の検証フローです。

sequenceDiagram
    participant Dev as 開発者
    participant GHA as GitHub Actions
    participant Vercel as Vercel Platform
    participant SI as Speed Insights

    Dev->>GHA: git push (main)
    GHA->>Vercel: vercel deploy
    Vercel-->>GHA: デプロイURL返却
    GHA->>SI: vercel insights --deployment latest
    SI-->>GHA: Core Web Vitals取得
    
    alt LCP < 2.5s
        GHA->>Vercel: vercel promote（本番昇格）
        GHA->>Dev: ✅ デプロイ成功
    else LCP >= 2.5s
        GHA->>Dev: ❌ パフォーマンス基準未達<br/>（本番昇格ブロック）
    end

Speed Insights連携フロー。LCPが基準を満たさない場合は自動的に本番昇格をブロックし、パフォーマンス劣化を防ぎます。

実務で使えるVercel CLIワークフロー事例

事例1: モノレポでの環境別デプロイ自動化

Turborepo や pnpm workspaces を使ったモノレポ構成では、各アプリケーションごとに環境変数とデプロイ条件を分ける必要があります。

# apps/web の変更時のみ web アプリをデプロイ
vercel deploy --cwd=apps/web --if="apps/web/**" --token=$VERCEL_TOKEN

# apps/admin の変更時のみ admin アプリをデプロイ
vercel deploy --cwd=apps/admin --if="apps/admin/**" --token=$VERCEL_TOKEN

GitHub Actionsでは、pathsフィルタと組み合わせることで効率化できます。

on:
  push:
    paths:
      - 'apps/web/**'
      - 'packages/**'

jobs:
  deploy-web:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: vercel deploy --cwd=apps/web --prod --token=${{ secrets.VERCEL_TOKEN }}

事例2: 機能フラグと環境変数の動的切り替え

v1.40では、デプロイ時に環境変数を動的に上書きできます。これにより、同じコードベースで機能フラグの有効/無効を切り替えたプレビュー環境を作成できます。

# 機能フラグを有効化したプレビューデプロイ
vercel deploy --build-env FEATURE_FLAG_NEW_UI=true --env FEATURE_FLAG_NEW_UI=true

# A/Bテスト用に異なるAPIエンドポイントを使用
vercel deploy --env API_ENDPOINT=https://api-beta.example.com

Vercel CLI v1.40 の導入手順とアップグレード方法

新規インストール

# npm でグローバルインストール
npm install -g vercel@1.40

# pnpm を使用する場合
pnpm add -g vercel@1.40

# バージョン確認
vercel --version
# → Vercel CLI 1.40.0

既存プロジェクトのアップグレード

既にVercel CLIを使用している場合は、以下の手順でアップグレードしてください。

# 現在のバージョン確認
vercel --version

# 最新版へアップグレード
npm update -g vercel

# または pnpm の場合
pnpm update -g vercel

# アップグレード後の動作確認
vercel env pull --all

破壊的変更の確認: v1.40では、vercel env pullのデフォルト動作が変更され、--environmentフラグを指定しない場合は全環境の変数を取得するようになりました。既存のCI/CDスクリプトで--environmentを明示的に指定していない場合は、動作を確認してください。

まとめ

Vercel CLI v1.40（2026年3月リリース）の主要な改善点は以下の通りです。

  • 環境変数管理の効率化: vercel env pull --allで全環境の変数を一括取得、vercel env diffで環境間の差分を即座に確認
  • 条件付きデプロイ: --ifフラグにより、特定のファイル変更時のみデプロイを実行し、ビルド時間とコストを削減
  • Speed Insights連携: vercel insightsコマンドでCLIからCore Web Vitalsを確認し、パフォーマンスゲートを実装可能
  • CI/CD統合の強化: GitHub Actionsと組み合わせることで、デプロイ前の環境変数同期・条件付きデプロイ・パフォーマンス検証を自動化

これらの新機能を活用することで、フロントエンド開発のデプロイワークフローをより堅牢かつ効率的にできます。特に、Speed Insightsとの連携により、パフォーマンス劣化を本番環境へリリース前に検知できる点は、ユーザー体験の維持に大きく貢献します。

参考リンク

#Vercel #CI/CD #デプロイ自動化 #環境変数 #Speed Insights
シェア:

関連記事

ツール比較

Cursor Composer でマルチファイルリファクタリングを一括実行する手順【実践】

ツール比較

Cursor IDE Composer モード 使い方【2026年4月最新】マルチファイル編集で開発効率5倍

ツール比較

Claude Code による Web制作プロジェクト管理｜ファイル操作・リファクタリング・デバッグの実践テクニック【2026年4月】

← 記事一覧に戻る