1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Keita-0025(keita)

GitHub Actionsビルド時の環境変数設定

1
Posted at

はじめに

個人開発でGithubActionを使用してCIを組んでいるとErrorに遭遇して時間を要したのでまとめる

この記事で分かること

この記事では、GitHub ActionsでCI/CDを構築する際に、Viteプロジェクトの環境変数を正しく設定する方法について説明します。

  • 問題の内容: .envファイルがGitHub Actionsで読み込めず、ビルド時に環境変数がundefinedになり、デプロイ後のサイトが真っ白になる問題
  • 問題の原因:
    • .envファイルは.gitignoreに含まれており、リポジトリに含まれない
    • GitHub Actionsの実行環境には.envファイルが存在しない
    • ビルド時に環境変数が設定されていないため、Supabaseクライアントの初期化に失敗
  • 解決方法:
    • GitHub Secretsに環境変数を設定する
    • ワークフローファイルのenv:セクションで環境変数を設定する
  • 実装例: Vite + React + SupabaseプロジェクトでのGitHub Actions設定を例に、修正前後のコードと推奨パターンを紹介

1. 問題の発生

エラーの症状

  • GitHub Actionsでのビルドは成功する
  • デプロイも成功する
  • しかし、デプロイ後のサイトにアクセスすると真っ白な画面が表示される

エラーの原因

Viteプロジェクトでは、環境変数はビルド時にimport.meta.envに埋め込まれます。しかし、GitHub Actionsの実行環境には.envファイルが存在しないため、環境変数がundefinedになり、アプリケーションが正常に動作しません。

// src/index.jsx:10
const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,      // ← undefined
  import.meta.env.VITE_SUPABASE_ANON_KEY  // ← undefined
);

環境変数がundefinedの場合、Supabaseクライアントの初期化に失敗し、アプリケーションがクラッシュして真っ白な画面が表示されます。

2. 問題の原因（コード例）

ローカル環境での動作

ローカル環境では、プロジェクトルートに.envファイルを配置することで、環境変数が正しく読み込まれます。

# .env
VITE_SUPABASE_URL="https://your-project.supabase.co"
VITE_SUPABASE_ANON_KEY="your-anon-key"

// ローカルでは正常に動作
const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,      // ✅ "https://your-project.supabase.co"
  import.meta.env.VITE_SUPABASE_ANON_KEY  // ✅ "your-anon-key"
);

GitHub Actionsでの問題

しかし、.envファイルは.gitignoreに含まれているため、リポジトリに含まれません。

# .gitignore
.env

そのため、GitHub Actionsの実行環境には.envファイルが存在せず、環境変数がundefinedになります。

// GitHub Actionsでは環境変数がundefined
const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,      // ❌ undefined
  import.meta.env.VITE_SUPABASE_ANON_KEY  // ❌ undefined
);

3. 解決方法

GitHub Secretsに環境変数を設定する

GitHub Secretsを使用して、環境変数を安全に保存し、GitHub Actionsから参照できるようにします。

手順

  1. GitHubリポジトリのSettingsを開く
  2. 左サイドバーからSecrets and variables → Actionsをクリック
  3. New repository secretをクリック
  4. 環境変数の名前と値を入力して保存

設定するSecrets:

  • VITE_SUPABASE_URL: SupabaseプロジェクトのURL
  • VITE_SUPABASE_ANON_KEY: Supabaseの匿名キー

ワークフローファイルで環境変数を設定する

GitHub Actionsのワークフローファイルで、ビルドステップのenv:セクションに環境変数を設定します。

修正前（環境変数が設定されていない）

# .github/workflows/deploy.yml
- name: build
  run: npm i && npm run build  # ❌ 環境変数が設定されていない

修正後（環境変数を設定）

# .github/workflows/deploy.yml
- name: build
  env:
    VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
    VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
  run: npm i && npm run build  # ✅ 環境変数が設定されている

完全なワークフローファイル例

name: build and deploy

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 22
      - name: build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
        run: npm i && npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

4. よくある間違いと対処法

間違い1: .envファイルをリポジトリに含める

# ❌ 悪い例：.envファイルをコミットする
# .gitignoreから.envを削除してしまう

問題点:

  • 機密情報（APIキーなど）がリポジトリに含まれてしまう
  • セキュリティリスクが発生する

正しい方法:

  • .envファイルは必ず.gitignoreに含める
  • GitHub Secretsを使用して環境変数を管理する

間違い2: ワークフローファイルで.envファイルを読み込もうとする

# ❌ 悪い例：.envファイルを読み込もうとする
- name: build
  run: |
    cp .env.example .env  # .envファイルが存在しない
    npm i && npm run build

問題点:

  • .envファイルはリポジトリに含まれていないため、読み込めない

正しい方法:

  • env:セクションで直接環境変数を設定する

間違い3: 環境変数のプレフィックスを忘れる

# ❌ 悪い例：VITE_プレフィックスがない
env:
  SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}  # ❌ Viteでは読み込まれない

問題点:

  • Viteでは、環境変数はVITE_プレフィックスが必要
  • VITE_がない環境変数はビルド時に読み込まれない

正しい方法:

  • 環境変数名にVITE_プレフィックスを付ける
# ✅ 正しい例
env:
  VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
  VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

まとめ

  • ❌ .envファイルをGitHub Actionsで直接読み込むことはできない（.gitignoreに含まれているため）
  • ✅ GitHub Secretsに環境変数を設定する
  • ✅ ワークフローファイルのenv:セクションで環境変数を設定する
  • ✅ Viteプロジェクトでは、環境変数名にVITE_プレフィックスが必要
  • ✅ ビルド時に環境変数が正しく設定されていれば、デプロイ後のサイトが正常に動作する

この設定により、GitHub Actionsでのビルド時に環境変数が正しく設定され、デプロイ後のサイトが正常に動作するようになりました

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?