2026年5月22日

Vercelでフロントエンドをデプロイする方法：Git連携・環境変数・独自ドメインとWordPress連携の再生成

VPS・クラウド

Vercel へのデプロイは、GitHub などのリポジトリをプロジェクトとして取り込むだけで始められます。以後はブランチに push するたびにプレビュー用の URL が作られ、本番ブランチへのマージで本番に反映されます。この記事では、Git 連携と CLI の2通りのデプロイ方法、環境変数の扱い、独自ドメインの設定、ビルドが失敗したときの読み方、そして WordPress をヘッドレス CMS として使う場合に、記事の更新をフロントエンドへ反映させる仕組みまでを説明します。

デプロイの流れを先に押さえる

Vercel のデプロイは、次の3つの環境で考えると整理できます。

Production（本番）: 本番ブランチ（通常は main）の最新のコミットが反映される環境です。独自ドメインはここに向けます。
Preview（プレビュー）: 本番以外のブランチへの push やプルリクエストごとに作られる環境です。デプロイごとに別の URL が発行されるので、変更をレビューしてからマージできます。
Development（開発）: 手元の PC で動かすときの環境です。vercel env pull で環境変数を取得するときに使います。

環境変数はこの3つの環境ごとに別の値を設定できます。本番の API キーをプレビューに渡さない、といった使い分けができる点が要点です。

方法1: Git 連携でデプロイする

チームで開発しているなら、Git 連携が基本です。

Vercel にログインし、新しいプロジェクトの作成画面からリポジトリを選んで取り込みます。GitHub・GitLab・Bitbucket に対応しています。
フレームワークは多くの場合自動で判別され、ビルドコマンドと出力先が設定されます。Next.js ならそのまま、Vite なら出力先が dist になっているかを確かめます。
モノレポで、フロントエンドがサブディレクトリにある場合は、ルートディレクトリの設定でそのディレクトリを指定します。
ビルドに必要な環境変数を入力してからデプロイします。

画面の項目名は変わることがあります。ここでの説明は執筆時点（2026年10月現在）のもので、表記が異なる場合は何を設定する項目かで読み替えてください。

デプロイが終わると、プロジェクト名.vercel.app の形の URL で公開されます。以後は push するだけで自動的にデプロイされます。

方法2: CLI でデプロイする

Git を使わずに試したい場合や、CI から操作したい場合は Vercel CLI を使います。

npm i -g vercel
vercel login

# プロジェクトのディレクトリで実行。初回はプロジェクトとの紐付けを対話で行う
cd my-frontend
vercel          # プレビュー環境へデプロイ
vercel --prod   # 本番環境へデプロイ

# ダッシュボードで設定した環境変数を手元に取得
vercel env pull .env.local

vercel env pull で作られる .env.local には秘密の値も含まれます。.gitignore に入っていることを確かめ、リポジトリに入れないでください。

環境変数で失敗しないために

フロントエンドの環境変数でいちばん多い事故は、ブラウザーに公開される変数に秘密の値を入れてしまう ことです。

Next.js では、NEXT_PUBLIC_ で始まる変数がビルド時にブラウザー向けのコードへ埋め込まれます。
Vite では、VITE_ で始まる変数が同じ扱いです。

この接頭辞を付けた変数は、ページを開いた人がだれでも読めます。API の秘密鍵や WordPress のアプリケーションパスワードは接頭辞なしの変数にし、サーバー側の処理（Next.js のサーバーコンポーネントや Route Handler）からだけ使います。

もう1つの注意点は、環境変数を変えても、既存のデプロイには反映されない ことです。ビルド時に埋め込まれる値は、次のデプロイで初めて変わります。値を変えたら再デプロイしてください。

SPA のルーティング設定

Vite などで作った SPA（シングルページアプリケーション）では、/about のような URL を直接開くと 404 になることがあります。サーバーに about というファイルがないためです。すべてのパスを index.html に返すよう、プロジェクトのルートに vercel.json を置きます。

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Next.js はこの設定なしでルーティングを処理するので、vercel.json は不要です。

独自ドメインを設定する

プロジェクトの設定からドメインを追加すると、DNS に設定すべきレコードが表示されます。

www.example.com のようなサブドメインは、CNAME レコードで Vercel が指定する値に向けます。
example.com のようなルートドメイン（apex）は CNAME を置けないことが多いので、A レコードで Vercel が指定する IP アドレスに向けます。

指定される値は変わることがあり、プロジェクトごとに異なる値が表示される場合もあるので、他のサイトの解説にある値を写さず、管理画面に表示された値を使ってください。DNS が反映されると、HTTPS の証明書は自動で発行されます。

メールを受けているドメインでは、MX レコードなど既存のレコードを消さないように注意します。ネームサーバーごと Vercel に移す方法もありますが、既存のレコードを移し忘れるとメールが止まるので、まずはレコードの追加だけで済ませるほうが安全です。

ビルドが失敗したときの読み方

失敗したデプロイを開き、ビルドログを最後から読みます。最初に出ている赤いエラーより、最後に出ているエラーと、その直前の数行 に原因が書かれていることが多いためです。よくある原因は次のとおりです。

手元では動くのに Vercel で失敗する: 多くはファイル名の大文字・小文字です。macOS や Windows は区別しませんが、ビルド環境の Linux は区別するため、import Header from './header' と書いて実際のファイルが Header.tsx だと失敗します。
依存パッケージのインストールで失敗する: ロックファイル（package-lock.json や pnpm-lock.yaml）がコミットされているか、package.json と食い違っていないかを確かめます。
Node.js のバージョン違い: プロジェクト設定か、package.json の engines.node で手元と同じメジャーバージョンを指定します。
環境変数が見つからない: ビルド時に API へアクセスする作りで、変数がその環境（Production か Preview か）に設定されていないと失敗します。

WordPress をヘッドレス CMS にする場合

WordPress の REST API から記事を取得して表示するなら、Next.js の App Router では取得結果を一定時間キャッシュし、記事が更新されたら作り直す構成にできます。Next.js はバージョンによってキャッシュの既定の動きが変わってきたので、使っている版のドキュメントを確認したうえで、キャッシュの時間を明示しておくと挙動が読みやすくなります。

// app/blog/[slug]/page.tsx の一部
const res = await fetch(
  `${process.env.WP_API_URL}/wp-json/wp/v2/posts?slug=${encodeURIComponent(slug)}&_fields=id,title,content,date`,
  { next: { revalidate: 300 } } // 300秒ごとに再取得
);

記事を公開したらすぐ反映させたい場合は、WordPress 側から Vercel 上のエンドポイントを呼んで、ページを作り直させます。Vercel 側の受け口は、秘密の値で呼び出し元を確かめます。

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const secret = request.headers.get('x-revalidate-secret');
  if (!process.env.REVALIDATE_SECRET || secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
  }
  const body = await request.json().catch(() => ({}));
  const slug = typeof body.slug === 'string' ? body.slug : '';
  // 想定外の文字を含むスラッグは受け付けない
  if (/^[a-z0-9-]+$/.test(slug)) {
    revalidatePath(`/blog/${slug}`);
  }
  revalidatePath('/blog');
  return NextResponse.json({ revalidated: true });
}

WordPress 側は、wp-content/mu-plugins/ に次のファイルを置きます。送信先と秘密の値は wp-config.php に定数で書き、コードやリポジトリには含めません。

<?php
/**
 * Plugin Name: Vercel Revalidate
 * Description: 投稿の公開・更新時に Vercel のページ再生成を依頼する。
 */

// wp-config.php に次の2行を追加しておく（値は自分のものに置き換える）
// define( 'VERCEL_REVALIDATE_URL', 'https://your-project.vercel.app/api/revalidate' );
// define( 'VERCEL_REVALIDATE_SECRET', 'your-random-secret' );

add_action( 'transition_post_status', function ( $new_status, $old_status, $post ) {
	if ( 'post' !== $post->post_type ) {
		return;
	}
	// 公開した・公開中の記事を更新した・公開をやめた、のときだけ送る
	if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
		return;
	}
	if ( wp_is_post_revision( $post ) || wp_is_post_autosave( $post ) ) {
		return;
	}
	if ( ! defined( 'VERCEL_REVALIDATE_URL' ) || ! defined( 'VERCEL_REVALIDATE_SECRET' ) ) {
		return;
	}

	wp_remote_post(
		VERCEL_REVALIDATE_URL,
		array(
			'timeout'  => 5,
			'blocking' => false, // 投稿の保存を待たせない
			'headers'  => array(
				'Content-Type'        => 'application/json',
				'x-revalidate-secret' => VERCEL_REVALIDATE_SECRET,
			),
			// ゴミ箱に移すとスラッグの末尾に __trashed が付くので外して送る
			'body'     => wp_json_encode( array( 'slug' => preg_replace( '/__trashed$/', '', $post->post_name ) ) ),
		)
	);
}, 10, 3 );

Vercel 側にも同じ値を REVALIDATE_SECRET として Production 環境に登録します（vercel env add REVALIDATE_SECRET production）。ブロックエディターでは1回の保存で通知が2回届くことがありますが、再生成が重なるだけで害はありません。日本語のスラッグを使っている場合は、受け口の文字の制限に合わせて扱いを変えてください。

まずはステージング環境の WordPress とプレビュー環境で試し、記事を更新してから数秒後にページが変わることを確かめてから本番に設定します。

使う前に確かめておくこと

利用条件: 個人向けの Hobby プランは非商用の利用を前提とした条件になっています。業務のサイトに使う場合は、有料プランの条件を公式サイトで確かめてください。料金や条件は改定されます。
プレビュー URL の公開範囲: プレビューのデプロイには保護の設定があり、既定の範囲はプランや設定で異なります。社外に見せたくない変更は、保護が有効になっているかを確かめます。
関数の実行リージョン: サーバー側の処理が動くリージョンは設定で変えられます。WordPress が国内のサーバーにあるなら、近いリージョンにすると API の応答待ちが短くなります。

まとめ

本番・プレビュー・開発の3環境で考える。プレビューは push ごとに別の URL で作られる。
方法は Git 連携が基本。試すときや CI からは CLI の vercel と vercel --prod。
NEXT_PUBLIC_ や VITE_ の付いた変数はだれでも読める。秘密の値に使わない。値を変えたら再デプロイ。
SPA は vercel.json の rewrites で 404 を防ぐ。独自ドメインは管理画面に表示された値を DNS に設定する。
ビルド失敗はログの最後から読み、大文字・小文字、ロックファイル、Node.js のバージョン、環境変数の順に確かめる。
WordPress 連携では、一定時間のキャッシュと、公開時の再生成依頼を組み合わせる。秘密の値は wp-config.php の定数に置く。