ネットに公開する（デプロイ）

「これ自分で作ったんだ」を伝えたい

ここまでで、PC内にページができて、Gitで管理もできた。

でも、今のままだと自分のPCから外に出せない。家族に見せたくても「ちょっとPC覗きに来て」と言うしかない。

これを解決するのがデプロイ（公開作業）。URLを発行して、誰でもアクセスできる状態にすること。

サーバーって何？

誰かが自分のページをスマホで開いた時、裏でこんな動きがある:

1. URLを入力する
2. ネット上のどこかのコンピュータに問い合わせが行く
3. そのコンピュータがページのデータを返す
4. スマホに表示される

この「ネット上のどこかのコンピュータ」がサーバー。24時間起きてて、アクセスを待ってる。

昔はサーバーを自分で用意してた（機材買う、設定する、メンテする…全部専門家の仕事）。でも今は、全部やってくれるサービスがある。

Vercel を使う（無料）

Vercel（ヴァーセル）というサービスを使う。GitHubのリポジトリを読んで、自動でサーバーに配置してくれる。個人利用なら無料。

やることは3ステップ:

1. アカウントを作る
2. GitHubリポジトリを繋ぐ
3. Deployボタンを押す

10分で終わります。

ステップ1: Vercelアカウントを作る

vercel.com を開いて、右上の Sign Up。

「Continue with GitHub」を選ぶ。GitHub側で認証画面が出るので Authorize。

これで終わり。新しいパスワードとか覚えなくていい。GitHubアカウント＝Vercelアカウント。

ステップ2: リポジトリを繋ぐ

ログイン後のダッシュボードで Add New... → Project。

GitHubに上げたリポジトリが一覧で出てくる。前のレッスンで作った git-test とか、実際のプロジェクトを探して Import。

候補が出たら、該当するリポジトリの Import を押す。

設定画面がいくつか出るけど、基本そのままでいい。Claudeが作ったプロジェクトなら、Vercelが自動で「これはNext.jsね」って認識してくれる。

ステップ3: Deployボタンを押す

黒い Deploy ボタンをクリック。

ログがバーッと流れる。Vercelが裏で、コードを読んで、ページを組み立てて、サーバーに配置してる。初回は1〜2分かかる。

終わると紙吹雪のアニメーションと一緒に、URLが発行される。

https://あなたのプロジェクト名.vercel.app

これを開くと、自分が作ったページがネットに出てる。スマホでも見れる。家族にURLを送れる。

URLが出たら、開いて終わりではなく、肝心なボタンまで動かす。公開後チェックはここまでで1セットです。

次からは push するだけ

一度繋いでしまえば、以降は修正のたびにVercelの画面を開く必要はない。

1. Claudeに修正を頼む
2. 「コミットして、pushして」
3. 30秒〜1分後、公開されたURLが勝手に更新される

これだけ。Vercelには一切触らない。

試してみる

フッターに「このサイトはClaude Codeで作りました」と追加して

できたら:

コミットしてpushして

1分後、公開URLを更新すると、フッターが変わってる。

独自ドメイン（気になる人向け）

Vercelが発行するのは プロジェクト名.vercel.app という形のURL。これでも全然使える。

「yourname.com みたいに自分のドメインにしたい」なら、Vercelのダッシュボードの Settings > Domains から設定できる。ドメインの購入と設定はちょっと別の話なので、このコースでは扱いません。

まずは .vercel.app のURLで動かしてみて、欲しくなったら調べればOK。