[AI書房] 第15章 Vercelデプロイ: コードを世界に送り出す
Claude Code完全攻略
第4部
第15章 Vercelデプロイ: コードを世界に送り出す
金京鎮
Vercelとは何か:ワンクリックデプロイの概念
自分が作ったウェブサイトがスマホの画面に表示される瞬間の感覚は独特です。自分のパソコンのホスト上でのみ存在していたページが、カフェでコーヒーを飲みながら開いたモバイルブラウザにも同じように表示されるのです。その間にはいったい何が起こっているのでしょうか?
自分のパソコンのホスト(localhost)は、自分のパソコンからのみアクセスできるアドレスです。Claude Codeが開発サーバーを起動すると、localhost:3000やlocalhost:51006のようなアドレスが割り当てられますが、これらのアドレスは同じパソコンのブラウザでのみ開くことができます。他の人がこのアドレスを入力しても何も表示されません。ウェブサイトのコードが自分のパソコンのメモリ上でのみ実行されているためです。
このコードを世界に公開するには、24時間稼働するサーバーにコードをアップロードし、そのサーバーに固有のアドレスを接続する必要があります。従来、このプロセスにはサーバーのレンタル、オペレーティングシステムの設定、ウェブサーバーソフトウェアのインストール、SSL証明書の発行、ドメインの接続など、数十もの手順が必要でした。
Vercelは、この複雑なプロセスを一つのボタンクリックに圧縮したサービスです。GitHubリポジトリを選択して「Deploy」ボタンを押すと、Vercelがコードを取得して構築し、世界中に分散されたサーバーにデプロイし、自動的にHTTPS証明書を設定し、固有のURLを付与します。
Vercelの無料プランでも、個人プロジェクトやポートフォリオサイトを運営するには十分です。デプロイされたサイトには、プロジェクト名.vercel.appという形式のドメインが自動的に付与されます。このドメインでも誰でもアクセス可能ですが、独自のドメインを接続することも可能です。
ここで理解すべき核心は、Vercelが行うことは「コードを受け取ってウェブサイトとして構築すること」であるという点です。GitHubにコードがあり、Vercelにデプロイ設定があれば、両者を結ぶパイプラインが完成します。
GitHubリポジトリとVercelの接続
Vercelにサインアップする際、GitHubアカウントでログインすると、その後のすべての手順が簡潔になります。VercelがGitHubリポジトリの一覧に直接アクセスできるためです。
接続手順は以下の通りです。
Vercel ダッシュボードで「Add New Project」をクリックします。画面に自分の GitHub リポジトリ一覧が表示されますので、デプロイしたいリポジトリを見つけて「Import」ボタンをクリックします。構築設定画面が表示され、Next.js や React などのフレームワークが自動的に検出されます。「Deploy」ボタンをクリックすると、構築が開始されます。
数十秒から数分のうちに構築が完了し、固有の URL が生成されます。この URL をブラウザに入力すると、自分のウェブサイトが表示されます。スマートフォンからでも、他の国のコンピュータからでも、同じページが表示されます。
ただし、最初のデプロイで問題が発生する可能性があります。前章で取り上げたウェブサイトの事例を思い出してみましょう。Blender 製品のランディングページを Vercel にデプロイした際、スクロールアニメーションに使用されるフレーム画像ファイルが欠落していました。自分のコンピュータ上では完璧に動作していたサイトが、デプロイ後には Blender の画像が表示されず、テキストだけがぽつんと残ってしまいました。
その原因は .gitignore ファイルでした。画像フレームフォルダが Git の追跡対象から除外されていたため、GitHub へプッシュされず、Vercel もそのファイルを受け取れなかったのです。解決方法は簡単です。Claude Code に「フレーム画像も GitHub に含めて再度プッシュしてください」と依頼すれば、.gitignore の設定を修正し、欠落したファイルを追加コミットしてプッシュします。
この経験から得られる教訓があります。自分のコンピュータ環境とデプロイ環境は異なるのです。自分のコンピュータには存在しても、Git の追跡対象ではないファイルは、デプロイ環境には存在しません。デプロイ前に「自分のリポジトリにサイト稼働に必要なすべてのファイルが含まれているか?」を確認する習慣が必要です。
Vercel ダッシュボードの「Deployments」タブでは、すべてのデプロイ履歴を確認できます。問題のあるデプロイを以前のバージョンにロールバックすることも、ワンクリックで可能です。
リアルタイム反映パイプライン:コード変更が自動的に反映される仕組み
Vercel と GitHub の連携が完了すれば、その後は驚くほどスムーズなワークフローが自動的に作動します。
そのプロセスは以下の通りです。Claude Code でウェブサイトのコードを修正します。自分のコンピュータのホスト上で変更内容を確認し、気に入ったら「GitHub にプッシュしてください」と依頼します。GitHub に新しいコミットが到着すると、Vercel がその変更を自動的に検知します。新しいビルドが開始され、完了するとライブサイトが自動的に更新されます。
このパイプラインにおける重要な安全装置は「明示的なプッシュ」です。自分のコンピュータでどれだけ多くの修正を行っても、「GitHub にプッシュしてください」と言うまでは、ライブサイトに何の影響も及びません。これは意図的な設計です。
CLAUDE.md ファイルにこの原則を明記しておけば安全です。「変更点は GitHub に同期し、GitHub が自動的に Vercel にプッシュします。ただし、ローカルで変更する際は、必ずローカルホストで事前に検証し、明示的に GitHub にコミットするかプッシュするよう指示するまで、絶対にリモートに反映させないでください」という指示があれば、Claude Code が誤って作業中のコードをプッシュする事態を防ぐことができます。
リアルタイム反映の速さも印象的です。前述の事例でヒーローボタンにグロー効果を追加し、GitHub にプッシュすると、数分以内に Vercel のデプロイが完了し、ライブサイトをリフレッシュすると、グローボタンが表示されました。
GitHub のコミット履歴には「add glowing pulse effect to hero join the community button」というメッセージが残され、Vercel のデプロイ履歴にも対応するデプロイ記録が作成されました。
この構造により、事実上 3 つの環境が自然に構築されます。
開発環境(ローカルホスト):自由に修正し検証できる空間です。失敗しても何の影響もありません。
ステージング環境(GitHub):コードの変更履歴が記録される場所です。ここにアップロードされたコードは、整理された状態である必要があります。
プロダクション環境(Vercel リライブサイト):実際のユーザーがアクセスする場所です。GitHub から自動的にデプロイされます。
ドメイン接続と環境変数の設定
Vercel が自動的に付与する「プロジェクト名.vercel.app」ドメインは機能的には完全ですが、専門的な印象を与えるにはやや不足しています。独自のドメインを接続することで、サイトの信頼性が向上します。
ドメイン接続の手順は、Vercel のプロジェクト設定から始まります。「Settings」タブの「Domains」セクションへ移動します。ここでは2つの選択肢があります。Vercel 上で直接ドメインを購入するか、すでに保有しているドメインを追加するかです。
既存のドメインを接続するには、DNS 設定(Domain Name System configuration)を変更する必要があります。ドメインを購入したサービス(例:Gabia、Namecheap、Google Domains など)の管理パネルで、DNS レコードを Vercel が案内する値に変更します。Vercel の案内画面には、どのレコードをどの値に設定すべきかが具体的に示されているため、技術的な背景知識がなくても手順に従うことができます。
DNS の変更が反映されるまでには、数分から最大 48 時間かかる場合があります。多くの場合は 30 分以内に適用されますが、ドメインを接続した直後にアクセスできない場合でも、慌てる必要はありません。
環境変数(environment variable)の設定は、プロジェクトが外部サービスと連携する際に必要です。API キー、データベース接続文字列、認証モデルが生成するトークンなどの機密情報は、コードに直接記述せず、環境変数として分離して管理します。
Vercel のプロジェクト設定で「Environment Variables」セクションを見つけると、キーと値のペアを登録できます。例えば、「NEXT_PUBLIC_API_KEY」というキーに実際の API キーの値を入力します。この値は Vercel のサーバーにのみ保存され、GitHub リポジトリには含まれません。コード内では、process.env.NEXT_PUBLIC_API_KEY を用いてこの値を参照します。
環境変数を使用する理由はセキュリティです。GitHub リポジトリが公開されていても、API キーが漏洩することはありません。また、開発環境と本番環境で異なる値を使用することも可能です。例えば、ローカル環境では検証用の API キーを、本番環境では実際の API キーを使用するといった具合です。
環境変数を変更すると、Vercel が自動的に再デプロイを実行します。コードを変更していないのにサイトが再デプロイされる場合、環境変数の変更が原因となっている可能性があります。
サイトがライブ化され、ドメインも接続され、環境変数も設定されました。ブラウザにアドレスを入力すると、誰に対しても同じページが表示されます。しかし、デプロイはこれで終わりではありません。ライブサイトは時間が経つにつれて、新たな種類の問題に直面します。開発環境では見られなかった問題たちです。




