Lecture 14ホスティングとVercel
作ったWeb Appをインターネット上に公開するホスティングを理解します。
手元のパソコンでアプリが動いていても、それは あなた1人にしか見えていない 状態です。 他の人がブラウザで開けるようにするには、ホスティング という工程が必要になります。 この講座では、Next.jsとの相性が良い Vercel を使います。
このレクチャーでは、ホスティングとは何か、Vercelで何が自動化されるのか、 そして公開前に確認しておきたいポイントを整理します。
1ホスティング＝インターネット上の置き場を借りる
npm run dev でローカルに立ち上げているアプリは、 自分のパソコン内の 「お店の試作品」 のようなものです。 世間に出すには、24時間電気がついていて、誰がアクセスしてもURLで開ける場所が必要になります。
ホスティングサービスは、その インターネット上の置き場 を貸してくれる仕組みです。 自分でサーバーを買って管理することもできますが、はじめは 専門サービスに任せる ほうが圧倒的に楽で安全です。
2VercelはNext.jsとの相性が良い
いろいろなホスティングサービスがありますが、Next.jsを作っている会社が運営している のがVercelです。 そのため、Next.jsのプロジェクトをほぼ 設定なし でそのまま公開できます。
- 初期設定が薄い：GitHubと連携してボタンを押すだけ、に近い。
- 無料枠で始められる：個人開発や学習用途なら、はじめは無料の範囲で十分試せる。
- 独自ドメインも後から設定できる：最初は自動で
your-app.vercel.appのようなURLが配られる。
- Vercel— Vercel公式サイト
- Vercel アカウント作成— アカウント作成（GitHubログインが楽）
- Vercel Docs— Vercel公式ドキュメント
3GitHub → Vercel の自動連携
いったん設定すると、その後の流れは とても気持ちいい です。 GitHubに git push するたびに、Vercelが自動で気付き、ビルドして公開してくれます。
- ローカルでコードを書く（Codex Appで）。
git pushでGitHubに保存する。- Vercelが変更を検知し、自動でビルドする。
- ビルドが通れば、本番URL（
your-app.vercel.app）が更新される。
4公開前のチェック
自動化されているとはいえ、公開直前にやるべき確認 はいくつかあります。 ここを飛ばすと「本番だけ動かない」「URLは出たけど真っ白」といった事故になりがちです。
- 環境変数の登録：API Keyなどの秘密情報は、Vercelダッシュボードで 本番用にも別途登録 が必要。
- ビルドエラーの確認：ローカルで
npm run buildが通ることを先に確認しておく。 - スマホ表示の確認：自分のスマホで本番URLを開き、レイアウト崩れがないかチェック。
- 独自ドメインは後でOK：最初は
vercel.appのままで、機能が固まってから設定する。
ローカルの .env.local はVercelには上がらない
.env.local は あえてGitHubに上げない ファイルなので、 Vercelもその中身を知りません。本番でAPIを動かしたければ、Vercelの「Environment Variables」設定画面から同じキーを別途登録 する必要があります。 ここを忘れると「ローカルでは動くのに本番だけ動かない」の原因になります。
自分のプロジェクト用の公開前チェックリストを作る
一般論ではなく、自分のプロジェクトに合った チェックリストにすると効きます。 Codexにそのまま聞いて、後で progress.md に貼っておきましょう。
- 「Vercelへデプロイする前に確認すべき項目を、このプロジェクト前提でチェックリストにしてください」とCodexに依頼する。
- 返ってきたリストの中で、自分が分からない項目があれば「○○について初心者向けに説明してください」と追撃する。
- 完成したチェックリストを
progress.mdに貼り、デプロイ前に毎回読み直すクセをつける。
5理解確認チェックリスト
- ホスティングは「インターネット上の置き場を借りること」だと説明できる。
- VercelはNext.jsとの相性が良いと理解している。
- GitHubへのpushでVercelが自動公開してくれる流れをイメージできる。
- 環境変数はVercel側にも別登録が必要だと知っている。