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

 

목차

• 문제
• 해결책
• 코드

 

문제

 

apikey를 숨기기 위해 프로젝트에 apikey를 담은 .env 파일을 생성하고 .gitignore에 .env를 추가하여 apikey가 공개 레포지토리에서 보이지 않도록 막았다.

 

하지만 Github pages에 배포된 프로젝트가 apikey를 읽지 못하고 undefined를 url에 담아 api 호출이 제대로 되지 않는 문제가 발생.

 

로컬 서버에서 돌릴때는 apikey를 잘 읽으나 github page서는 읽지 못하고 api 호출을 못하는 상황이 발생하였다.

 

 

해결책

 

1. 프로젝트에 환경변수 추가

 

배포된 프로젝트 환경에 환경변수를 추가해주어야 한다.

 

우선 프로젝트 레포지토리의 settings > Secrets and Variables > Actions 에 들어간다.

 

 

New repository Secret 버튼을 클릭해 환경변수 이름과 값을 등록한다. 주의할점은 꼭 Secrets 탭에서 생성해야한다. 바로 옆 Variables 탭은 데이터가 plain-text로 공개되어 데이터가 가려지지 않는다. 

 

 

Name 에 환경변수 이름 (apikey 변수명)

Secret에 환경변수 값 을 작성하고 저장.

 

 

2. yml 파일 수정

 

프로젝트의 yml 파일에서 jobs > env에 환경변수를 등록해주어야 한다.

 

필자의 환경변수 이름은 'REACT_APP_APIKEY'이다.

 

jobs:
  deploy:
    runs-on: ubuntu-latest

    env:
      REACT_APP_APIKEY: ${{ secrets.REACT_APP_APIKEY }}
      
    steps:
      - uses: actions/checkout@v2

 

 

출처

 

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

 

https://khj0426.tistory.com/239