この記事の概要
Vercelへのデプロイのトリガーを変更するための方法を紹介しています。
通常はmainブランチ(VercelのProduction Branchとして設定しているブランチ)へpushした時ですが、特定のタグ(例:v1.0
)をpushした時にデプロイするように変更します。
Vercelの自動デプロイの設定を無効化する
vercel.json
はVercelのデフォルトの動作を設定、上書きするためのファイルです。このファイルへの設定追加でVercelの自動デプロイの設定を無効化します。
vercel.jsonの例
vercel.jsonの git.deploymentEnabled
を false
にして自動デプロイを無効化します。
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
![How to Deploy Based on Tags or Releases on Vercel](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F437b3b51-5621-4781-a420-76b7bd87ec68.png&w=3840&q=75)
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
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
![I use github action and vercel to deploy my project(vite+react+pnpm) to vercel, action said error: "Error: spawn pnpm ENOENT"](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F5d72506b-ad69-4bd6-b9e8-f1c6d5152ed3.png&w=640&q=75)