概要
Vercelとは、「Webサイトやアプリを簡単に公開できるホスティングサービス」です。
想像してみてください。あなたが一生懸命作ったWebサイトを、 世界中の人に見てもらうには、サーバーを用意して、設定して、公開する必要があります。 でも初心者にとって、これはかなりハードルが高いですよね。
Vercelは、そんな面倒な作業をほぼ自動でやってくれます。GitHubにコードを push するだけで、 数秒後には世界中からアクセスできる状態になります。
💡 このサイトもVercelで動いています！https://itwords.jp は、Vercelを使って公開されています。
Vercelの特徴
1. Next.jsとの相性が抜群
Vercelは、人気のフレームワークであるNext.jsを開発している会社です。 そのため、Next.jsで作ったプロジェクトは、特別な設定なしで最適な状態でデプロイできます。
2. 自動デプロイ
GitHubにコードをpushすると、自動的にビルド・デプロイされます。 「デプロイ忘れた！」ということがありません。
3. プレビュー環境
プルリクエストを作ると、自動的にプレビュー用のURLが生成されます。 本番環境に影響を与えずに、変更内容を確認できます。
4. グローバルCDN
世界中にあるサーバー（CDN）から配信されるため、 どこからアクセスしても高速に表示されます。
5. 無料プランが充実
個人プロジェクトなら、無料プランで十分使えます。 商用利用でなければ、ほとんどの機能が無料で利用できます。
Vercelでデプロイする流れ
実際にVercelを使ってサイトを公開する手順は、驚くほど簡単です：
- Vercelアカウント作成：vercel.comにアクセスして、GitHubアカウントでサインアップ
- プロジェクトをインポート：「New Project」ボタンを押して、GitHubのリポジトリを選択
- 設定確認：Next.jsプロジェクトなら自動検出されるので、そのまま「Deploy」をクリック
- デプロイ完了：数十秒〜数分で、
https://your-project.vercel.appのようなURLが発行される
たったこれだけで、世界中からアクセスできるWebサイトが完成します！
Vercel vs 他のホスティングサービス
| サービス | 特徴 | 向いている用途 |
|---|---|---|
| Vercel | Next.jsに最適化、自動デプロイ、プレビュー環境 | Next.js、React、静的サイト |
| Netlify | 静的サイト特化、フォーム機能、関数機能 | 静的サイト、JAMstack |
| GitHub Pages | 完全無料、GitHubと統合 | 個人サイト、ドキュメント、ポートフォリオ |
| AWS / GCP | 高度な設定が可能、スケーラビリティ高い | 大規模アプリ、エンタープライズ |
Vercelの料金プラン
Hobby（無料プラン）
- 個人プロジェクト向け
- 無制限のWebサイト
- 100GB/月の帯域幅
- 自動HTTPS
- カスタムドメイン対応
Pro（$20/月）
- 商用利用可能
- 1TB/月の帯域幅
- パスワード保護
- アナリティクス機能
💡 ポイント：個人の学習や趣味のプロジェクトなら、無料プランで十分です。 このサイトも無料プランで運用しています！
カスタムドメインの設定
Vercelでは、独自ドメイン（例：itwords.jp）を簡単に設定できます。
- ドメインを取得：お名前.comやGoogle Domainsなどでドメインを購入
- Vercelに追加：プロジェクト設定から「Domains」を開き、取得したドメインを入力
- DNS設定：Vercelが指示するDNSレコードを、ドメイン管理画面で設定
- SSL証明書：自動的にHTTPS化される（Let's Encryptを使用）
設定が完了すれば、https://your-domain.com でアクセスできるようになります。
環境変数の設定
APIキーやデータベースの接続情報など、公開したくない情報は環境変数として設定できます。
# .env.local ファイル（ローカル開発用）
NEXT_PUBLIC_API_KEY=your_api_key_here
DATABASE_URL=postgresql://...Vercelのダッシュボードから「Environment Variables」を設定すれば、 本番環境でも同じ環境変数が使えます。
Vercelのアナリティクス
有料プランでは、詳細なアクセス解析機能が使えます：
- ページビュー数
- 訪問者数
- デバイス別の統計
- 地域別のアクセス状況
- Core Web Vitals（ページ速度など）
無料プランでも、デプロイ履歴やビルドログは確認できます。
Vercelを使うメリット・デメリット
メリット
- 超簡単デプロイ： GitHubと連携するだけで自動デプロイ
- 高速： グローバルCDNで世界中から高速アクセス
- 無料で始められる： 個人利用なら無料プランで十分
- Next.js最適化： Next.jsの機能をフル活用できる
- プレビュー環境： PRごとに自動生成
デメリット
- 帯域制限： 無料プランは100GB/月まで（超えると課金）
- Next.js以外には弱い： 他のフレームワークだと少し不便
- サーバーレス前提： 常時起動のサーバーには不向き
実際にやってみよう：デプロイステップ可視化
Vercelでのデプロイがどのように進むか、ステップごとに確認してみましょう！
デプロイの流れ
1. コードをプッシュ
GitHubにコードをpushします
2. 自動検知
Vercelが変更を自動検知します
3. ビルド開始
プロジェクトをビルドします
4. デプロイ
グローバルCDNにデプロイします
5. 完了
サイトが公開されました！
💡 実際のデプロイでは、これらのステップが数秒〜数分で自動的に実行されます！