Vue.jsで外だしした環境変数をBuild Pipeline上で設定する

3953 ワード
Vue.js .NETCore AzureDevOps Vue.js テキストリンク

.NET Core 3.1とVueの組み合わせでCI/CDを組んだ時の備忘録。
以下のリンクを踏んでもらった上でこの記事を読んでもらえば.NET Core + Vue.jsでハマらずにCI/CDを組めると思います。

Build環境の参考記事
ローカル環境でビルドまでは以下の記事を参考にした。
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して画面を眺めるだけ