2026年9月16日

WordPressのVercelでデプロイする方法

テーマ・デザイン

はじめに

この記事では、WordPressのウェブサイトをVercelでデプロイする方法について紹介します。これにより、従来のPHPインストール不要の静的ウェブサイトとして動作させることができます。高度なパフォーマンスとセキュリティを提供し、モダンな開発フローを実現します。

症状・背景

このテーマが必要になる主な場面:

パフォーマンス最適化のニーズがある
セキュリティ強化を望んでいる
CI/CDワークフローを構築したい
WordPressのウェブサイトを静的サイトとしてホストしたい

手順・設定方法

ステップ1: VercelアカウントとGitリポジトリの準備

# GitHubアカウントにログインし、新しいリポジトリを作成します。
git clone https://github.com/yourusername/wp-vercel.git

# ローカルにクローンしたディレクトリへ移動します。
cd wp-vercel

ステップ2: WordPressを静的サイトジェネレーターとして設定

# WP-CLIをインストールまたはアップデートします。
composer global require wp-cli/wp-cli

# WordPressの静的サイト生成スクリプトをインストールします。
wp plugin install --activate wp-static-site-generator

ステップ3: Vercelプロジェクトの作成と設定ファイルの更新

# Vercel CLIをインストールまたはログインします。
npm install -g vercel

# 既存のGitリポジトリにVercelプロジェクトを作成します。
vercel link

# `now.json`ファイル（Vercelでは`vercel.json`）を更新して、デプロイ設定を指定します。
{
  "version": 2,
  "builds": [
    {
      "src": "bin/build.js",
      "use": "@vercel/static-build"
    }
  ],
  "routes": [
    { "src": "/.*", "dest": "/index.html" }
  ]
}

ステップ4: 静的サイトを生成し、Vercelにデプロイ

# WordPressの静的サイトを生成します。
wp static generate

# Vercelに静的ファイルをデプロイします。
vercel deploy --pre

注意事項

WordPressのプラグインとテーマ: 全てのプラグインやテーマが静的ウェブサイトとして動作するわけではないため、必要最小限のものだけを使用すること。
データベース接続: WordPressのバックエンドは依然として有効な状態であるため、適切にバックアップを取ること。
セキュリティ: スタティックファイルへの直接アクセスを許可しないように、適切な権限設定を行うこと。
パフォーマンス: 生成された静的サイトのサイズと数を最適化し、キャッシュ効果を最大化すること。

まとめ

1. VercelアカウントとGitリポジトリの準備: デプロイするWordPressのウェブサイト用に新しいGitリポジトリを作成します。

2. WordPressを静的サイトジェネレーターとして設定: WP-CLIを使用して必要なプラグインをインストールし、WP Static Site Generatorを有効化します。

3. Vercelプロジェクトの作成と設定ファイルの更新: Vercel CLIを使って新しいプロジェクトを作り、適切な構築とルーティング設定を行います。

4. 静的サイトを生成し、Vercelにデプロイ: WordPressが生成した静的ウェブページをVercelにアップロードします。

5. 注意事項: デプロイ前にプラグインやテーマの利用範囲とデータベース接続の確認を行います。

Post Views: 10