メインコンテンツへスキップ
ネットに公開する(デプロイ)
レッスン 10 / 12|8分で読めます

ネットに公開する(デプロイ)

自分のPCの中だけにある状態から、スマホでも家族でも見られる状態に。URLが一本できあがる瞬間、たぶん感動する。

このレッスンで終わる頃には

  • 作ったページをネットに公開して、URLを誰かに送れる 状態になる
  • 修正も pushするだけで勝手に反映 される仕組みになっている

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

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

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

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


サーバーって何?

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

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

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

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


Vercel を使う(無料)

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

やることは3ステップ:

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

10分で終わります。


ローカル開発からVercel公開までの4ステップ
ローカル → Git → GitHub → Vercel。最初の1回だけ繋ぐ手間があるが、2回目以降は push だけで自動更新

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

Vercel.com トップページ
vercel.com を開いて、右上の Sign Up。GitHubアカウントで認証すれば終わり

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

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

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


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

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

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

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


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

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

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

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

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

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

このコースで一番うれしい瞬間

初めてのURLを誰かに送る瞬間、たぶんめっちゃくる。

「これ、自分で作ったんだ」って送ってみてください。周りの反応が、たぶん想像以上です。


次からは 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。

商用利用は有料プランに

Vercelの無料プラン(Hobby)は 個人・学習用途のみ。ビジネスで使う場合は月額20ドルのProへ。まず無料で始めて、必要になってから上げれば十分です。


ここまでのまとめ

レッスン1からの流れを振り返ると:

  1. Claudeに日本語で頼んでページを作る
  2. Gitで管理する
  3. GitHubに上げる
  4. Vercelで公開する

コードを一行も書かずに、ここまで来てる。これが2026年時点のWeb開発のサイクル。

次は、実際に ゼロから1本のアプリを通しで作る 実践レッスン。

Vercel 公式 Next.js デプロイドキュメント
Vercel の公式 Next.js デプロイガイド。環境変数やドメイン設定もここから
Vercel公式: Next.jsをデプロイする

Next.jsプロジェクトをVercelにデプロイする公式手順。環境変数やドメイン設定もここから

Webvercel.com

明日のアクション

前のレッスンで作ったプロジェクトを、実際にVercelで公開してみてください。

  1. vercel.com でGitHub認証
  2. リポジトリをImport
  3. Deployボタン
  4. 発行されたURLを スマホで開く
  5. 家族か同僚に送ってみる

「作れるんだ、自分でも」が手応えとして残るはず。