[FE] github actions 배포용 환경변수파일 생성하기 env 깃헙액션 시크릿활용하기

기존 env는 gitignore에 등록되어있어 깃헙에 올라가지 않도록 설정되어있지요.

그렇다면 배포용 main 레포지토리는 어떻게 환경변수를 관리할까요?

 

저희 팀은 깃헙의 액션스 시크릿을 활용했습니다!

 

.env파일을 삭제하고 깃헙 액션스 시크릿에 등록하면 코드상 바뀌어야 할 부분은 없는데요,

다음 코드는 process.env를 이용한 예시입니다. 

export const instance = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
});

axios instance를 적극적으로 이용하고있는 저희 팀은 이렇게 baseURL을 생성했습니다. 

 

axios 통신시에 baseurl 뒤에 추가적인 주소를 붙일 땐 templete literal을 이용하여 

`${process.env.REACT_APP_BASE_URL}/social/signup`

 이렇게 이용할 수도 있습니다. 

 

.env파일을 삭제한다고 말씀드렸는데요, 그럼 변수가 설정되지 않은 채로 어떻게 코드가 실행될까요?

 

1. Repository-settings-security-secrets and variables-Actions 

이미 깃헙액션으로 배포를 하셨다면 AWS key id와 access key가 저장되어있을텐데요, New repository secret을 클릭해서 새로운 시크릿을 추가합니다. 

시크릿 네임은 env 변수명과 동일하게 지어주고, 시크릿에 내용을 담아주면 됩니다. 

 

2. yml파일 jobs에 env 세팅 추가하기

      - name: Setting .env
        run: |
          echo "REACT_APP_BASE_URL=${{ secrets.REACT_APP_BASE_URL }}" >> .env
          echo "리액트코드내에서이용하고있는변수명=${{ secrets.시크릿에저장한변수명}}" >>.env

jobs내에 Setting .env를 추가해서

echo 명령어를 이용하여 위와 같이 env를 생성할 수 있습니다!!!

 

 

node modules파일을 깃헙에 올리지 않아도 깃헙액션이 실행되며 생성되는 것 처럼

secret에 등록한 모든 변수를 yml로 위와 같이 secret과 연결해주면 .env 파일이 없어도 깃헙액션이 실행되며 생성됩니다!

 

수정된 yml을 커밋하고 깃헙액션이 다 돌아가면..!

 

env파일없이 네트워크 200이 잘 출력되는걸 보실 수 있을거에용 😀😀

 

다음은 네이버로그인 검수 성공한 스토리로 돌아오겠습니다..!!! 

읽어주셔서 감사합니다!

 

저희 그님스는 잘못된 정보에 대한 지적과 조언의 댓글을 언제나 환영합니다! 

저희 그님스 서비스를 이용해보시려면...

👇

https://gnims.kr/