Vercelデプロイ時だけ403エラー？ ローカルでは動くヘッドレスWPの謎

Next.jsやNuxt.jsとWordPressを組み合わせた「ヘッドレスCMS」構成は、現代のWeb制作において非常に強力な選択肢です。しかし、開発が順調に進み、いざVercelにデプロイした瞬間、次のようなエラーに遭遇することがあります。

API Error: 403 Forbidden at https://wp.example.com/wp-json/wp/v2/posts
Failed to get all post slugs: Error: Failed to fetch API (403): Forbidden
        

ローカル環境（localhost）で開発している際は、本番のWordPress（例: Xserverでホスティング）から問題なく記事データを取得できていたにもかかわらず、Vercelの本番環境やプレビュー環境でのみ、APIアクセスが403 Forbiddenエラーになってしまう。

この「ローカルOK、Vercel NG」の状況は、多くの開発者が一度は直面する典型的な問題です。

ビルドログに並ぶ「403 Forbidden」。原因はVercelではなくXserverにあります

この問題に直面すると、「Vercel側の環境変数が間違っているのか？」「Next.jsのfetchコードに問題が？」と、VercelやNext.jsのコード側を疑ってしまいがちです。

しかし、Vercelのビルドログ（Deploy Logs）を詳しく見てみると、以下のような記述が見つかることがあります。

Running build in Washington, D.C., USA (East) – iad1

これが最大のヒントです。Vercelのビルドは、あなたのローカルマシン（日本）ではなく、アメリカ（iad1）など、海外のデータセンターで実行されています。

そして、この「国外IPアドレス」からのアクセスこそが、Xserverのセキュリティ機能によってブロックされている根本的な原因なのです。

解決策はXserverの2大セキュリティ設定の見直し

VercelからのAPIアクセスを許可し、403エラーを解決するためには、WordPressが稼働しているXserver側の設定を見直す必要があります。確認すべきは主に以下の2点です。

[最重要] 解決策①：Vercelの国外IPを許可する「国外IPアクセス制限」設定

最も可能性が高い原因がこれです。Xserverは、WordPressのセキュリティを強化するために、管理画面（/wp-admin/）やREST API（/wp-json/）など、重要なパスへの国外IPアドレスからのアクセスをデフォルトで制限（ブロック）していることがあります。

ローカル環境（日本のIP）からは許可されますが、Vercelのビルドサーバー（国外のIP）からはブロックされるため、前述した「ローカルOK、Vercel NG」という状況が生まれます。

VercelのビルドサーバーのIPアドレスは動的で固定されていないため、特定のIPをホワイトリストに追加する方法では解決できません。REST APIへの国外アクセス制限自体を緩和する必要があります。

解決策②：誤検知の可能性「WAF設定」の確認

もし国外IPアクセス制限を解除しても改善しない場合、次に疑うべきはWAF（Web Application Firewall）です。

WAFは、SQLインジェクションやクロスサイトスクリプティング（XSS）などの攻撃パターンを検知して通信を遮断するセキュリティ機能です。Next.jsがSSG（Static Site Generation）やISR（Incremental Static Regeneration）のためにgetStaticPathsなどで全記事のデータを取得しようとすると、短時間に大量のAPIリクエストが発生することがあります。

この挙動が、WAFによって「不正なスキャン行為」や「攻撃の兆候」と誤検知され、VercelのIPが一時的または恒久的にブロック（403応答）されてしまうケースがあります。

なぜこのエラーが起きるのか？ VercelとXserverの仕組み

この問題の背景にある、VercelとXserverの技術的な仕様を整理しましょう。

Vercelのビルドサーバーは「国外」にある

Vercelはグローバルなインフラを持っており、デプロイ（ビルド）は世界中のリージョン（例: アメリカ東部、ヨーロッパ）で実行されます。ログにiad1（ワシントンD.C.）とあるように、日本国外からWordPressのAPIにアクセスを試みます。

Xserverはデフォルトで「国外」からのAPIアクセスをブロックする

Xserverは、WordPressサイトを運用する上で非常に強力なセキュリティ機能を提供しています。その一つが「国外IPアクセス制限」です。多くの不正アクセスや攻撃は海外のサーバーを経由して行われるため、特にログイン画面やAPIエンドポイントへの国外アクセスを標準で遮断することは、セキュリティ対策として非常に有効です。

しかし、VercelのようなモダンなCI/CDプラットフォームと連携する場合、この防御機能が逆にビルドを妨げる要因となってしまうのです。

3分で解決！具体的な設定変更の手順

原因がわかれば対処は簡単です。ここでは、最も可能性の高い「国外IPアクセス制限」を解除する手順を解説します。

ステップ1：Xserverサーバーパネルにログイン

まず、WordPressが稼働しているサーバーの「サーバーパネル」にログインします。

ステップ2：「国外IPアクセス制限設定」の変更

サーバーパネル内のメニューから、[セキュリティ] カテゴリにある [国外IPアクセス制限設定] をクリックします。

対象のドメインを選択し、設定画面を開くと、以下のような項目があります。

ダッシュボード（/wp-admin/）アクセス

ON（制限する） ※これはセキュリティのためONのままを推奨します

XML-RPC API（/xmlrpc.php）アクセス

ON（制限する） ※これはセキュリティのためONのままを推奨します

REST API（/wp-json/）アクセス

ON（制限する） ← これが原因です

この「REST API（/wp-json/）アクセス」の設定を、「ON（制限する）」から「OFF（制限しない）」に変更し、[設定する] ボタンをクリックします。

注意: この設定を変更すると、世界中のどのIPからでも /wp-json/ エンドポイントへのアクセスが可能になります。APIキーや認証（例: JWT）などを導入せず、公開情報のみを取得するREST APIとして利用している場合は問題ありませんが、認証が必要な操作をAPI経由で行っている場合は、リスクを理解した上で設定してください。（ただし、Vercelのビルド時に必要なのは基本的に記事データの取得＝公開情報の読み取りのみであるため、多くの場合問題ありません）

ステップ3：Vercelで再デプロイ

Xserverの設定が反映されるまで数分待った後、Vercelのダッシュボードに戻り、対象プロジェクトの[Deployments]タブから、失敗したデプロイを選択し、[Redeploy]（再デプロイ）を実行します。

今度はビルドサーバー（国外IP）からXserverのREST APIへのアクセスが許可されるため、fetchが成功し、正常にビルドが完了するはずです。

もしこれでも解決しない場合は、ステップ2の代わりに「WAF設定」を見直し、VercelからのアクセスがWAFログでブロックされていないか確認し、必要に応じてWAFのルールを除外してください。

ヘッドレスCMS構築でお困りですか？

Vercel + Next.js + ヘッドレスWordPressの構成は、高速かつセキュアなWebサイトを実現する強力なアーキテクチャです。しかし、今回のようなホスティング特有の問題や、最適なビルド設定など、つまずきやすいポイントも存在します。

当社では、モダンなフロントエンド技術とCMSを組み合わせた開発を得意としております。Webサイトのパフォーマンス改善や、ヘッドレスCMSの導入に関するご相談がございましたら、お気軽にお問い合わせください。