はじめに
今回は、制作したポートフォリオサイト（Next.js + TypeScript + TailwindCSS）を、VercelとGitHubActionsを使ってCI/CDを構築した方法についてまとめました。
今回のゴール
- GitHubに
mainブランチへpushすると、
→ GitHub Actionsが自動でビルド・デプロイ実行
→ Vercelに本番環境として反映される
なぜGitHub ActionsとVercelなのか
今回の構成では、ホスティングに Vercel、CI/CD に GitHub Actions を採用しました。
Vercel は Next.js の開発元が提供するサービスであり、静的生成（SSG）や動的処理、API Routes など Next.js の機能に標準で対応しています。
特に ISR（Incremental Static Regeneration）や Edge Functions などの機能が最初から組み込まれているため、余計な設定やインフラ構築をせずに、Next.js 本来のパフォーマンスや柔軟性をそのまま活かせます。
用語解説
ISR（Incremental Static Regeneration）
- 静的サイトで生成されたページの一部を、リクエストや一定時間ごとに
再生成できる Next.js の機能 - 静的サイトの高速性と動的サイトの柔軟性を両立できる
Edge Functions
- Vercelが提供するエッジネットワーク上のサーバレス関数
- アクセスした人にできるだけ近い場所でプログラムを動かせる仕組みのため、
ログインチェックや A/B テストなど、ユーザーごとに表示を切り替える処理に
適している
事前準備
- Vercelにログインできるアカウントがある
- GitHubでリポジトリを作成済みで、Vercelにそのリポジトリを連携している
CI/CDに必要なトークンの取得、IDの確認方法
GitHub ActionsからVercelへデプロイするには、3つの情報が必要です：
- VERCEL_TOKEN
- 認証用アクセストークン
- VERCEL_PROJECT_ID
- 対象プロジェクトの一意なID
- VERCEL_ORG_ID
- 所属組織または個人のID
VERCEL_TOKEN の取得方法
- Account Settings → Environment Variables → Tokensへアクセスします。
- CreateボタンでTokenを発行できます。
※生成されたトークンは再表示できないため、必ず控えておきましょう！
VERCEL_PROJECT_ID
Vercelで対象プロジェクトのSettings → Generalより、Project IDをコピーします。
VERCEL_ORG_ID（組織ID / チームID）の確認方法
同じくプロジェクトのSettings → General内で確認できます。
Teamとしてプロジェクトを管理している場合は team_xxxxx の形式です。
GitHubにSecretsとして登録する
GitHubの対象リポジトリで以下の3つを Settings → Secrets → Actions に登録します。
CI/CDワークフローの作成
GitHub上で .github/workflows/deploy.yml というファイルを作成し、以下のように記述します。
name: Deploy to Vercel
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Check out the code
uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3 # Node.jsの実行環境をセットアップ
with:
node-version: '20'
- name: Install dependencies
run: npm install # 依存パッケージをインストール
- name: Build and Deploy to Vercel
uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
vercel-args: '--prod'
デプロイの確認
この状態で main ブランチに push すれば、自動的に GitHub Actions が実行され、Vercel に最新のコードがデプロイされます。
Vercel の「Deployments」タブから、デプロイの状況やログを確認できます。
おわりに
今回のように、GitHub ActionsとVercelを組み合わせることで、小規模なプロジェクトでも手軽にCI/CD環境を構築できます。個人開発でもCI/CDを導入すれば、開発効率の向上と運用の安定化を両立することが可能です。