1️⃣ なぜ GitHub Actions と Vercel を組み合わせるのか
- GitHub Actions はリポジトリにコードがプッシュされた瞬間に自動で処理を走らせられる CI/CD ツールです。
- Vercel はフロントエンド（特に Next.js）に最適化されたホスティングサービスで、プレビュー環境が自動で作られます。
初心者が「コードを書いたらすぐに公開したい」と思ったときに、最もシンプルでハンドリングが少ない組み合わせです。
2️⃣ 事前に用意するもの
| 項目 | 説明 |
|---|---|
| GitHub リポジトリ | 任意の公開/非公開リポジトリ |
| Vercel アカウント | 無料プランでもデプロイ可能 |
| Vercel の Project Settings → Git Integration で取得した Vercel Token | GitHub Actions が Vercel にデプロイを指示するために必要です |
取得したトークンはリポジトリの Settings → Secrets and variables → Actions → New repository secret に VERCEL_TOKEN という名前で登録します。
3️⃣ 最小限の workflow ファイル
リポジトリの .github/workflows/deploy.yml に以下を貼り付けます。
この例では main ブランチにプッシュされたときだけデプロイが走ります。
name: Deploy to Vercel
on:
push:
branches:
- main # デプロイ対象ブランチ
jobs:
vercel-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Install Node.js
uses: actions/setup-node@v4
with:
node-version: '20' # LTS バージョンを指定
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build # Next.js の場合は `next build`
- name: Deploy to Vercel
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-args: '--prod' # 本番環境へデプロイ
working-directory: '.' # 必要に応じて変更
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
ポイント解説
- checkout@v4 でリポジトリの最新コードを取得。
- setup-node@v4 で Node.js（20 系）をインストールし、ローカルと同じ環境を再現。
-
npm ciはpackage-lock.jsonに基づく高速インストール。 -
npm run buildはフレームワークに合わせて変更（例:next build、vite buildなど）。 -
amondnet/vercel-actionが公式に近い形で Vercel へデプロイを実行。vercel-tokenに先ほど登録したシークレットを渡すだけで認証完了です。
4️⃣ デプロイが走ったら？
GitHub の Actions タブ に「Deploy to Vercel」ジョブが表示され、緑のチェックが出れば成功です。
Vercel の Dashboard でも「Deployments」一覧に新しいデプロイが追加されているはずです。これで、コードをプッシュするたびに自動で最新のサイトが公開されます。
5️⃣ さらに踏み込むヒント
-
プレビュー環境：ブランチごとにプレビューを作りたい場合は
on: pull_requestを追加し、vercel-args: '--previews'に変更します。 - 環境変数：API キーやデータベース URL は Vercel の Project Settings → Environment Variables に設定し、GitHub ではシークレットだけで済ませられます。
-
キャッシュ活用：
actions/cacheを使えばnode_modulesのキャッシュが取れ、ビルド時間が短縮できます。
6️⃣ まとめ
- GitHub Actions と Vercel の連携は、数行の YAML で完結します。
- 必要なのは Vercel Token をシークレットに入れるだけ。
- 初心者でも「コードを書いたらすぐに公開」できるシンプルなパイプラインが構築可能です。