はじめに

このガイドでは、バックエンドとフロントエンドを一つのリポジトリで管理するモノリポ形式のプロジェクトで、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認証情報の取得

HEROKU_API_KEY
- Herokuダッシュボードの"Account Settings"にアクセス
- "API Key"セクションで"Reveal"をクリックしてキーを表示
HEROKU_APP_NAME
- Herokuダッシュボードで新しいアプリケーションを作成
- 作成したアプリケーション名を使用
HEROKU_EMAIL
- Herokuアカウントのメールアドレス

Vercel認証情報の取得

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

GitHub Secretsの設定

GitHubリポジトリの"Settings" → "Secrets and variables" → "Actions"にアクセス
"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ブランチに対して更新が入るとデプロイが実行されます。