GitHub Actions 簡易的なCI/CDで詰まった部分の備忘録

背景

• 学習記録アプリをGitHub Actionsを利用して、Reactをbuild、testを実行、deployを行った
• その時に失敗したことを記述する
• なんだかんだでここまでの設定を自分でしたのは初めてかも

技術スタック

• React — フロントエンドUIライブラリ
• Vite — Reactのビルドツール
• Supabase — バックエンド（認証・データベース）
• Firebase Hosting — ビルド済みの静的ファイルをホスティング
• GitHub Actions — build / test / deploy を自動化するCI/CDパイプライン

ソースコード

name: main

on: 
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build application
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
      - name: Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: build-artifacts
          path: dist
  spec:
    name: Spec
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Run spec
        run: npm run test
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Download build artifacts
        uses: actions/download-artifact@v4
        with:
          name: build-artifacts
          path: dist
      - name: Install Firebase CLI
        run: npm install -g firebase-tools
      - name: Prepare Google Application Credentials
        run: echo "${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}" | base64 --decode > $HOME/private-key.json
      - name: Deploy to Firebase
        run: export GOOGLE_APPLICATION_CREDENTIALS=$HOME/private-key.json && firebase deploy --only hosting
      - name: Remove private key
        if: always()
        run: rm $HOME/private-key.json

exportと後続コマンドを&&で繋がないと実行されない問題

エラー内容

firebase deployコマンドが実行されず、デプロイが行われなかった

原因

# 修正前
run: export GOOGLE_APPLICATION_CREDENTIALS=$HOME/private-key.json firebase deploy --only hosting

exportとfirebase deployが1つのコマンドとして記述されていた
シェルはexport VAR=valueの後に続くfirebase deploy ...もexportの引数として解釈するため、firebase deployが独立したコマンドとして実行されない

解決策

# 修正後
run: export GOOGLE_APPLICATION_CREDENTIALS=$HOME/private-key.json && firebase deploy --only hosting

&&で2つのコマンドを繋ぎ、exportが成功した後にfirebase deployを実行するようにした

download-artifactでpathを指定しないとディレクトリ構造がずれる

エラー内容

Error: Directory 'dist' for Hosting does not exist.

Firebaseのデプロイ時に、公開ディレクトリとして指定されたdistが見つからなかった

原因

# 修正前（download-artifactにpath指定なし）
- name: Download build artifacts
  uses: actions/download-artifact@v4
  with:
    name: build-artifacts

actions/upload-artifact@v4でpath: distを指定すると、distディレクトリの中身がアーティファクトとして保存される
一方、actions/download-artifact@v4でpathを指定しなかった場合、デフォルトでカレントディレクトリ直下にファイルが展開される

結果、ディレクトリ構造は以下のようになる

.                       # カレントディレクトリ
├── firebase.json
├── index.html          # ← dist/の中身が直下に展開される
└── assets/

firebase.jsonの"public": "dist"が参照するdist/ディレクトリは存在しないためエラーになった

解決策

# 修正後
- name: Download build artifacts
  uses: actions/download-artifact@v4
  with:
    name: build-artifacts
    path: dist

path: distを指定することで、ダウンロードしたファイルがdist/ディレクトリ内に展開されるようにした
これによりfirebase.jsonの"public": "dist"と整合が取れる

deployジョブに不要なNode.jsセットアップとnpm installがあった

問題

エラーにはならないが、デプロイの実行時間が無駄に長くなっていた

修正前の構成

deploy:
  steps:
    - name: Checkout code
      uses: actions/checkout@v4
    - name: Download build artifacts
      uses: actions/download-artifact@v4
      ...
    - name: Set up Node.js          # ← 不要
      uses: actions/setup-node@v4
      with:
        node-version: '22'
        cache: 'npm'
    - name: Install dependencies     # ← 不要
      run: npm install
    - name: Install Firebase CLI
      run: npm install -g firebase-tools
    ...

なぜ不要なのか

deployジョブの役割はビルド済みの成果物をFirebaseにデプロイすることだけである

• actions/setup-node@v4が不要な理由 — Firebase CLIはnpm install -gでグローバルインストールする。GitHub Actionsのランナーにはデフォルトで Node.jsがプリインストールされており、それで十分動作する
• npm installが不要な理由 — プロジェクトの依存関係（node_modules）はビルド時に必要なものであり、デプロイ時には使わない。Firebase CLIはグローバルにインストールされるため、プロジェクトのpackage.jsonの依存関係は不要

修正後の構成

deploy:
  steps:
    - name: Checkout code
      uses: actions/checkout@v4
    - name: Download build artifacts
      uses: actions/download-artifact@v4
      ...
    - name: Install Firebase CLI
      run: npm install -g firebase-tools
    ...

不要なステップを省くことで、CIの実行時間短縮とランナーリソースの節約になる

感想

• CDはじめて取り組みました。Firebaseは比較的デプロイ簡単ですがイメージはなんとなく掴めた

参考