설명

> 현재 배포된 어플리케이션의 버전을 확인하기가 곤란할때가 많습니다. 버전을 꼼꼼하게 기록한다면 상관없지만, vue.config.js 파일을 수정하여 현재 배포된 git commit hash값을 자동으로 주입하여 어플리케이션의 버전을 확인해봅시다.

들어가며

난이도 : 매우 쉬움
시간 : 3분

뷰 프로젝트(vue project)를 보일러 플레이트 하면 npm run serve로 빨리 코드부터 나가고 싶을 것이다. 조금만 침착하고 version과 git hash 정보를 애플리케이션에 심도록 하자.

그럼 아래와 같이 애플리케이션에서도 git hash와 package.json의 version 정보를 확인할 수 있을 것이다.

vue

어떻게 구현하는가?

package.json version

먼저 vue.config.js가 없다면 만들어준다. 프로젝트 루트에 만들면 된다.(package.json과 같은 레벨)
그리고 vue.config.js에 아래와 같이 선언한다.

process.env.VUE_APP_VERSION = require("./package.json").version;

GIT HASH

마찬가지로 vue.config.js가 없다면 만들어준다. 프로젝트 루트에 만들면 된다.(package.json과 같은 레벨)

git hash가 길기 때문에 식별자로 쓰기 위해 끝자리 8자리만 짤라오는 함수를 만든다.(당연히 로컬 경로에 git이 깔려 있어야 한다.)

function getCurrentHash(lastNumber = 8) {
  try {
    const buffer = execSync("git rev-parse HEAD"); // ! initial commit이 없으면 HEAD 에러
    const input = Buffer.from(buffer).toString();

    // last characters
    const start = input.length - lastNumber - 1;
    const end = input.length - 1;
    return input.slice(start, end);
  } catch (error) {
    console.error(error);
  }
}

vue.config.js에 아래와 같이 선언한다.

process.env.VUE_APP_HASH = getCurrentHash(8);

module.exports = {};

완성된 `vue.config.js`의 모습

const { execSync } = require("child_process");
const { Buffer } = require("buffer");

process.env.VUE_APP_HASH = getCurrentHash(8);
process.env.VUE_APP_VERSION = require("./package.json").version;

module.exports = {
  // config
};

function getCurrentHash(lastNumber = 8) {
  try {
    const buffer = execSync("git rev-parse HEAD"); // ! initial commit이 없으면 HEAD 에러
    const input = Buffer.from(buffer).toString();

    // last characters
    const start = input.length - lastNumber - 1;
    const end = input.length - 1;
    return input.slice(start, end);
  } catch (error) {
    console.error(error);
  }
}

어떻게 작동하는가?

친절하게도 Vue CLI에서 vue.config.js를 통해 VUE_APP_으로 시작하는 환경 변수들은 같이 번들링 되도록 설정해 놓았다. (https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)

따라서 다른 환경변수들을 쓰려면 webpack.DefinePlugin을 따로 설정해줘야 하는데 어렵지는 않지만 꼭 환경변수를 분리해서 생각하는게 아니라면 초기에는 간단하게 구성하도록 하자.

왜 해야하는가?

S3로 서빙했는데 캐쉬 때문에 이전 버전인지 아리까리 할때가 있다.
CI를 통해서 배포하는 경우 CI에서 배포 완료 노티가 오면 상관 없지만, 보통 어플리케이션 리프레시를 통해 간단하게 확인하려면 어플리케이션의 식별자를 두는게 좋다.

그 외 TIP

Footer나 설정 같은데 심어 놓으면 좋다.
주의 : 다른 환경 변수는 매핑 되지 않는다.

Table of Content

설명