Grunt, AngularJS 프로파일 설정하기

개요

Java 진영, 특히 Spring 기반의 개발자들은 배포 환경에 따라 설정을 달리 적용할 수 있는 Profile 개념에 익숙할 것이다. 프론트엔드 JavaScript 진영에서 Profile 단위의 개발은 필요하지만 적용 방법은 익숙하지 않을 것이다. 이번 글에서는 Grunt 기반의 AngularJS 프로젝트에서 Profile 개념을 적용하는 방법을 소개하고자 한다.

package.json

프로젝트 루트에 package.json에 아래 내용을 추가한다.

{
    ...
    "devDependencies": {
        "grunt": "1.0.1",
        ...
        "grunt-replace": "1.0.1", 
        ...
}

• 위와 같이 기존 Grunt 기반 AngularJS 프로젝트에 grunt-replace 모듈을 추가하고 커맨드 창에서 npm update를 실행한다.
• grunt-replace 모듈은 원본 파일에서 사용자가 정의한 특정 패턴의 문자열을 찾아내어 바꿔치기하는 기능을 제공하는 Grunt의 모듈이다. 이 모듈을 활용하여 AngularJS의 Constant에 정의된 문자열을 배포 환경에 따라 변경하는 작업을 작성할 것이다.

Gruntfile.js

프로젝트 루트에 Gruntfile.js에 아래 내용을 추가한다.

module.exports = function (grunt) {

    grunt.initConfig({
        ...
        replace: {
            dev: {
                options: {
                    patterns: [{
                        json: grunt.file.readJSON('./profile_dev.json')
                    }]
                },
                files: [{
                    expand: true,
                    flatten: true,
                    src: ['src/app.js'],
                    dest: 'build/'
        },
        ...
    });
    ...
    grunt.loadNpmTasks('grunt-replace');
    ...
    grunt.registerTask('dev', ['replace:dev']);
}

• 개발 환경을 dev 키워드로 식별하고 개발 환경으로 빌드할 경우 /profile_dev.json을 읽어 들여 소스 코드에서 해당 내용을 변경할 것이다.
• 위 설정은 /src/app.js의 키워드를 모두 변경하고 /build/app.js로 저장한다.

profile_dev.json

프로젝트 루트에 profile_dev.json을 아래와 같이 작성한다.

{
    "PROTOCOL": "http",
    "HOSTNAME": "127.0.0.1",
    "PORT": "8080"
}

• 각 배포 환경에 해당하는 설정 정보를 JSON 파일로 정의힌다. 빌드 과정에서 환경에 따라 해당 파일의 내용이 주입될 것이다.

app.js

/src/app.js를 아래와 같이 작성한다.

var app = angular.module('app', []);
app.constant('SERVER_INFO', {
    PROTOCOL: '@@PROTOCOL',
    HOSTNAME: '@@HOSTNAME',
    PORT: @@PORT
});

app.controller('testController', ['SERVER_INFO', function(SERVER_INFO) {
    console.log(SERER_INFO);
}]);

• 위 소스 코드는 개발 및 운영 환경에 따라 값이 달라질 상수 값들을 AngularJS의 Constant로 등록하여 Controller 및 Service에 주입하는 예이다.
• 상수 값들은 @@KEY의 형식으로 식별 패턴을 부여하여 앞서 적용한 grunt-replace 모듈에 의해 빌드 과정에서 원래의 값으로 변경될 수 있도록 한다.

참고 글

• Environment Specific Configuration in AngularJS Using Grunt