【Vercel】GitHub Actions経由で自動デプロイを実装する方法を紹介


GitHub Actionsを経由して、Vercelに自動デプロイすることは可能なの?
この記事では、VercelをGitHub Actionsを経由して自動デプロイする方法を紹介します。
ステップは以下の通りです。
- 前提
- 実装手順
最後までご覧いただけると幸いです。
スポンサーリンク
前提
この記事では、すでにGitHubのプロジェクトをVercelにデプロイしていることを前提としています。まだデプロイしていない場合は、以下の記事も併せてご覧ください。
スポンサーリンク
実装手順
基本的にはVercel公式の通りに実装すれば問題ありませんが、以下から詳しく解説します。
ファイルの作成
GitHub Actionsを動作させるために、まずファイルを作成します。
プロジェクトのルートに .github ディレクトリを作成し、その中にさらに workflows ディレクトリを作成します。最終的に /.github/workflows/ という構成になります。
workflows の中に、任意の名前で .yml ファイルを作成します。今回は deploy_vercel.yml とします。このファイルに、Vercel公式サイトに記載されているコードをコピーしてください。
name: Vercel Preview Deployment
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches-ignore:
- main
jobs:
Deploy-Preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
この設定では、現在 main ブランチにプッシュされた際にVercelにデプロイされるようになっています。develop ブランチにプッシュした際にデプロイしたい場合は、以下のように設定を変更してください。
on:
push:
branches-ignore:
- develop
これでコードの実装は完了です。
スポンサーリンク
シークレットの設定
次に、今回デプロイを行うGitHubリポジトリにリポジトリシークレットを設定します。
詳しい設定方法については、以下の記事をご覧ください。
必要なシークレットは、ymlファイルに記述されていた以下の3つです。
${{ secrets.VERCEL_ORG_ID }}
${{ secrets.VERCEL_PROJECT_ID }}
${{ secrets.VERCEL_TOKEN }}
VERCEL_ORG_IDの取得
Vercelの右上にあるアカウントアイコンをクリックし、「Account Settings」を開きます。
「General」タブの中にあるVercel IDが該当します。
VERCEL_PROJECT_IDの取得
Vercelで自動デプロイを設定するプロジェクトを開きます。
「Settings」の「General」タブから確認できます。
VERCEL_TOKENの取得
「Account Settings」の「Tokens」タブでトークンを作成します。
トークン作成時の設定は以下の通りです。
- TOKEN_NAME: 任意の名前
- SCOPE: 該当するプロジェクトを選択
- EXPIRATION: 有効期限を任意に選択
ここで作成したトークンを使用します。
最終的に、リポジトリシークレットに以下を設定すれば完了です。
VERCEL_ORG_ID = <取得したID>
VERCEL_PROJECT_ID = <取得したプロジェクトID>
VERCEL_TOKEN = <作成したトークン>
スポンサーリンク
GitHubにプッシュ
最後にGitHubにプッシュします。
プッシュ後即座にGitHub Actionsが動作し、最終的にはVercelへのデプロイが完了します。
スポンサーリンク
最後に
ここまで、VercelのデプロイをGitHub Actionsを経由して行う方法を紹介しました。難しい設定も必要なく、簡単に実装できるかと思います。ぜひ一度試してみてください。
ここまでお読みいただき、ありがとうございました。
スポンサーリンク
スポンサーリンク