Skip to main content

第221章：Vercelデプロイの流れ（最短）🚀✨

この章のゴールはこれだけ！👇 Next.jsアプリを、Vercelに置いてURLで見れる状態にすることだよ〜😊🌈

まずは全体の流れを1枚で把握しよ〜🗺️✨​

GitHubとVercelをつなげると、pushしたら勝手にデプロイが基本になるよ〜🤝✨ (Vercel)

手順1：ローカルで「ビルドできる」ことを確認する✅🧪​

デプロイ前に、ここでコケると本番もコケるので先に確認しよっ😆

npm run build
npm run start

npm run build と npm run start は、Next.jsの基本の本番起動チェックだよ〜📦✨ (Next.js)

手順2：GitHubにアップしておく（Vercelの最短ルート）🐙⬆️​

もうGitHubに置けてるならここは飛ばしてOKだよ🙆‍♀️✨ まだなら、ざっくり最短はこんな感じ👇

git init
git add .
git commit -m "first deploy"
git branch -M main
git remote add origin https://github.com/<USER>/<REPO>.git
git push -u origin main

手順3：Vercelで「Import」してデプロイする🚀🌍​

  1. Vercelにログイン（GitHub連携がラクだよ〜🔗）
  2. Add New → Project
  3. GitHubのリポジトリを選んで Import
  4. だいたい Framework Preset: Next.js が自動で選ばれるよ🤖✨（基本そのままでOK）

Vercelは有名フレームワークはビルド設定を自動でいい感じにしてくれることが多いよ〜🛠️✨ (Vercel)

手順4：環境変数があるならVercel側に入れる🔐🍪​

ここ、初心者さんが一番ハマりがちポイント〜！⚠️💦

  • ローカルの .env.local は Vercelには自動で行かない（基本そういうもの！）
  • Vercelの Project → Settings → Environment Variables で追加するよ✍️✨
  • さらに、Preview / Production どっちに効かせるかも選べるよ〜🌱🌟 (Vercel)

あと大事！ ブラウザ側（画面側）でも使いたい変数は NEXT_PUBLIC_ を付ける…みたいなNext.jsのルールもあるよ🧠✨（ローカルの .env* での読み込みも含めて） (Next.js)

手順5：Deployボタン！→ URLで確認🎉🔍​

Import時にそのまま Deploy すると、

  • ビルドが走る🏗️
  • 成功したらURLが出る🔗✨
  • 開いて動作チェック👀💕

「mainにpush → 自動でデプロイ」みたいな流れができてくるよ〜🚀 (Vercel)

うまくいかない時の“最短チェック”🧯😵‍💫​

  • ✅ ローカルで npm run build が通る？（まずここ！）
  • ✅ Vercelの Deployments のログにエラー出てない？（赤い行がヒント👀）
  • ✅ 環境変数の入れ忘れない？（Preview/Productionの付け先も！） (Vercel)
  • ✅ リポジトリの ルート合ってる？（モノレポだとRoot Directory設定が必要なことある🗂️） (Vercel)

おまけ：GitHubなしで最短に行くなら（CLI）🧙‍♀️💻​

「とにかく今すぐ上げたい！」ならVercel CLIでもできるよ〜（ただ、運用はGit連携が王道💡） vercel コマンドでデプロイできる案内もあるよ📌 (Vercel)

まとめ：第221章の“最短ルート”🎯✨​

  • 🧪 npm run build でローカル確認
  • 🐙 GitHubにpush
  • 🚀 VercelでImport → Deploy
  • 🔐 .env.local はVercelに手動登録（必要なら）
  • 🔗 出たURLで動作チェック

これで「公開できた！」まで行けるよ〜🎉🌈