Vercel の Hobby プランは無料でありながら、GitHub との連携がスムーズにできるため、個人プロジェクトのデプロイ先として非常に人気です。
しかし「無料枠だから何でもできるわけではない」‑ 例えばビルド時間の上限や同時実行数の制限があります。ここでは 初心者でもすぐに使える 実務的な Tips をまとめ、GitHub Actions で自動デプロイを構築する手順を紹介します。
1. プロジェクト構成のベストプラクティス
| ディレクトリ | 目的 |
|---|---|
src/ |
アプリのソースコード |
public/ |
静的ファイル |
.github/workflows/ |
CI 用 YAML ファイル |
vercel.json |
Vercel のビルド設定（リダイレクトや環境変数） |
ポイント
- ルートに
package.jsonがあるだけで Vercel が自動的にnpm install→npm run buildを走らせます。 -
vercel.jsonでoutputDirectoryを明示すれば、ビルド成果物が期待通りの場所に出力されます。
2. GitHub Actions でデプロイを自動化
Vercel が提供する公式アクション vercel-action を使うと、プッシュごとにデプロイが走ります。以下は最小構成の例です。
name: Deploy to Vercel
on:
push:
branches:
- main # main ブランチへのプッシュで実行
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to Vercel
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }} # Vercel の Personal Token
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} # 組織 ID
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} # プロジェクト ID
working-directory: . # 必要ならビルド成果物のディレクトリを指定
env:
VERCEL_SCOPE: ${{ secrets.VERCEL_SCOPE }} # デプロイ先のチーム名（省略可）
シークレットの設定方法
- Vercel のダッシュボードで Account Settings → Tokens から Personal Token を作成。
- プロジェクトページの Settings → General で Organization ID と Project ID をコピー。
- GitHub リポジトリの Settings → Secrets and variables → Actions に
VERCEL_TOKEN,VERCEL_ORG_ID,VERCEL_PROJECT_ID,VERCEL_SCOPEを追加。
3. Hobby プランで気をつけるべき制限と回避策
| 制限項目 | 内容 | 回避策 |
|---|---|---|
| ビルド時間上限 (100 秒) | ビルドが長くなるとエラーになる | ビルドステップを分割し、npm run build のみを実行。不要な依存は devDependencies に分離 |
| 同時デプロイ数 (3) | 同時に複数のプルリクエストをデプロイすると失敗 | PR 用に preview デプロイを無効化し、main ブランチだけデプロイする |
| ストレージ容量 (100 MB) | 静的ファイルが増えると上限超過 | 画像や動画は外部 CDN (Cloudinary, Imgix) に置く |
4. デバッグのコツ
-
Actions のログ:
run:の直前にnpm run build --if-presentと書くと、ビルド失敗時のエラーログがそのまま出力されます。 - Vercel の Deployments タブ: デプロイ ID をクリックすると、ビルドログとプレビュー URL が確認でき、GitHub Actions のログと突き合わせが楽です。
-
ローカルでの再現:
vercel devコマンドでローカルサーバーを立ち上げ、GitHub Actions と同じ Node バージョンを使用すると、環境差異を減らせます。
5. まとめ
Vercel Hobby 枠は「無料でフルスタックのデプロイ環境」を提供しますが、制限を意識した設計が鍵です。
- シンプルなディレクトリ構成 → Vercel が自動検出しやすくなる
- GitHub Actions の公式アクション を利用 → 設定ミスが減少
- 制限を把握し、ビルド時間・ストレージを最適化 → 無料枠でも快適に開発が続く
この手順を踏めば、初心者でも「コードを書いたらすぐにプレビューが見える」感覚を手に入れられます。ぜひ自分のポートフォリオや小規模アプリに適用してみてください。