はじめに
Vercelを使用しCICDの設定を初めて行ったのですが、やはり最初は数時間どのように設定するのか悩みすぎました。💦
今回は、公式に従った Vercel での CICD 設定を行っていきたいと思います。
エラー内容
Error: Project not found ({"VERCEL_PROJECT_ID":"***","VERCEL_ORG_ID":"***"})
エラー原因
このエラーは、Vercel CLIが指定されたProject IDとOrg IDを照合した際に
「その組み合わせのプロジェクトが見つからない」と判断したときに発生します。
つまり、GitHub Actionsで使っている以下2つの値のどちらかが間違っています👇
VERCEL_ORG_ID（チーム or 個人のID）
VERCEL_PROJECT_ID（対象プロジェクトのID）
VERCEL_ORG_ID の取得方法
- Vercelダッシュボードにログイン
- Settingをクリック
- スクロールすると下記のような文字列があります。
Team ID
This is your team's ID within Vercel.
上記のteam_から始まる文字列が VERCEL_ORG_ID になります。
VERCEL_PROJECT_ID の取得方法
- Vercelダッシュボードにログイン
- プロジェクトを開きます
3.ここでSettingを開きます。
- スクロールすると下記のような文字列があります。
Project ID
Used when interacting with the Vercel API.
上記のprj_から始まる文字列が VERCEL_PROJECT_ID になります。
VERCEL_TOKEN
- Vercelダッシュボードにログイン
- アイコンをクリックし、Account Settings をクリック
- Tokensをクリックし青色で囲まれた部分を入力しましょう。
VERCEL_TOKEN という名前で今回はトークン名を指定します。
個人か、チームかを選択し、期限を設定します。
そうするとトークンが発行されるので控えるようにしましょう。(一度しか発行されないため注意)
GitHub Secrets に設定
取得した下記を設定していきます。
- VERCEL_ORG_ID
- VERCEL_PROJECT_ID
- VERCEL_TOKEN
- GitHub リポジトリに移動しSettingをクリック
- Secrets and variables をクリックし Actions を開きます
- 下記があるのでこちらをクリック
- 下記に順次、取得したトークンを入力していきます。
Name は自身が分かりやすいものを設定し、Secret は取得したトークンを入力します。
(team_... , prj_ , gitで保存したトークン)
CICDコード
name: Deploy
on:
workflow_dispatch: {}
schedule:
- cron: "0 14 * * *" # 毎日23時(JST)に実行
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 20
- name: Install dependencies
run: npm install
- name: Deploy to Vercel
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
vercel-args: '--prod'
おわりに
Vercelは使いやすい反面、IDの取得場所が直観的ではなく設定に時間がかかってしまう方が多いと思い今回はまとめさせていただきました。
私自身も困ってしまっていたので、他の方の参考になればと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼
下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼