GitLab CI에서 환경변수 주입

코드 저장소에 올릴 수 없는 정보는 보통 환경변수를 이용하여 지정합니다. 예를 들어 Vue.js로 개발하는 경우에 (vite를 이용하여 빌드한다고 할 때) 사용할 백엔드 서버 주소를 환경변수로 저장하고 싶으면 프로젝트 루트에 .env 파일을 만들고, 그 파일에서 VITE_ 로 시작하는 환경변수를 정의하면 됩니다.

VITE_SERVER_ADDRESS=https://foo.bar.com/

이렇게 하면 코드 내에서 import.meta.env.VITE_SERVER_ADDRESS를 사용하여 애플리케이션 코드에서 API 키에 접근할 수 있습니다.

하지만 저 .env 파일을 저장소에 바로 집어넣기는 곤란한 상황이라면 GitLab CI/CD 설정을 활용하여 환경변수를 주입하는 게 가능합니다. 다음과 같은 과정을 거치면 됩니다.

1. GitLab CI/CD 변수 설정: GitLab 프로젝트에서, 'Settings' > 'CI / CD' 섹션으로 이동한 다음 'Variables' 섹션을 찾습니다. 여기에서 새로운 변수를 추가할 수 있습니다. 예를 들어, VITE_SERVER_ADDRESS라는 이름으로 서버 주소를 추가할 수 있습니다.

2. GitLab CI/CD 파이프라인 구성: .gitlab-ci.yml 파일에서 환경 변수를 사용하려면, 해당 변수를 스크립트에 전달해야 합니다. 예를 들어, 빌드 스크립트에 다음과 같은 내용을 추가하면 프로젝트 루트에 .env 파일이 추가되고, vite에서는 빌드시에 이 파일을 읽어서 import.meta.env.VITE_SERVER_ADDRESS로 불러서 쓸 수 있게 만들어 줍니다.

build_job:
  script:
    - echo "VITE_SERVER_ADDRESS=$VITE_SERVER_ADDRESS" >> .env

혹시 주입할 변수가 여러 개 있다면 echo 대신 printf를 사용하고, 변수를 설정하는 각 줄을 \n으로 구분해 주면 됩니다.