[react] CRA앱 런타임에 마지막 커밋 정보 표시
November 11, 2020 - [react, commit, craco, child_process]
CRA 앱 런타임에서 해당 앱의 정확한 버젼을 확인하여 비교해 보아야할 필요가 있을 수 았다.
간단하게 현재 런타임의 커밋정보를 로그상에 표시하려면 어떻게 해야할까. 런타임 중에 동적으로 커밋버젼을 확인하는 것은 불가능하므로 웹팩 컴파일 타임에 커밋정보를 확인하고 이를 환경변수로 전달하는 방법이면 가능하다.
아래와 같은 컨셉을 꼭 기억하자
- 컴파일 타임에 얻을 수 있는 어떤 값을 런타임으로 전달하고자 할때는 환경변수(
process.env
) 를 이용해야 한다. process.env
에 추가적인 정보를 세팅하기 위해서는webpack.DefinePlugin
을 이용해야 한다.- CRA 프로젝트에서
eject
없이 웹팩 설정을 수정하려면 craco 또는 react-app-rewired 모듈을 이용할 수 있다 - 현재 커밋에 대한 정보는
git
명령어를 이용해 얻을 수 있다. - 웹팩 컴파일타임에
git
명령어를 동적으로 수행하고 결과를 얻기 위해서는child_process
모듈을 이용한다.
구현 방법
커밋 정보를 리턴하는 함수 모듈 구현 commit-info.js
const childProcess = require('child_process')
const [commitHash, commitDate] = childProcess
.execSync(
`git rev-parse --short HEAD && git --no-pager log -1 --date=format:"%Y/%m/%d %T" --format="%ad"`,
)
.toString()
.trim()
.split('\n')
module.exports = {
commitHash,
commitDate,
}
craco 를 사용중이라면 craco.config.js 에 아래와 같이 설정을 추가한다.
const webpack = require('webpack')
const {commitHash, commitDate} = require('./commit-info')
module.exports = function ({ env }) {
return {
eslint: {
// blabla~
},
plugins: [
// blabla~
],
webpack: { plugins: [ new webpack.DefinePlugin({ "process.env.COMMITHASHDATE": JSON.stringify(commitHash + ' - ' + commitDate), }), ], }, }
}
App.js 에서 아래와 같이 접근할 수 있다
export default function App(){
return (
<div>{process.env.COMMITHASHDATE}</div>
)
}