モノリポプロジェクトでGitHub ActionsによるHerokuとVercelへの自動デプロイを設定する

はじめに

このガイドでは、バックエンドとフロントエンドを一つのリポジトリで管理するモノリポ形式のプロジェクトで、GitHub Actionsを使用して以下を実現する方法を解説します。
最近の構成ではフロントエンドにVercelが選択されることが多く、ここではフロントエンド＝Vercel、バックエンド＝Herokuの場合で進めたいと思います。
以下の機能を持たせたいと思います。

• mainブランチの更新時に実行される
• CI workflowの成功後のみデプロイが始まる
• バックエンドに変更があった時だけHerokuに自動デプロイ
• フロントエンドに変更があった時だけVercelに自動デプロイ

HerokuとVercelはGitHubと連携した自動デプロイ機能がありますが、GitHub Actionsを使用する理由としては以下の理由があります。

• デプロイの設定や履歴をGitHub上で一元管理
• 複数のデプロイ先を同じワークフロー形式で管理
• デプロイ前後の処理を自由に追加可能などカスタマイズ性が高い

プロジェクト構成例

your-project/
├── backend/         # バックエンドディレクトリ
├── Procfile         # Heroku Procfile
├── frontend/        # フロントエンドディレクトリ
└── .github/
    └── workflows/   # GitHub Actions設定ディレクトリ

認証情報の取得

Heroku認証情報の取得

1. HEROKU_API_KEY

   • Herokuダッシュボードの"Account Settings"にアクセス
   • "API Key"セクションで"Reveal"をクリックしてキーを表示

2. HEROKU_APP_NAME

   • Herokuダッシュボードで新しいアプリケーションを作成
   • 作成したアプリケーション名を使用

3. HEROKU_EMAIL

   • Herokuアカウントのメールアドレス

Vercel認証情報の取得

1. VERCEL_TOKEN

   • Tokensにアクセス
   • "Create Token"をクリック
   • 名前を入力（例："GitHub Actions"）
   • スコープ（わからなければ"Full Account"）を選択
   • 作成されたトークンを保存

2. VERCEL_ORG_ID / VERCEL_PROJECT_ID

   • Vercel CLIをインストールする
     npmならnpm i -g vercel@latest
   • vercel linkコマンドを実行する
     コンソールの指示通りに進めていく
   • .vercelディレクトリが作成され、project.jsonの中にprojectIdとorgIdが記載されている

GitHub Secretsの設定

1. GitHubリポジトリの"Settings" → "Secrets and variables" → "Actions"にアクセス
2. "New repository secret"で先ほど取得した情報を追加する
   • HEROKU_API_KEY
   • HEROKU_APP_NAME
   • HEROKU_EMAIL
   • VERCEL_TOKEN
   • VERCEL_ORG_ID
   • VERCEL_PROJECT_ID

Herokuのモノリポ用Procfileの配置

# Procfile
web: cd backend && java -Dserver.port=$PORT $JAVA_OPTS -jar build/libs/*.jar --spring.profiles.active=prod

GitHub Actionsワークフローの設定

バックエンドデプロイ

# .github/workflows/deploy-backend.yml
name: Deploy Backend

on:
  workflow_run:
    branches:
      - main
    paths:
      - 'backend/**' # backendに変更のあった時のみ実行

jobs:
  deploy:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - uses: akhileshns/heroku-deploy@v3.13.15
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: ${{secrets.HEROKU_APP_NAME}}
          heroku_email: ${{secrets.HEROKU_EMAIL}}
          buildpack: "https://github.com/lstoll/heroku-buildpack-monorepo.git,heroku/gradle" # 必要に応じて変更

フロントエンドデプロイ

# .github/workflows/deploy-frontend.yml
name: Deploy Frontend

on:
  push:
    branches:
      - main
    paths:
      - 'frontend/**' # frontendに変更のあった時のみ実行

jobs:
  deploy:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: ./frontend

実行手順

あとはmainブランチに対して更新が入るとデプロイが実行されます。