JAICYLAB
プロジェクト依頼
VERCEL

Vercel
デプロイ & ドメイン接続

Next.jsを開発するVercelでフロントエンドをデプロイするガイドです。 GitHub連携、環境変数、カスタムドメイン、Previewデプロイ、Functionsまで実務目線でまとめています。

Vercelダッシュボードを開くステップを見る

Hobbyプラン

個人・非商用は無料

Proプラン

$20/月/ユーザー

必要なもの

GitHubアカウント

Overview

始める前にご確認ください

Hobbyプランは商用利用が禁止です。会社のプロジェクトはPro以上を利用しないとToS違反となります。カスタムドメイン接続は無料プランでも可能ですが、チーム協業・分析・セキュリティ機能はProから提供されます。

GitHubリポジトリ

デプロイ対象のプロジェクト。

ドメイン購入元

お名前.com・Gabia・Cloudflareなど。

環境変数の分離

.env.localはコミット禁止。

リージョン選択

Functionsはicn1(ソウル)が既定。

Step by Step

ステップ別ガイド

01

SIGNUP

アカウント登録

vercel.comで登録します。

  • Sign Up with GitHubを推奨(最も滑らかな連携)
  • GitLab・Bitbucket・メールも可能
  • Hobbyプランで自動的に開始
  • チームが必要な場合は組織を作成
02

CONNECT

Gitリポジトリ接続

GitHubとVercelを連携します。

  • Import Git Repositoryをクリック
  • Vercel GitHub Appをインストール(全体または選択リポジトリ)
  • リポジトリを選択 → フレームワークを自動検出
  • Next.js / Nuxt / Vite / SvelteKitなど主要フレームワーク対応
03

ENV

環境変数の設定

デプロイ前に必須の環境変数を登録します。

  • Settings > Environment Variables
  • 3環境を区別: Production / Preview / Development
  • NEXT_PUBLIC_接頭辞はクライアントバンドルに含まれる(機密情報は禁止)
  • サーバー専用変数は接頭辞なし(DATABASE_URL・API_SECRETなど)
  • vercel env pullでローカル.env.localに同期可能
04

DEPLOY

初回デプロイ & Preview URL

mainブランチpushで自動Productionデプロイ。

  • main(またはProduction Branch)push時に自動デプロイ
  • 他ブランチ・PRは自動でPreview URLを生成
  • Preview URL: https://${プロジェクト}-${ブランチ}-${チーム}.vercel.app
  • デプロイ状態はGitHub PRにコメントで自動表示
  • vercel CLIで手動デプロイも可能
05

DOMAIN

カスタムドメイン接続

購入したドメインをプロジェクトに接続します。

  • Project Settings > Domains
  • ドメインを入力 → 必要なDNSレコードが表示される
  • apexドメイン: Aレコード 76.76.21.21
  • wwwサブドメイン: CNAME cname.vercel-dns.com
  • またはネームサーバーをVercelに変更(ns1.vercel-dns.com / ns2.vercel-dns.com)
  • SSL証明書(Let's Encrypt)は自動発行・自動更新
06

SECURITY

デプロイ保護(任意)

Preview URLを外部から見えないようにします。

  • Settings > Deployment Protection
  • Vercel Authentication(チームメンバーのみアクセス)
  • Password Protection(Pro以上)
  • Bypass TokenでE2Eテスト・エージェントのアクセスを許可
  • ステージング/リリース前のレビューに便利
07

FUNCTIONS

Functions & リージョン設定

Serverless/Edge Functionsの配置設定。

  • 既定リージョン: icn1(ソウル) — 韓国向けサービスに推奨
  • next.config.jsのruntime exportまたはvercel.jsonで設定
  • Fluid Compute: 長いI/O処理(LLM・API)に最適化
  • maxDuration / memory / CPUの調整が可能
  • Edge RuntimeはNode.js APIの一部が非対応 — 要確認
08

ANALYTICS

分析 & モニタリング

訪問者・パフォーマンス指標を有効化。

  • Web Analytics: 訪問者・ページビュー(Cookieレス)
  • Speed Insights: Core Web Vitalsの実ユーザー計測
  • Vercel LogsでFunctionsのログを確認
  • OpenTelemetryで外部APMへ連携可能
  • 両方ともHobbyでも制限付きで無料利用可能

Pitfalls

詰まりやすいポイント

Hobbyプランの商用利用

会社サイト・有料サービスをHobbyで運営するとToS違反です。最低Pro($20/月)に切り替えてください。

NEXT_PUBLIC_接頭辞の誤用

この接頭辞が付くとブラウザバンドルに含まれます。DATABASE_URL・API_SECRETには絶対にNEXT_PUBLIC_を付けないでください。

Edge Runtime互換性

pg・bcrypt・fsなどNode.js専用モジュールはEdgeで動作しません。Node.js runtimeを指定するかserverlessへ変更してください。

.env.localのコミット

.gitignoreに含まれていても一度コミットすると履歴に残ります。即座にキーを回転してください。

Production Branch変更

Production Branchをmainから別のものに変えるとドメインがそのブランチのデプロイへ移動します。ミスに注意。

Resources

公式リンク

Vercel Dashboard

プロジェクト管理

Pricing

Hobby / Pro / Enterprise

Custom Domains

ドメイン接続ガイド

Environment Variables

環境変数管理

Functions

Serverless · Edge · Fluid

AI Gateway

モデルルーティングゲートウェイ

登録が面倒なら 代行します

JAICYLABのプロジェクトには開発者アカウントの準備から公開・運用まで一貫して含まれます。

代行を依頼する 他のガイドを見る