webpack build時にGitのcommit hash値を組み込む

技術備忘録

2021.09.24

ソフトウェア開発中に現在デプロイされているバージョンを確認したいということがあると思います。バージョンファイルを作成しても良いのですが、いちいち書き換えないといけないため手間がかかりそうです。そこで、webpackのビルド時にGitのcommit hash値を自動的に取り込み、デプロイされているバージョンを確認できるようにする方法について説明します。

webpack.config.jsの設定

やり方は主にstack overflowのページを参考にしました。

var webpack = require('webpack');
var { execSync } = require('child_process');
var commitHash = execSync('git rev-parse --short HEAD').toString().trim();

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      __COMMIT_HASH__: JSON.stringify(commitHash),
    })
  ...
}

execSyncによって引数をコマンドライン実行し、その標準出力を得ることが出来ます。

（git rev-parse --short HEADは最新のブランチのコミットのハッシュ値の頭7文字を取得するためのコマンドです。）

また、webpack.DefinePluginは変数を定義することができ、build時にソースコード内の__COMMIT_HASH__を指定した値に置きかえてくれます。

ただし、DefinePluginは環境変数やグローバル変数を設定するものではないため、process.envのような呼び方や、ブラウザ内のコンソールでグローバル変数として呼び出すことはできません。

そこで、デプロイ後にこの値を確認できるように以下のような実装を行いました。

import React from 'react';
import ReactDOM from 'react-dom';

global.__COMMIT_HASH__ = __COMMIT_HASH__

...

ReactDOM.render(<App />, document.getElementById('root'));

このようにglobal.__COMMIT_HASH__ = __COMMIT_HASH__とすることによって、グローバル変数に設定することができるため、ブラウザ内のコンソールで__COMMIT_HASH__と打つことによってGitのcommit hash値を参照することができます。