[GitHub Actions] Vite + React 배포 시 Supabase 환경 변수(Secrets) 인식 오류 해결

Vite로 만든 프로젝트를 GitHub Pages에 배포할 때, 분명 GitHub Secrets에 변수를 등록했는데도 환경 변수를 찾을 수 없습니다라는 에러가 떴다...

이 문제로 한참 고생하다가, 빌드 시점에 환경 변수를 강제로 주입하는 방법으로 해결했다.

 

 

1. GitHub Repository Secrets 등록

위에만 등록했을 때는 인식 안 되다가 아래 등록하니까 바로 인식됨;;

 

Environment secrets가 아니라 Repository secrets에 등록해야 워크플로우에서 바로 인식하기 쉽다.

1. GitHub 저장소 > Settings > Secrets and variables > Actions 이동
2. 하단의 Repository secrets 섹션에서 New repository secret 클릭
3. Vite에서 사용하는 이름 그대로 등록 (예: `VITE_SUPABASE_URL`, `VITE_SUPABASE_ANON_KEY` 등) -> 위에 Environment Secret 등록한 내용 그대로 입력하면 된다. 키 이름이랑 키 값 각각 등록.

 

2. Workflow(deploy.yml) 파일 수정

빌드(`npm run build`) 명령어를 실행하기 바로 전 단계에서 echo 명령어로 `.env.production` 파일을 생성한다.

      - name: Install dependencies
        run: npm install

      # [핵심 단계] Secrets를 읽어와서 .env.production 파일을 냅다 만들어버립니다.
      - name: Create .env file from Secrets
        run: |
          echo "VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}" >> .env.production
          echo "VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}" >> .env.production
          echo "VITE_EMAILJS_PUBLIC_KEY=${{ secrets.VITE_EMAILJS_PUBLIC_KEY }}" >> .env.production
          echo "VITE_EMAILJS_SERVICE_ID=${{ secrets.VITE_EMAILJS_SERVICE_ID }}" >> .env.production
          echo "VITE_EMAILJS_TEMPLATE_ID=${{ secrets.VITE_EMAILJS_TEMPLATE_ID }}" >> .env.production

      - name: Build
        run: npm run build

 

아래는 전문

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

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

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"

      - name: Install dependencies
        run: npm install

      # [핵심] 빌드 전에 Secrets를 읽어서 .env.production 파일을 직접 생성합니다.
      - name: Create .env file from Secrets
        run: |
          echo "VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}" >> .env.production
          echo "VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}" >> .env.production
          echo "VITE_EMAILJS_PUBLIC_KEY=${{ secrets.VITE_EMAILJS_PUBLIC_KEY }}" >> .env.production
          echo "VITE_EMAILJS_SERVICE_ID=${{ secrets.VITE_EMAILJS_SERVICE_ID }}" >> .env.production
          echo "VITE_EMAILJS_TEMPLATE_ID=${{ secrets.VITE_EMAILJS_TEMPLATE_ID }}" >> .env.production

      - name: Build
        run: npm run build
        # 혹시 몰라 env 주입 방식도 유지합니다 (이중 안전장치)
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
          VITE_EMAILJS_PUBLIC_KEY: ${{ secrets.VITE_EMAILJS_PUBLIC_KEY }}
          VITE_EMAILJS_SERVICE_ID: ${{ secrets.VITE_EMAILJS_SERVICE_ID }}
          VITE_EMAILJS_TEMPLATE_ID: ${{ secrets.VITE_EMAILJS_TEMPLATE_ID }}

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    needs: build_site
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

위와 같이 작성해서 push했다.

별도의 deploy 명령 없이 알아서 배포되었다.

 

 

(추가) 3. 커스텀 도메인 DNS 설정

서브도메인(예: `cote.example.com`)을 사용한다면 DNS 설정에서 CNAME 레코드 값에 경로(/)를 절대 포함시키면 안 된다.

• 잘못된 예: 아이디.github.io/project-name/
• 올바른 예: 아이디.github.io

 

 

이렇게 파일을 직접 생성해서 주입하는 방식을 사용해서 배포를 완료했다.

이 문제 때문에 몇 시간이나 허비했는데 해결이 되어서 다행이다.

배포는 정말 어렵다....😥