デプロイ：作ったものをネットに公開する

まず、やってみよう

ここまでで、Webページを作ってGitで管理してGitHubに保存するところまで来た。

ただ、今のままだとページは自分のパソコンの中にしかない。同僚に見せたくても、パソコンを覗き込んでもらうしかない。

このレッスンで、誰でもアクセスできる状態にする。これがデプロイだ。

サーバーとは何か

作ったWebページを誰かがスマホで見るとき、裏で何が起きているか。

ページのデータがネット上のどこかのコンピュータに置いてある。URLにアクセスすると、そのコンピュータがデータを返す。それがブラウザに表示される。

このコンピュータがサーバー。24時間電源が入っていて、アクセスを待ち続けている。

昔はサーバーを自分で用意する必要があった。機材を買って、設定して、メンテナンスして。完全にIT専門家の領域だった。

今は全部やってくれるサービスがある。

Vercelを使う

Vercel(ヴァーセル)は、Webサイトを公開するサービスだ。GitHubにあるコードを読み取って、自動でサーバーに配置してくれる。個人利用なら無料。

やることは3つ。アカウントを作る。GitHubリポジトリを接続する。デプロイボタンを押す。URLが発行されて公開完了。

手順1: Vercelにアカウントを作る

ブラウザでこのURLを開く。

https://vercel.com

右上のSign Upをクリック。Continue with GitHubを選ぶ。GitHubの認証画面が出るのでAuthorizeを押す。これで終わり。パスワードを新たに覚える必要はない。GitHubアカウントがそのままVercelのアカウントになる。

手順2: GitHubリポジトリを接続する

ログインするとダッシュボードが出る。Add New... から Project を選ぶ。

GitHubのリポジトリ一覧が表示されるので、前のレッスンでpushしたリポジトリを見つけてImportをクリック。

設定画面がいくつか出るけど、基本そのままでいい。Claude Codeが作ったNext.jsプロジェクトなら、Vercelが勝手に認識してくれる。

手順3: デプロイする

Deployボタンを押す。

画面にログが流れ始める。Vercelがコードを読み取ってサーバー上にページを構築しているところだ。初回は1〜2分かかる。

終わると紙吹雪のアニメーションと一緒にプレビューが表示される。そしてURLが発行される。

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

ブラウザで開いてみよう。自分が作ったページがネット上で動いている。スマホでも見られるし、家族にURLを送ることもできる。

自動デプロイという仕組み

ここからが本題。

一度GitHubリポジトリを接続すると、その後はGitHubにpushするだけでVercelが勝手にデプロイしてくれる。流れはこう。

1. Claude Codeでページを修正する
2. Gitでコミットする
3. GitHubにpushする
4. 数十秒後、URLのページが更新される

Vercelの画面を開く必要すらない。pushだけで完結する。

実際に試してみよう。

$cd ~/my-first-project

Claude Codeに変更を頼む。

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

変更が終わったらコミットしてpush。

$git add .
$git commit -m "フッターにClaude Code表記を追加"
$git push

30秒から1分待って、さっきのURLをブラウザで更新してみる。フッターが変わっているはずだ。

カスタムドメインについて

Vercelが発行するURLはプロジェクト名.vercel.appという形式。これで十分使えるけど、自分のドメイン(例: yourname.com)を使いたければ、ダッシュボードのSettingsからDomainsで設定できる。

ドメインの購入や設定はこのコースでは扱わない。vercel.appのURLでまず始めて、必要になったら調べればいい。

ここまでのまとめ

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

Claude Codeに日本語で指示してページを作る。Gitで変更を管理する。GitHubに保存する。Vercelで公開する。

これが今のWeb開発のサイクル。プログラミングを一行も書かずにここまで来た。

次のレッスンではこの全工程をゼロから通しでやる。