プレビュー確認とPRマージ — 安全に本番デプロイする流れ

はじめに

「変更したけど、いきなり本番に出すのは怖い」——そう感じるのは自然なことです。Vercelのプレビュー機能を使えば、本番環境に反映する前に実際の動作を確認できます。

この記事では、プレビュー環境での確認から、Pull Request（PR）を作成して本番にマージするまでの流れをご紹介します。

プレビュー環境とは

Vercelでは、mainブランチ以外にプッシュすると、自動的にプレビュー（ステージング）環境が作成されます。

プレビュー環境は、本番とは別のURLで公開されます。このURLで実際の表示や動作を確認できます。

確認から本番反映までの流れ

プレビューURLの確認方法

Vercelダッシュボードから

Vercelのダッシュボードにログインすると、デプロイの一覧が表示されます。各デプロイの横にある「Visit」ボタンでプレビューURLを開けます。

GitHub PRから

PRを作成すると、VercelのボットがコメントでプレビューURLを教えてくれます。これはチームで作業するときに特に便利です。

Claude Codeに聞く

「今のブランチのプレビューURLを教えて」と聞くと、Vercelのプロジェクト設定から推測して教えてくれることもあります。

Pull Request（PR）の作成

プレビューで問題がないことを確認したら、PRを作成します。

PRとは

Pull Requestは、「このブランチの変更をmainに取り込んでほしい」というリクエストです。変更内容を一覧で確認でき、コメントでやり取りすることもできます。

Claude CodeでPRを作成

Claude Codeに指示してPRを作成することもできます。

GitHubでPull Requestを作成してください。
タイトルは「会社概要ページの追加」で、
説明には変更内容の概要を書いてください。

Claude Codeがghコマンド（GitHub CLI）を使ってPRを作成してくれます。

GitHub WebサイトでPRを作成

GitHubのWebサイトからも作成できます。

1. リポジトリページを開く
2. 「Pull requests」タブを選択
3. 「New pull request」ボタンをクリック
4. ベースブランチ（main）と比較ブランチを選択
5. 「Create pull request」ボタンをクリック

マージの実行

PRの内容に問題がなければ、マージを実行します。

GitHub Webサイトで

PRのページで「Merge pull request」ボタンをクリックするだけです。

Claude Codeで

「このPRをマージして」と指示すれば、Claude Codeが対応してくれます。

マージ後の動作

mainブランチにマージされると、Vercelが自動的に本番環境へデプロイを開始します。

通常、数十秒〜数分で本番サイトに反映されます。

確認時のチェックポイント

プレビュー環境で確認するときは、以下の点をチェックすると良いでしょう。

表示の確認

• レイアウトが崩れていないか
• 画像が表示されているか
• テキストに誤字脱字がないか

動作の確認

• リンクが正しく機能するか
• フォームが送信できるか（テスト送信）
• ボタンやインタラクションが動くか

複数デバイスでの確認

• PC（デスクトップ）での表示
• スマホでの表示
• タブレットでの表示（必要に応じて）

問題があった場合

プレビューで問題を見つけた場合は、同じブランチで修正してプッシュすれば、プレビュー環境も自動で更新されます。

この問題を見つけました：〇〇
修正してプッシュしてください

修正 → プッシュ → プレビュー確認 → 問題なければマージ、という流れを繰り返します。

まとめ

• プレビュー環境で本番反映前に確認できる
• PRを使うと、変更内容を整理して管理できる
• マージ後は自動デプロイ、手動作業は不要
• 問題があれば修正してプッシュ、プレビューも自動更新

「確認してからマージ」という流れを身につけると、本番環境を壊すリスクを大幅に減らせます。最初は面倒に感じるかもしれませんが、慣れるとこの安心感が手放せなくなります。