はじめに
検証・本番環境で今見ているものが一体どのバージョンのものなのか？が分からなくなる事があると思う。そんな時、手軽にバージョン確認できればいいなという事で、webpack-version-fileを利用して静的ファイルの配信を行うフォルダにversion.jsonを生成する方法を試してみたのでそれについて備忘録を残す。
※フロントエンドとバックエンドのプロジェクトが分かれている場合、今回見ていく方法では、フロントエンドのプロジェクトのbuildバージョンの確認はできるようにはなるが、バックエンドの方は別の方法でbuildバージョンを確認できるようにする必要があると思われる1。理由は今回見ていく方法は、
- distディレクトリ以下にversion確認できるファイルを生成
→ブラウザ上からフロントエンドのbuildバージョンが確認できるようになる
という方法なため（distはWebサーバーで配信するstaticな資材の置き場をイメージしており、Expressで言えばServing static files in Expressの事）。ただし、モノレポの構成で、dockerイメージをbuildするようなプロジェクト構成であれば、フロントエンド・バックエンドが一緒になるのでこの方法で両方のバージョン（いつ時点でのbuild成果物か？）の確認できるかもしれない。
※以下では、既にwebpackの設定は済んでいる事を前提にしている。
結論 どうやるのか？
webpack-version-fileを利用する。
[study@localhost travel-app]$ npm install --save-dev webpack-version-file
...
const VersionFile = require('webpack-version-file');
module.exports = {
...
plugins: [
...
new VersionFile({
output: './dist/version.txt'
})
]
};
上記のようにする事で、以下のようにブラウザから簡単にbuildバージョンを確認できるようになる。
Vue.js（2.x）だとどうなるか？
Vue-CLIであればvue.config.jsを以下のように設定する事で同じように、同様の事が実現できる。
...
const VersionFile = require('webpack-version-file');
const { DateTime } = require('luxon');
const dt = DateTime.now();
module.exports = {
configureWebpack: {
plugins: [
...
new VersionFile({
output: './dist/version.txt'
})
]
}
};
ソースコード全体は以下。
カスタマイズする
上記のままでもいいが、少し他の情報を加えたりデフォルトだとtxtでファイルが作成されてしまうので、json形式で作成されるようにしてみたいと思う。設定としては以下のようにしてみた。
...
const { DateTime } = require('luxon');
const dt = DateTime.now();
module.exports = {
...
plugins: [
...
new VersionFile({
output: './dist/version.json',
templateString: `{${['version', 'buildDate', 'timestamp', 'environment']
.map((key) => `"${key}": "<%= ${key} %>"`)
.join(',')}}`,
data: {
buildDate: dt.toISO(),
timestamp: dt.toSeconds(),
environment: process.env.NODE_ENV || 'development'
}
})
]
};
上記のように設定すると、以下のようにブラウザからそのバージョンを確認できる。
※JSONにした理由としてはChromeの拡張機能にJSON Viewerなどブラウザ上でJSONを見やすくする拡張機能があるため。
ソースコード全体は以下。
まとめとして
今回はwebpackのプラグインを使って簡単にbuildバージョンを確認できるようにする方法についてみてきた。フロントエンドについてはこれで最低限の確認はできるだろう。
※ちなみに、モノレポ構成を取る方法としては【フロントエンド、バックエンドを一つのリポジトリで管理】monorepoを実現できるNxをさわってみたにあるような方法があるし、vue-cli時代にはvue-cli-plugin-expressというプラグインで簡単にVue × Expressのモノレポ構成を作れたりした。
-
アイディアの1つとしては、APIで
/healthcheckのようなエンドポイントを設け、APIサーバーが動くために必要になる他のMySQLやRedis等が生きている事を確認しつつ、そこでbuildバージョンをJSONで返す、というのがあるだろう（ただし、こういうhealthcheckのエンドポイントはセキュリティのためにALBなどでのIP制限は必須になると思われる。 ↩