vite + react + github page 배포 환경에서 환경변수 설정

깃헙 페이지로 배포를 하고 있었고,import.meta객체를 이용해 로컬환경에서 환경변수를 했다.

다만 배포 환경에서는 (env파일이 깃에 올라기지 않는다는 가정하에는) 다른 방법의 환경변수 설정이 필요하다. 

 

firebase등등 보여줘서는 안되는 환경변수들을 배포 시에도 유지하기 위해서 깃헙 secrets을 이용해 환경변수를 관리할 수 있다.

---

github Action secrets?

깃헙 레포의 action secrets는 환경변수를 암호화해서 저장할 수 있는 기능이다. 

결과적으로 로컬환경에서는 .env파일을, github action을 이용한 배포 시에는 , action secrets를 이용해서

환경변수를 관리 할 수 있다.

 

먼저 github Action의 secrets를 저장하는 방법은 간단하다.

깃허브 저장소에서 상단의 Settings에 들어간다.

그 후 좌측 secrets and variables에서 New repository secret버튼을 누른다.

그 후 새로운 Secrets를 등록해주면 끝난다.

https://dnight.tistory.com/entry/GitHub-Actions-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EB%93%B1%EB%A1%9D-%EB%B0%A9%EB%B2%95

GitHub Actions - 환경변수 등록 방법

---

echo 리눅스 명령어

echo명령어는 단순히 터미널에 문자를 표현해주는, 자바스크립트의 console.log와 비슷한 역할을 하지만,

>나 >>를 같이 사용하면 새로운 파일을 만들어준다.

 

-env파일을 만들고 secrets에 등록된 변수를 저장하는 워크플로우는 다음과 같다.

먼저 ${{ secrets.변수명 }}을 사용하면 github secrets의 변수를 가져올 수 있다.

그 후, echo 명령어를 통해 .env를 만들고, ${VITE_API_KEY}형태로 환경변수를 저장해 주었다.

 

-환경변수를 설정하는 워크플로우 부분

  - name: Set Environment Variables
        env:
          VITE_API_KEY: ${{ secrets.VITE_API_KEY }}
          VITE_AUTH_DOMAIN: ${{ secrets.VITE_AUTH_DOMAIN }}
          VITE_MESSAGE_SENDER_ID: ${{ secrets.VITE_MESSAGE_SENDER_ID }}
          VITE_PROJECT_ID: ${{ secrets.VITE_PROJECT_ID }}
          VITE_STORAGE_BUCKET: ${{ secrets.VITE_STORAGE_BUCKET }}
          VITE_APP_ID: ${{ secrets.VITE_APP_ID }}
          VITE_MEASUREMENT_ID: ${{ secrets.VITE_MEASUREMENT_ID }}
        run: |
          echo "VITE_API_KEY=${VITE_API_KEY}" >> .env
          echo "VITE_AUTH_DOMAIN=${VITE_AUTH_DOMAIN}" >> .env
          echo "VITE_MESSAGE_SENDER_ID=${VITE_MESSAGE_SENDER_ID}" >> .env
          echo "VITE_PROJECT_ID=${VITE_PROJECT_ID}" >> .env
          echo "VITE_STORAGE_BUCKET=${VITE_STORAGE_BUCKET}" >> .env
          echo "VITE_APP_ID=${VITE_APP_ID}" >> .env
          echo "VITE_MEASUREMENT_ID=${VITE_MEASUREMENT_ID}" >> .env

--전체 워크플로우 코드

name: Build and Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        
	//패키지를 캐싱하는 워크플로우
      - name: Cache Dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: ${{ runner.os }}-node-
          
	//의존성 패키지 설지하는 부분
      - name: Install Dependencies
        run: npm ci
	
    //빌드
      - name: Build
        run: npm run build
	
    //환경변수 설정.env파일을 만들고,GithubSecrets의 변수를 등록하고
      - name: Set Environment Variables
        env:
          VITE_API_KEY: ${{ secrets.VITE_API_KEY }}
          VITE_AUTH_DOMAIN: ${{ secrets.VITE_AUTH_DOMAIN }}
          VITE_MESSAGE_SENDER_ID: ${{ secrets.VITE_MESSAGE_SENDER_ID }}
          VITE_PROJECT_ID: ${{ secrets.VITE_PROJECT_ID }}
          VITE_STORAGE_BUCKET: ${{ secrets.VITE_STORAGE_BUCKET }}
          VITE_APP_ID: ${{ secrets.VITE_APP_ID }}
          VITE_MEASUREMENT_ID: ${{ secrets.VITE_MEASUREMENT_ID }}
          
     //env파일에 추가해준다.
        run: |
          echo "VITE_API_KEY=${VITE_API_KEY}" >> .env
          echo "VITE_AUTH_DOMAIN=${VITE_AUTH_DOMAIN}" >> .env
          echo "VITE_MESSAGE_SENDER_ID=${VITE_MESSAGE_SENDER_ID}" >> .env
          echo "VITE_PROJECT_ID=${VITE_PROJECT_ID}" >> .env
          echo "VITE_STORAGE_BUCKET=${VITE_STORAGE_BUCKET}" >> .env
          echo "VITE_APP_ID=${VITE_APP_ID}" >> .env
          echo "VITE_MEASUREMENT_ID=${VITE_MEASUREMENT_ID}" >> .env

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
          publish_dir: ./out

다만 이렇게 배포를 했을 때 환경변수가 적용이 안되는 문제가 발생했다. 

문제가 발생한 이유는 github action에서 .env파일을 만들 경우, 이 파일은 액션 실행 도중에만 존재한다.

 

결과적으로 액션이 종료되면 파일도 함께 제거가 되고, 결과적으로 애플리케이션 실행 중에는

.env파일이 존재하지 않게 된다.

 

따라서 .env파일을 만들고 환경변수를 사용하는 방법은 애플리케이션 실행 중에 환경변수가 존재하지 않게 되는 문제가

있었고, 결과적으로 애플레키이션 실행에 필요한 환경변수를 가져오지 못하게 된다.

---

바뀐부분

 - name: Set environment variables
        run: |
          echo "VITE_API_KEY=${{ secrets.VITE_API_KEY }}" >> $GITHUB_ENV
          echo "VITE_AUTH_DOMAIN=${{ secrets.VITE_AUTH_DOMAIN }}" >> $GITHUB_ENV
          echo "VITE_MESSAGE_SENDER_ID=${{ secrets.VITE_MESSAGE_SENDER_ID }}" >> $GITHUB_ENV
          echo "VITE_PROJECT_ID=${{ secrets.VITE_PROJECT_ID }}" >> $GITHUB_ENV
          echo "VITE_STORAGE_BUCKET=${{ secrets.VITE_STORAGE_BUCKET }}" >> $GITHUB_ENV
          echo "VITE_APP_ID=${{ secrets.VITE_APP_ID }}" >> $GITHUB_ENV
          echo "VITE_MEASUREMENT_ID=${{ secrets.VITE_MEASUREMENT_ID }}" >> $GITHUB_ENV

.env파일을 만들고 환경변수를 저장하는 대신, secrets의 변수를 $GITHUB_ENV에 추가한다.

이 $GITHUB_ENV는 Github action에서 사용하는 변수로 , 애플리케이션 실행 중에도 유지된다.

 

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
          restore-keys: ${{ runner.os }}-npm-

      - name: Install dependencies
        run: npm ci

      - name: Set environment variables
        run: |
          echo "VITE_API_KEY=${{ secrets.VITE_API_KEY }}" >> $GITHUB_ENV
          echo "VITE_AUTH_DOMAIN=${{ secrets.VITE_AUTH_DOMAIN }}" >> $GITHUB_ENV
          echo "VITE_MESSAGE_SENDER_ID=${{ secrets.VITE_MESSAGE_SENDER_ID }}" >> $GITHUB_ENV
          echo "VITE_PROJECT_ID=${{ secrets.VITE_PROJECT_ID }}" >> $GITHUB_ENV
          echo "VITE_STORAGE_BUCKET=${{ secrets.VITE_STORAGE_BUCKET }}" >> $GITHUB_ENV
          echo "VITE_APP_ID=${{ secrets.VITE_APP_ID }}" >> $GITHUB_ENV
          echo "VITE_MEASUREMENT_ID=${{ secrets.VITE_MEASUREMENT_ID }}" >> $GITHUB_ENV

      - name: Building apps
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build