第24回｜Vercelでインターネットに公開しよう — 世界中からアクセスできる

このレッスンのゴール

VercelにTODOアプリをデプロイし、インターネット上で動作するURLを手に入れること。環境変数の設定がなぜ必要かを理解すること。

今日やること

前回、GitHubにコードを保存しました。今日は、そのコードを Vercel（バーセル） を使ってインターネットに公開します。

デプロイ（deploy）という言葉が出てきます。これは「配置する」「公開する」という意味です。アプリをインターネット上に置いて、誰でもアクセスできるようにする操作のことを「デプロイする」と言います。たとえるなら、自分の机の上にあった試作品を、お店のショーケースに並べる作業のようなものです。

公開が完了すると、https://my-todo-app-xxxx.vercel.app のようなURLが手に入ります。このURLを開けば、世界中のどこからでも皆さんのTODOアプリにアクセスできるようになります。

Vercelでプロジェクトを作る

1. Vercelダッシュボードにアクセス

Vercelダッシュボード

ブラウザで新しいタブを開いて、以下のURLをアドレスバーに入力し、Enterキーを押してください。

<https://vercel.com/dashboard>

ログイン画面が表示されたら、Vercelアカウントでログインしてください。第18回で作成したアカウントですね。GitHubアカウントでログインした方は、「Continue with GitHub」を左クリックすればOKです。

確認してみましょう

Vercelのダッシュボード（管理画面）が表示され、画面の上部に「Overview」のようなタブが見えていればOKです。

2. 新しいプロジェクトを追加

新しいプロジェクトを追加

ダッシュボードが表示されたら、画面の右上のほうにある 「Add New...」 ボタンを左クリックしてください。ドロップダウンメニュー（下に展開されるメニュー）が開くので、その中から 「Project」 を左クリックします。

3. GitHubリポジトリを選択

GitHubリポジトリを選択

次の画面で、GitHubとの連携を求められます。すでに連携済みの場合は、リポジトリの一覧が表示されます。

一覧の中から my-todo-app を見つけてください。見つけたら、その右側にある 「Import」 ボタンを左クリックします。

確認してみましょう

my-todo-app の横に「Import」ボタンが表示され、クリックすると設定画面に進めればOKです。

うまくいかないときは

my-todo-app が一覧に表示されない場合: 画面のどこかに「Adjust GitHub App Permissions」（GitHubアプリの権限を調整）のようなリンクがあるはずです。それを左クリックして、GitHubの設定画面でリポジトリへのアクセスを許可してください。許可後、Vercelの画面に戻って一覧を更新すると表示されます
GitHubとの連携がまだの場合: 「Connect GitHub Account」のようなボタンが表示されます。それを左クリックして、画面の指示に従ってGitHubアカウントとの連携を行ってください

環境変数を設定する — 今日いちばん大事なステップ

環境変数を設定する

Import画面に進むと、プロジェクトの設定画面が表示されます。

画面を少し下にスクロールすると、「Environment Variables」（エンバイロメント・バリアブルズ）というセクションが見つかります。日本語で言うと「環境変数」。今日いちばん大事なのがこのステップです。

なぜ環境変数が必要なのか

ここ、ちょっと大事なポイントなので丁寧に説明しますね。

前の回で、.env.local というファイルにSupabaseの接続情報を書きました。このファイルは自分のPCにだけあります（前回、GitHubにはアップロードしないようにしたのを覚えていますか？秘密の情報を守るためでしたね）。

Vercelのサーバーは、皆さんのPCではありません。インターネット上にある別のコンピューターです。だから、Vercelにも「Supabaseの接続先はここだよ」と教えてあげる必要があります。

たとえるなら：

.env.local = 自分のスマホの連絡先アプリに保存した電話番号
Vercelの環境変数 = 会社の共有電話帳に同じ番号を登録する

同じ情報を、Vercelにもコピーしてあげるわけです。これをやらないと、Vercel上のアプリが「Supabaseってどこにあるの？接続先がわからないよ」となってしまい、データの保存や読み込みができません。

環境変数（Environment Variables）とは、アプリが動くために必要な設定情報のことです。「環境」はアプリが動く場所、「変数」は値を入れる箱のようなものです。「この場所で動くときは、この設定を使ってね」と教えてあげる仕組みですね。

設定する値

Environment Variablesセクションに、以下の2つを入力します。1つずつ丁寧にやっていきましょう。

1つ目:

1つ目の環境変数

項目

入力する内容

Name（名前）の入力欄	`NEXT_PUBLIC_SUPABASE_URL`
Value（値）の入力欄	`.env.local`にある `NEXT_PUBLIC_SUPABASE_URL` の値をコピペ

手順を1つずつ説明しますね。

Vercelの画面で「Name」と書かれた入力欄を左クリックします
NEXT_PUBLIC_SUPABASE_URL と入力します（コピー&ペーストが確実です。手打ちだとタイプミスが起きやすいので）
次に、VS Codeに画面を切り替えてください（タスクバーやDockからVS Codeを左クリック）
VS Codeの左側のファイル一覧から .env.local を左クリックして開きます
ファイルの中に NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co のような行があるはずです
= の右側の部分（https://xxxxx.supabase.co）をマウスで選択してください。= 自体は含めないでくださいね
選択した状態で Ctrl + C（Macなら Command + C）を押してコピーします
ブラウザのVercel画面に切り替えてください
「Value」の入力欄を左クリックして、Ctrl + V（Macなら Command + V）で貼り付けます
入力が終わったら、「Add」 ボタンを左クリックして登録します

2つ目:

2つ目の環境変数

項目

入力する内容

Name（名前）の入力欄	`NEXT_PUBLIC_SUPABASE_ANON_KEY`
Value（値）の入力欄	`.env.local`にある `NEXT_PUBLIC_SUPABASE_ANON_KEY` の値をコピペ

同じ手順で2つ目も入力してください。

Vercelの画面で「Name」の入力欄に NEXT_PUBLIC_SUPABASE_ANON_KEY と入力します
VS Codeに切り替えて、.env.local ファイルの中の NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxxx... の行を探します
= の右側の値（eyJxxxxx... で始まる長い文字列）をコピーします
ブラウザに戻って「Value」欄に貼り付けます
「Add」 ボタンを左クリックして登録します

確認してみましょう

Environment Variablesセクションに2行追加されているのが見えるはずです。NEXT_PUBLIC_SUPABASE_URL と NEXT_PUBLIC_SUPABASE_ANON_KEY の2つが表示されていればOKです。

うまくいかないときは

.env.local ファイルが見つからない場合: VS Codeの左側のファイル一覧で、ファイル名の先頭に .（ドット）がついたファイルが隠れている場合があります。ファイル一覧が表示されているエリアの右上にある「...」メニューから「Show Hidden Files」（隠しファイルを表示）を探してみてください
値をコピペしたが、余分なスペースが入ってしまった場合: Value欄の先頭や末尾に余分なスペース（空白）が入っていないか確認してください。余分なスペースが入っていると正しく動きません
入力を間違えてしまった場合: 大丈夫です。登録した環境変数の横に「...」や編集アイコンがあるので、それを左クリックして修正できます。後からVercelのダッシュボードの「Settings」→「Environment Variables」でも修正できます

デプロイする

環境変数を設定したら、画面を一番下までスクロールしてください。

大きな 「Deploy」 ボタンが見えるはずです。これを左クリックします。

デプロイ（公開処理）が始まります。画面に進行状況がリアルタイムで表示されます。ログ（処理記録）が上から下にどんどん流れていく様子が見えますね。

1〜2分ほど待ちましょう。 すぐに完了しなくても焦らないでください。処理には少し時間がかかります。

何が起きているのか

ビルドの流れ

Vercelが裏側でやっていることは、ざっくりこうです。

GitHubからコードを取得
    ↓
アプリをビルド（動く形に変換）
    ↓
Vercelのサーバーにアプリを配置
    ↓
URLを発行

ビルド（build）というのは「組み立てる」という意味です。たとえるなら、設計図（コード）をもとに実際の建物（動くアプリ）を建てる作業のことですね。

皆さんがやることは「Deploy」ボタンを押して待つだけです。

うまくいかないときは

デプロイエラー

画面に赤い文字で「Error」や「Build Failed」と表示された場合の対処法です。

状況

原因として考えられること

対処法

「Build Failed」と表示	環境変数の設定に問題がある可能性が高い	Vercelのダッシュボードから「Settings」→「Environment Variables」で値が正しいか確認。特にコピペ時の余分な空白に注意
「Module not found」と表示	コードの依存関係に問題がある	VS CodeでClaude Codeを起動し「Vercelのデプロイでこのエラーが出た：（エラーメッセージ）。修正して」と伝えてください。修正後、GitHubにpushし直せばVercelが自動でリデプロイします
しばらく経っても終わらない	ビルドに時間がかかっている	5分程度は待ってみてください。それ以上かかる場合は、ページをリロードして状態を確認してください

環境変数を修正した場合は、ダッシュボードの「Deployments」タブから最新のデプロイの横にある「...」メニューを左クリックし、「Redeploy」 を左クリックすればやり直せます。

公開完了！

公開完了

デプロイが完了すると、画面に紙吹雪のような演出が出ることがあります。そして、URLが表示されます。

<https://my-todo-app-xxxx.vercel.app>

（xxxx の部分は人によって異なります。ランダムな文字列が入ります）

画面に表示されているURLか、プレビュー画像（アプリの見た目が小さく表示されている画像）を左クリックしてみてください。

ブラウザの新しいタブにTODOアプリが表示されます。

localhost:3000 で見たのと同じアプリです。でも今度は localhost（自分のPCの中）ではありません。インターネット上で動いています。

確認してみましょう

アドレスバーを見てください。localhost ではなく、https://my-todo-app-xxxx.vercel.app というURLになっていますね。これは世界中のどこからでもアクセスできるURLです。

アプリの画面が正しく表示され、テキスト入力欄と追加ボタンが見えていればOKです。試しにタスクを追加してみてください。正常に動作すれば、公開成功です。

うまくいかないときは

アプリが表示されず、エラーページが表示された場合: 環境変数の設定を見直してみてください。Vercelダッシュボード → プロジェクト → 「Settings」 → 「Environment Variables」で確認できます
画面は表示されるが、タスクの追加ができない場合: Supabaseとの接続に問題がある可能性があります。環境変数の値が正しいか確認してください
反映まで少し時間がかかることがあります: 1〜2分待ってからブラウザのリロードボタン（画面上部の丸い矢印アイコン）を左クリックして、もう一度試してみてくださいね

スマホでも開いてみよう

ここで、ぜひスマホを取り出してみてください。

スマホのブラウザ（Safari、Chromeなど）を開いて、先ほどのURL（https://my-todo-app-xxxx.vercel.app）を入力してください。

URLが長くて入力が大変な場合は、以下の方法が簡単です。

PCのブラウザでアドレスバーのURLを左クリックして選択し、Ctrl + C（Macなら Command + C）でコピー
LINEやメールで自分宛てにURLを送信
スマホでそのメッセージを開いて、URLをタップ

スマホでもTODOアプリが表示されます。

PCでもスマホでも、同じURLで同じアプリが動く。これがインターネットに公開するということです。

おめでとうございます

皆さんのアプリが、インターネットに公開されました。

振り返ってみてください。皆さんがやったのは：

Claude Codeに「TODOアプリを作って」と日本語で指示した
GitHubに保存した（これもClaude Codeに任せた）
Vercelで環境変数を設定して「Deploy」を押した

コードは一行も書いていません。プログラミング言語も学んでいません。

それでも、インターネットに公開されたアプリを持っている。これが、AIと一緒にものづくりをするということです。

まとめ

Vercelダッシュボードで「Add New...」→「Project」→ GitHubの my-todo-app を「Import」で選択
環境変数の設定が最重要: NEXT_PUBLIC_SUPABASE_URL と NEXT_PUBLIC_SUPABASE_ANON_KEY を .env.local からコピペ
環境変数が必要な理由: .env.local は自分のPCにしかない。Vercelのサーバーにも「Supabaseの接続先はここだよ」と教える必要がある
「Deploy」ボタンを押して1〜2分待つ → 公開URLが発行される。すぐ表示されなくても慌てない
デプロイ（deploy）= アプリをインターネット上に配置して公開すること
ビルド（build）= コードを動く形に組み立てること
PCでもスマホでも同じURLでアプリが動く

次回は、公開したアプリをじっくり確認します。PCとスマホの両方で操作して、データが共有されている様子も見てみましょう。