Day 6・小さなアプリを作って公開する — 現場の地図
Vercelで世界に公開する
GitHubにpushするとVercelが自動でビルド&デプロイし、URLで世界に公開される流れを俯瞰する。
「公開する」とは、URLで誰でも開ける状態にすること
手元のパソコンで動くアプリは、あなたしか見られません。世界中の人に見てもらうには、インターネット上のサーバーにアプリを置き、URL(https://... )で開けるようにする必要があります。この作業を「デプロイ(公開)」と呼びます。昔はこれがとても面倒でしたが、今はVercel(ヴァーセル)というサービスで、驚くほど簡単になりました。
VercelはNext.jsを作っている会社のサービスなので、Next.jsとの相性が抜群です。基本の流れはたった3ステップ。GitHubにコードをpushする → Vercelが自動でビルド(公開用に組み立て)する → URLで世界に公開される。この一連が自動で回るのが最大の魅力です。
登録から公開までの流れ(俯瞰)
- GitHubにアカウントを作り、アプリのコードをリポジトリとして置く(push する)
- Vercelにアクセスし、GitHubアカウントで連携ログインする
- 公開したいリポジトリを選んで「Import(取り込み)」する
- Vercelが自動でビルドし、数分で https://... のURLが発行される
- 以降は GitHub に push するたびに、Vercelが自動でビルドし直して公開を更新する
なぜ「push するだけ」で公開が更新されるのか
Vercelはあなたのリポジトリを見張っていて、新しい push を検知すると自動でビルドとデプロイを走らせます。この「コードを保存(push)すれば公開に反映される」仕組みをCI/CD(継続的インテグレーション/デリバリー)と呼びます。人手の作業を挟まないぶん、ミスが減り、公開が速くなります。
// 変更を記録して GitHub に送るだけ。あとはVercelが自動で公開する
// 1) 変更したファイルを記録対象にする
// git add .
// 2) 変更に名前(メッセージ)をつけて確定する
// git commit -m "タスクの削除ボタンを追加"
// 3) GitHub に送る → これをきっかけにVercelが自動デプロイ
// git pushよくある落とし穴: 手元では動くのにデプロイで失敗する
「自分のパソコンでは動くのにVercelでビルドが失敗する」はよくあります。原因の多くは、TypeScriptの型エラーや、大文字小文字を間違えたファイル名(手元のWindows/Macは区別が緩いが、公開先は厳密)です。ビルドが赤くなったら、まずVercelの画面に出るエラーログを読みましょう。
AIにはこう聞く
手順を暗記する必要はありません。「Next.jsのアプリをVercelで公開したい。GitHubへのpushから公開までの流れを教えて」や「このVercelのビルドエラーの意味と直し方を教えて(エラーログを貼る)」と聞けば、詰まりどころを解いてくれます。大事なのは「push → 自動ビルド → 公開」という全体の地図を持っていることです。
まとめると、公開は「GitHubにpush → Vercelが自動ビルド → URLで世界に公開」の3ステップ。細かい手順は暗記せず、詰まったらAIに聞けば十分です。この全体像さえ持っていれば、自分の作ったアプリを世界に出せます。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
Vercelでの公開の基本的な流れとして正しいものはどれ?
「手元では動くのにVercelのビルドが失敗する」とき、まず疑うべきことは?
GitHubとVercelを使った公開の流れを、初心者に説明するつもりでまとめてください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。