🏷️

Vercelでタグのpushによるデプロイをするための設定方法

公開日
25日前
2024-06-18
更新履歴

この記事の概要

Vercelへのデプロイのトリガーを変更するための方法を紹介しています。

通常はmainブランチ(VercelのProduction Branchとして設定しているブランチ)へpushした時ですが、特定のタグ(例:v1.0)をpushした時にデプロイするように変更します。

Vercelの自動デプロイの設定を無効化する

vercel.json はVercelのデフォルトの動作を設定、上書きするためのファイルです。このファイルへの設定追加でVercelの自動デプロイの設定を無効化します。

vercel.jsonの例

vercel.jsonの git.deploymentEnabledfalse にして自動デプロイを無効化します。

vercel.json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "git": {
    "deploymentEnabled": false
  }
}

GitHubにシークレットを追加

  • VERCEL_ORG_ID
  • VERCEL_PROJECT_ID
  • VERCEL_TOKEN

これら3つの値をGitHubのシークレットとして追加します。

VERCEL_ORG_ID

VercelのWEBの管理画面でTeamを選択して、「Settings」→「General」→「Team ID」の値を設定します。

VERCEL_PROJECT_ID

VercelのWEBの管理画面でProjectを選択して、「Settings」→「General」→「Project ID」の値を設定します。

VERCEL_TOKEN

VercelのWEBの管理画面で「Account Settings」→「Tokens」からトークンを作成して設定します。

GitHub Actions ワークフローの定義

pnpmを使っている場合は、公式ドキュメントに書いてあるワークフローのyamlを以下のように書き換えましょう。

.github/workflows/deploy.yaml
name: Vercel Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    tags:
      - 'v*'
jobs:
  deploy-production:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - uses: pnpm/action-setup@v2
        name: Install pnpm
        id: pnpm-install
        with:
          version: 9
          run_install: false
      - name: Install Vercel CLI
        run: pnpm add --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

以上で、タグのpushでVercelのデプロイが可能になります。

参考

How to Deploy Based on Tags or Releases on Vercel
Learn how to use tags and releases to deploy to Vercel, as well as best practices when deploying using these methods.
vercel.com favicon
vercel.com
How to Deploy Based on Tags or Releases on Vercel
Configuring Projects with vercel.json
Learn how to use vercel.json to configure and override the default behavior of Vercel from within your project.
vercel.com favicon
vercel.com
I use github action and vercel to deploy my project(vite+react+pnpm) to vercel, action said error: "Error: spawn pnpm ENOENT"
when I push my github project, the github action was executed, but it failed, the error message from the action is below: Run vercel build --prod --token=*** Vercel CLI 28.10.3 Detected `pnpm-lock....
stackoverflow.com favicon
stackoverflow.com
I use github action and vercel to deploy my project(vite+react+pnpm) to vercel, action said error: "Error: spawn pnpm ENOENT"