【脱レンタルサーバー】WordpressのブログをVercel（Astro）に完全移行した話
さくらのレンタルサーバーを解約し、ドメイン管理だけ残してVercelに移行する手順。DNS設定のハマりポイントやリダイレクト設定についてまとめました。
はじめに#
これまでさくらインターネットのレンタルサーバーを借りてWordpressでブログを運営してきましたが、 自分のブログではそこまでの環境が必要ないためサーバー代節約も兼ねて、ブログをAstroで作り直しホスティング先をVercelに変更することにしました。
最終的なゴールは以下の通りです。
- ブログ: VercelにAstroで新ブログサイトを構築
- 転送設定: 旧URL
https://muaaru.com?p=914にアクセスしたら、新URLhttps://muaaru.com/blog/2025-08-24-post-914に自動転送 - サーバー契約: さくらのレンタルサーバーは解約し、ドメイン管理のみにする
移行の全体像#
WordPress（さくらレンタルサーバー）からVercelへの移行作業の流れを整理すると、以下のようになります。 大きく分けて「データ抽出」「ローカル開発」「デプロイ」「DNS切り替え」の4フェーズです。
%%{init: {
'theme': 'base',
'themeVariables': {
'actorBkg': '#444444',
'actorTextColor': '#ffffff',
'actorBorder': '#666666',
'signalColor': '#0066ff',
'signalTextColor': '#666666',
'actorLineColor': '#999999',
'noteBkgColor': '#444444',
'noteTextColor': '#ffffff'
}
}}%%
sequenceDiagram
autonumber
actor User as あなた (管理者)
participant WP as WordPress<br>(旧サーバー)
participant Local as ローカル環境<br>(VS Code)
participant GitHub as GitHub
participant Vercel as Vercel<br>(新サーバー)
participant DNS as DNS設定<br>(さくら)
Note over User, WP: 1. データ準備
User->>WP: XMLエクスポート
WP-->>Local: 記事データ (XML)
Note over User, Local: 2. 開発・設定
User->>Local: 変換スクリプト実行
Local->>Local: vercel.json (リダイレクト設定) 生成
Local->>Local: astro build (動作確認)
Note over User, Vercel: 3. 公開・切り替え
User->>GitHub: git push
GitHub->>Vercel: デプロイ開始
Vercel-->>Vercel: ビルド完了 (Ready)
User->>DNS: レコード変更 (A / CNAME)
DNS->>Vercel: ドメイン接続
Vercel-->>Vercel: SSL証明書 自動発行
Note over User, Vercel: 4. 移行完了
- 各フェーズのポイント
- データ準備: まずはWordPress標準の「エクスポート」機能を使って、全記事データをXML形式でローカルにダウンロードします。
- 開発・設定: AIで作らせたスクリプトでXMLデータから旧サイトの画像ファイルをダウンロードして、記事全体をAstroで扱えるMarkdownに変換します。さらに、旧URLとはURLの構造が変わため、vercel.json にリダイレクトルールも作成しておきます。
- 公開・切り替え: GitHubにプッシュしてVercelへのデプロイが完了したら、最後にDNS設定を変更します。DNSが浸透し、Vercel側でドメイン接続が確認されると、SSL証明書（https）も自動で発行されます。
旧URLからのリダイレクトの仕組み#
WordPressからAstroへ移行すると、URLの構造が大きく変わります。
（例：https://muaaru.com?p=914 → https://muaaru.com/blog/2025-08-24-post-914）
古いリンクを踏んだユーザーも移行後のサイトで同じ記事が開けるように、Vercel側で「旧住所から新住所へ転送」する処理を行っています。 記事URLの転送の動きを図解すると以下のようになります。
%%{init: {
'theme': 'base',
'themeVariables': {
'actorBkg': '#444444',
'actorTextColor': '#ffffff',
'actorBorder': '#666666',
'signalColor': '#0066ff',
'signalTextColor': '#666666',
'actorLineColor': '#999999',
'noteBkgColor': '#444444',
'noteTextColor': '#ffffff'
}
}}%%
sequenceDiagram
autonumber
actor User as ユーザー (ブラウザ)
participant Vercel as Vercel サーバー
participant Config as vercel.json<br>(受付係)
participant Astro as Astro<br>(記事データ)
Note over User, Vercel: 1. 古いURLへのアクセス
User->>Vercel: GET https://muaaru.com/?p=914
activate Vercel
Vercel->>Config: 転送設定確認
Config-->>Vercel: 転送先は<br>"https://muaaru.com/blog/2025-08-24-post-914"
Vercel-->>User: HTTP 308 Permanent Redirect<br>(引越しました。新住所へ行って！)
deactivate Vercel
Note right of User: ブラウザが自動的に<br>新しいURLへ移動
Note over User, Vercel: 2. 新しいURLで再度アクセス (自動)
User->>Vercel: GET https://muaaru.com/blog/2025-08-24-post-914
activate Vercel
Vercel->>Config: 転送設定確認
Config-->>Vercel: 転送なし<br>そのままのアドレスで表示
Vercel->>Astro: 記事ファイルを取得
Astro-->>User: 記事ページを表示 (HTTP 200 OK)
deactivate Vercel
仕組みのポイント：vercel.json#
この「受付係」の役割を果たしているのが、プロジェクトルートに置いた vercel.json です。 Vercelの has プロパティ（クエリパラメータ判定） を利用して、WordPress特有のURLパラメータ（?p=数字）を、Astroの新しいパスに正確にマッピングしています。
実際の vercel.json の記述は以下の通りです。
{
"source": "/",
"has": [
{
"type": "query",
"key": "p",
"value": "914"
}
],
"destination": "/blog/2025-08-24-post-914",
"permanent": true
},正規表現などを使わずに type: “query” でキーと値を明示的に指定することで、誤作動を防ぎながら確実にリダイレクトさせています。これを記事数分だけ自動生成するスクリプトを書いて対応しました。 AIにテストコードを書かせて実行したところ一部記事のリダイレクトが上手く生成できていなかったので、そこだけは手動で修正しました。
ハマりポイント：さくらのサーバー側のドメイン設定ミス#
Vercel用のCNAMEを設定してもなぜか反映されず、さくらのエラーページが表示され続ける現象が発生しました。
原因はDNSレコードではなく、「レンタルサーバー・コントロールパネル」側でドメイン設定をしていたことでした。
ドメインのコントロールパネルからDNS設定（ゾーン編集）を変更しても、サーバーのコントロールパネルにある「ドメイン/SSL設定」に note.muaaru.com が登録されたままだと、そちらの設定が干渉してしまうようです。
サーバーコントロールパネルから対象ドメインを削除したところ、しばらくしてVercelへの接続が反映されました。
まとめ#
普段アプリ開発しかしてないのでWebサイトのDNSやらの設定は詳しくないんですが、AIに聞きながら簡単に移行ができました。 サーバー代がこれで無料になるので少し節約になりました。