【2026年版】Vercelの始め方 — GitHubからデプロイまで10分で完全ガイド
- Vercelアカウントの作成とGitHub連携
- フロントエンドプロジェクトの自動デプロイ
- プレビューデプロイの仕組みと活用方法
- カスタムドメインの設定
コマンド早見表
# Vercel CLIのインストール（オプション）
npm install -g vercel
# ローカルプロジェクトをデプロイ
vercel
# 本番環境へデプロイ
vercel --prod
# 環境変数の設定
vercel env add MY_API_KEY production
# ログの確認
vercel logs
# ドメイン一覧
vercel domains ls# Framework Detection（自動検出対応フレームワーク）
Next.js → next build
Astro → astro build
SvelteKit → vite build
Vue/Nuxt → nuxt build
React (Vite) → vite build
Angular → ng build# GitHub Actions でVercelにデプロイする場合
# .github/workflows/deploy.yml
- name: Deploy to Vercel
run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}よくある詰まりポイント
Q. 無料プランで商用利用はできないの？ Hobby（無料）プランは個人の非商用プロジェクト向けだよ。収益が発生するサービスや仕事で使うプロジェクトにはProプラン（月20ドル）が必要になる。ただし「商用」の定義があいまいで、個人ブログへのアフィリエイト広告がどちらに当たるかはVercelの利用規約を確認してね。
Q. ビルドエラーが出てデプロイできない。どこを見ればいい？
VercelダッシュボードのDeployments一覧から失敗したデプロイをクリックすると、ビルドログが全文見れるよ。Error: Cannot find module ならpackage.jsonの依存関係漏れ、Type error ならTypeScriptの型エラーが多い。ローカルで npm run build を先に実行して確認するとエラーをすぐ発見できるよ。
Q. Cloudflare PagesとVercelはどっちが速いの？ コールドスタートに強いのはCloudflare Pages（V8 Isolatesでほぼゼロ起動）、Node.jsエコシステムとの互換性が高いのはVercelだよ。静的サイトなら速度差はほとんどないから、Next.jsを使うならVercel、それ以外で速度を優先するならCloudflare Pagesを検討してみてね。
ひよこ Vercelってよく聞くけど何をするサービスなの？
ペンギン先生 ひよこ Next.jsとよく一緒に聞く気がするけど、関係があるの？
ペンギン先生 ひよこ アカウントはどうやって作るの？
ペンギン先生 ペンギン先生 ひよこ プレビューデプロイってどういうもの？
ペンギン先生 ひよこ APIキーみたいな秘密の値はどうやって設定するの？
ペンギン先生 ひよこ サーバーサイドの処理もVercelでできるの？
ペンギン先生 ひよこ カスタムドメインはどうやって設定するの？
ペンギン先生 ひよこ 無料プランで何ができて何ができないの？
ペンギン先生 無料のHobbyプランでは個人プロジェクトなら十分使えるよ。制限は商用利用不可・チームメンバーは1人・帯域幅100GB/月・Serverless Function実行時間12万秒/月あたりが主なポイントだよ。商用サービスや複数人開発ならProプラン（月20ドル）が必要になるね。
ひよこ NetlifyやCloudflare Pagesとはどう違うの？
ペンギン先生 ひよこ Astroとも一緒に使えるって聞いたけど本当？