Vue.js에서 제거한 환경 변수를 Build Pipeline에서 설정

.NET Core 3.1과 Vue의 조합으로 CI/CD를 짜었을 때의 비망록.
아래의 링크를 밟고 나서 이 기사를 읽어 주시면 .NET Core + Vue.js로 빠지지 않고 CI/CD를 짜 낼 수 있다고 생각합니다.

빌드 환경 참조 기사
로컬 환경에서 빌드까지는 다음 기사를 참고했다.
ASP.NET Core 프로젝트에 Vue.js를 삽입해 봅시다.

Vue.js에서 환경 변수를 제거합니다.
vue-cli 3.0에서 만든 프로젝트의 환경 변수 (.env) 설정

↑
여기를 보간하는 내용이 본 기사.
↓

Azure Build
Azure Pipeline + Github을 사용하여 공짜로 CI / CD를 만들자.

사용 도구

Prismic (Headless CMS)

GitHub

Azure Pipelines

Pipelines

Release

Azure App Service

전제

Vue.js에서 Prismic과 API 연계시키기 위해 Token 정보를 Vue.js에서 갖게 할 필요가 있었다.

Vue.use(PrismicVue, {
  endpoint: window.prismic.endpoint + "?access_token=" + process.env.VUE_APP_API_TOKEN,
})

구체적인 해머 포인트로서는 process.env.VUE_APP_API_TOKEN를 썼다.env를 GitHub상에 올리고 싶지 않았기 때문에, Pipeline상에서 환경 변수를 설정할 필요가 있었다.

Azure Pipelines에서 환경 변수 설정

빨간색 표시를 클릭하면 변수를 설정하는 양식이 열립니다.

'keep this value'를 선택하면 설정한 변수가 Azure DevOps에 넣는 사람을 향해 숨길 수 있습니다.

설정한 변수는 $(Variable Name) 로 호출할 수 있습니다.

환경 변수의 설정은 다음과 같은 느낌.

- task:  Bash@3
  inputs:
    targetType: 'inline'
    script: |
      cd < .NET Project name >/< vue cli project name >
      touch .env
      echo VUE_APP_API_TOKEN=$API_TOKEN >> .env
      ls -a
      cat .env
  env:
    API_TOKEN: $(API_Token)

이것이 설정되면 RUN하고 화면을 바라보십시오.