Gitのコミットハッシュを環境変数としてVue側で取得する

やりたかったこと

リモートにpushするとサーバ側にデプロイされるようなVue案件で、開発中に気づいたらサーバ側にデプロイされていないということが度々ありました。デプロイ状況を確認する方法は一応あるはあったものの、もう少しシンプルに確認が出来ないかと思った所、こちらの記事を見てGit上のHEADのハッシュが取得する方法があるとのことでした。

これなら確認も容易そうと、社内の人と相談して取得してみることに。

あかんかったパターン

特にこれといって難しいことではなさそうだったので、愚直にそのまま実装します。

package.jsonで環境変数を埋め込む

serve、buildコマンドにHEADのハッシュを取得してGIT_COMMIT_HASHとして環境変数を埋め込むようにします。

package.json

...
"scripts": {
    "serve": "GIT_COMMIT_HASH=$(git rev-parse HEAD) vue-cli-service serve",
    "build": "GIT_COMMIT_HASH=$(git rev-parse HEAD) vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

js側で埋め込んだ環境変数を拾いに行きます。直接参照してもいい気はしますがなんとなくお行儀が悪い気がするので、一旦定数に入れます。

Vue側で取得して定数に入れる

const GIT_COMMIT_HASH = process.env.GIT_COMMIT_HASH;

定数をimportしてテンプレートで参照

<template>
  <div>
    GIT : {{ hash }}
  </div>
</template>

<script>
import { GIT_COMMIT_HASH } from "@/constants";
export default {
  data() {
    return {
      hash : GIT_COMMIT_HASH
    }
  }
}
</script>

ところがこのやり方ではnpm起動時では落ちはしないものの、ハッシュ値の取得は出来ませんでした。

GIT : 

ちゃんと取れたパターン

.envに定義した環境変数をVue上で扱うにはVUE_APPを接頭語としてつける必要があるというのは認識していたので、それ以外の環境変数は接頭語なしに参照出来るという認識だったのですが、どうもそうではないようです。NODE_ENVが取得出来ていたのでそう思い込んでいましたが、こいつが例外なだけの様子…。

というわけで埋め込む環境変数名をGIT_COMMIT_HASHからVUE_APP_GIT_COMMIT_HASHに変更します。

VUE_APPつけた

...
"scripts": {
    "serve": "VUE_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) vue-cli-service serve",
    "build": "VUE_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

定数側も合わせて修正

const GIT_COMMIT_HASH = process.env.VUE_APP_GIT_COMMIT_HASH;

環境変数の変更を反映するため、この形でserveをしなおします。

GIT : 2c395a98e60bd2f64ef44dacda03f596f206a492

無事にほしかった値が取れました！何気に今年一番感動した気がします。

public/index.htmlからの参照も問題なく出来ました。ローカルではHEADが移動するごとにserveしなおす必要がありますが、デプロイ時はpushする度にbuildされるためその点を気にする必要がないため、cachebustingとしても使えそうです。

恐らくVue以外では最初に失敗したパターンで問題なく取れるんだろうとは思いますが、微妙にハマってたので備忘録として残しておきます。