Vercelとは？作ったWebサイトを公開して確かめる場所
コードを、使えるWebサイトにする
Vercelは、Webサイトやアプリをインターネット上で動かし、利用者へ届けるためのプラットフォームです。コードを公開できる形に組み立てる処理を「ビルド」、その成果を動かせる場所へ配置することを「デプロイ」と呼びます。コードが手元で動くことと、公開サイトで正しく動くことは別です。Vercelではデプロイの状態やログを見ながら、その違いを確認できます。
GitHubと組み合わせる仕組み
よく使われる流れは、GitHubのリポジトリをVercelのプロジェクトに接続する方法です。設定に応じてコードの変更をきっかけにビルドとデプロイが実行されます。GitHubが変更を記録し、Vercelがサイトを届けるという役割分担です。データベースやログイン機能は別の仕組みと組み合わせる場合があり、Vercelへ載せるだけで業務アプリの機能が全て揃うわけではありません。
試す環境と本番を分ける
修正を確認するためのPreviewと、利用者が見るProductionを区別しましょう。PreviewのURLでは、文章、画像、リンク、スマホ表示を先に確かめられます。ただしPreviewが必ず自分だけに見えるとは限りません。保護設定や共有範囲を確認し、顧客情報を試験データとして置かないことが大切です。画面の確認を終えてから、どの変更を本番へ反映するか判断します。
- GitHub：変更を記録
- Vercel：ビルド
- Preview：表示を確認
- 確認後に本番反映を判断
最初の公開で確認すること
練習用の小さなサイトを用意し、対象リポジトリと作業場所を選び、利用しているフレームワークとビルド設定を確認します。必要な設定値を登録してデプロイし、発行されたURLを開きます。成功表示だけで終わらず、トップから別ページへ進む、検索する、戻る、スマホ幅で読む、といった操作を試しましょう。失敗した場合はログのエラーを確認し、原因を絞って直します。確認用には「トップを開く」「記事へ進む」「戻る」のような短いチェックリストを作っておくと便利です。修正した箇所だけでなく、その前後の操作も試します。どの変更に対応するURLを見ているのかを記録し、古いプレビューを見て確認済みとしないようにしましょう。
設定値と公開の安全を守る
環境変数は、接続先や鍵などの設定をコードと分けて渡す方法です。ただし「環境変数だから秘密」とは限りません。Next.jsのNEXT_PUBLIC_付きの値はブラウザーへ渡されるため、秘密のキーには付けません。Previewと本番で接続先を分け、料金・利用量・公開範囲も確認します。最初の一歩は、変更を本番へ直行させず、確認用URLで一つの操作を最後まで試すことです。