gitaction을 통한 빌드시 환경변수 적용하기

결론부터 말하자면, 프론트엔드에서 환경변수를 적용할 필요가 있을까? 라는 의문이 든다.

블로그를 통해서 O-auth코드 예시를 보고, 감정적으로 서버 url을 최대한 숨겨주는게 좋지 않을까라는 막연한 생각하에 환경변수로 관리했는데, 결국 유저가 네트워크를 확인하면 다 노출될 수 밖에 없다. ( 혹시 틀린 점이 있따면 알려주세요 ㅠ)

근데 단순히 github에 올리지 않는 용도 밖의 큰 의미가 없는 build시 필요한 정보들을 환경변수로 관리할 필요가 있을까??

전 아니라고 생각합니다..  

 

 

-------------------------------

그렇지만 난 이미 환경변수를 사용했고!! 현재 내 프로젝트에서 빌드된 파일에서 환경변수가 제대로 적용되지 않는 에러를 해결해보고 싶었습니다.

문제를 인식한 계기는

아직 서버와 연결하지 않았는데, 카카오 지도가 정상적으로 뜨지 않았습니다. 이게 수상해서 build 메시지를 확인했더니 아래와 같은 에러가,,,

에러 메시지는  index.html에 작성한  VITE_KAKAO_JS_KEY 에서만 떳지만, 다른 환경변수는 제대로 됐을까 확인하니 다른 환경 변수도 적용되지 않았습니다.

            docker run -d -p 80:8080  \
            -e VITE_KAKAO_JS_KEY=${{ env.VITE_KAKAO_JS_KEY }} \
            -e VITE_KAKAO_KEY=${{ env.VITE_KAKAO_KEY }} \
            -e VITE_SERVER_URL=${{ env.VITE_SERVER_URL }} \
            --name houssg-front ${{ secrets.DOCKERHUB_USERNAME }}/houssg-front :latest

분명 런타임에 환경변수를 줬는데 왜 제대로 적용되지 않을까? 

 

프론트엔드의 서버는 빌드과정에서 HTML CSS JAVASCRIPT로 구성된 정적파일이 된다. 내 프로젝트에서도 이렇게 빌드한 것을 nginx 서버로 해당 파일을 제공하는데, 이 과정에서  api key값과 서버 주소등의 값이 반영된다. 따라서 이후 container에서 환경변수를 준다해도 이를 인식할 수 없다. (이미 정적파일로 빌드 되었기 때문에,, 이 떄문에 유저가 어차피 네트워크로 확인 가능..)

 

아무튼 빌드시에 값을 넣으려면 arg라는 값을 사용해야한다. 기본적으로 환경변수는 정적이기 때문에, arg를 이용해서 변경한다.

 

 

 

arg는 기본적으로 build타임에 동적으로 값을 변경하고 싶을 때 사용한다. env 와 같이 사용하는 방법은

ARG VITE_SERVER_URL
ARG VITE_KAKAO_KEY
ARG VITE_KAKAO_JS_KEY
ARG VITE_MY_URL

ENV VITE_SERVER_URL=${VITE_SERVER_URL}
ENV VITE_KAKAO_KEY=${VITE_KAKAO_KEY}
ENV VITE_KAKAO_JS_KEY=${VITE_KAKAO_JS_KEY}
ENV VITE_MY_URL=${VITE_MY_URL}

ENV VITE_MY_URL ${VITE_MY_URL}    와 같이 = 을 생략해도 사용가능하다.

 

이제 깃액션에서 동적으로 값을 변경만 하면 된다. 

        uses: docker/build-push-action@v5

        with:

          context: ./houssg

          file: ./houssg/Dockerfile.prod

          platforms: linux/amd64

          push: true

          tags: ${{ secrets.DOCKERHUB_USERNAME }}/houssg-front:latest

          build-args: |

            "VITE_SERVER_URL=${{ secrets.VITE_SERVER_URL }}"

            "VITE_KAKAO_JS_KEY=${{ secrets.VITE_KAKAO_JS_KEY }}"

            "VITE_KAKAO_KEY=${{ secrets.VITE_KAKAO_KEY }}"

            "VITE_MY_URL=${{ secrets.VITE_MY_URL }}"

나는 buildx를 사용해서 빌드를 했기에 공식문서를 따라서 저렇게 사용했다. (""을 안썼을 떄 제대로 작동안한거 같아서 테스트 해보니 아무 상관없더군요..)

유의사항은 배열형식으로 사용하기 때문에

 build-args: |

  입력=${{시크릿}}

 

이러고 나니 정상적으로  작동한다.

 

 

시도했던 뻘짓들

ssh 에서 로그를 확인하니 이미지가 너무 많이 쌓여서 docker system prune -a -f 를 사용했었다..

이러고 나니 docker images가 엉켜서 정상적인 build가 되지 않았다.. 이거 때문에 온갖 시도 다했느데 안되서 4시간 날리고 화나서 다시 확인해보니,, docker image와 컨테이너가가 4시간전에 마지막 빌드

 

gitaction이 오타가 굉장히 예민한데,, 확인하기가 힘들다

정상적으로 build-args해놓고 제대로 안되길레,, 혹시 전역 환경변수를 gitaction 우분투 서버에 적용하면 되지 않을까? env 키 써도 적용되지 않을까 온 갖행동 다함..

근데 args 이외의 방법은 정상적으로 인식되지 않았고, 정상적으로 했단 args는 오타가 났지만 빌드는 제대로 되서 그냥 안되는지 착각해버림..

 

그리고 .env를 gitignore 풀어보니 제대로 됨.. 이를 해결하려고 dockerfile, gitaction을 번갈아 수정하다 실수떔에 디버깅이 길어짐..

 

배포 서버 테스트라 실 프로젝트에선 테스트하기 힘들어서 (팀원 풀리퀘 대기시키기가..) 그냥 copy한후 새로운 인스턴스에서 온갖 삽질함..

나중엔 화나서 브랜치도 안파고 고치기,,

 

깨달은 점

블로그 글 100프로 믿지 말고 공식문서에서 최대한 코드 복붙하기 ..

굳이 프론트 env관리 할  필요한가.. gitaction에 쓰는 키값들 빼고

그래서 arg 키워드에 대해서 생소했는데 학습해서 너무 좋음

 

 

 

 

참고 : 

 

#2

아래 링크에서 세팅방법을 배웠다.

https://stackoverflow.com/questions/67051284/how-to-set-a-dockerfile-arg-in-github-actions

How to set a Dockerfile ARG in Github actions

https://dev.to/jpoehnelt/environment-variables-in-github-docker-build-push-action-23pj

Environment Variables in GitHub Docker build-push-action

https://docs.docker.com/engine/reference/builder/#understand-how-arg-and-from-interact

Dockerfile reference

 

 

https://docs.docker.com/engine/reference/commandline/buildx_build/

docker buildx build

https://dev.to/jpoehnelt/environment-variables-in-github-docker-build-push-action-23pj