[BI Dashboard] Eclipse용 Spring과 AngularJS Framework 개발환경 셋업하기

2013. 11. 16. 05:46 My Projects/BI Dashboard

[BI Dashboard] Eclipse용 Spring과 AngularJS Framework 개발환경 셋업하기

Spring MVC의 RESTful 방식을 사용하면서 AngularJS를 Eclipse에서 개발하기 위한 제반 설정 환경을 만들어 보도록 한다. 핵심은 Java를 위한 라이브러리 의존성 관리와 빌드를 위하여 Maven을 사용하고 JavaScript는 의존성 관리는 bower를 사용하고 빌드도구는 grunt를 사용하게 된다. 따로 따로 사용하지 않고 하나의 프로젝트로 합치는 과정을 생각해 보자

1. Maven을 이용한 Spring MVC 환경 만들기

- 이미 Eclipse Juno 기반에서 Maven + Spring MVC 환경 설정 블로깅을 하였다

- pom.xml 에 logback 관련 내용 추가 (참조)

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>com.ysyun</groupId>

<artifactId>DashboardTest</artifactId>

<version>0.0.1-SNAPSHOT</version>

<url>http://maven.apache.org</url>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<spring.version>3.2.0.RELEASE</spring.version>

<junit.version>4.11</junit.version>

<jdk.version>1.6</jdk.version>

</properties>

<groupId>org.springframework</groupId>

<artifactId>spring-core</artifactId>

<version>${spring.version}</version>

<artifactId>commons-logging</artifactId>

<groupId>commons-logging</groupId>

</exclusion>

</exclusions>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-web</artifactId>

<version>${spring.version}</version>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

<version>${spring.version}</version>

<groupId>commons-logging</groupId>

<artifactId>commons-logging</artifactId>

</exclusion>

</exclusions>

</dependency>

<groupId>ch.qos.logback</groupId>

<artifactId>logback-access</artifactId>

</dependency>

<groupId>ch.qos.logback</groupId>

<artifactId>logback-core</artifactId>

</dependency>

<groupId>ch.qos.logback</groupId>

<artifactId>logback-classic</artifactId>

</dependency>

</dependency>

</dependency>

</dependency>

</dependency>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

<version>${junit.version}</version>

</dependency>

</dependencies>

<build>

<finalName>DashboardTest</finalName>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-compiler-plugin</artifactId>

<source>${jdk.version}</source>

<target>${jdk.version}</target>

</configuration>

</plugin>

</plugins>

</build>

</project>

- 다음에 logback.xml 환경파일을 resource에 놓아 classpath에 잡아준다. 개발/배포 따로 구성한다

<?xml version="1.0" encoding="UTF-8"?>

<pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>

</encoder>

</appender>

<appender-ref ref="CONSOLE"/>

</root>

</configuration>

2. SPA 환경 잡아주기

- Yeoman을 통하여 angular 프로젝트 만들기 (참조)

$ yo angular SolarDasbhoard

- 위의 파일을 각각 다음과 같이 이동한다

+ app/ 폴더에 있는 것을 src/main/webapp로 복사한다

+ node_modules 및 test 폴더 그리고 나머지 모든 파일을 eclipse 프로젝트 root로 복사한다

여기서 node_modules안의 모듈은 grunt와 karma 테스트 모듈들로 운영에 배포될 필요가 없다.

운영 배포는 webapp/ 밑에 있는 파일들이고, 사용하는 모듈은 src/main/webapp/bower_components/ 밑에 위치한다

- app폴더 밑의 내용이 src/main/webapp로 이동하였으므로 관련 환경설정 내역을 수정한다

// bower 설정파일인 .bowerrc 변경

{

"directory": "src/main/webapp/bower_components"

}

// karm.conf.js 파일 내역 수정

files: [

'src/main/webapp/bower_components/angular/angular.js',

'src/main/webapp/bower_components/angular-mocks/angular-mocks.js',

'src/main/webapp/bower_components/angular-resource/angular-resource.js',

'src/main/webapp/bower_components/angular-cookies/angular-cookies.js',

'src/main/webapp/bower_components/angular-sanitize/angular-sanitize.js',

'src/main/webapp/scripts/*.js',

'src/main/webapp/scripts/**/*.js',

'test/mock/**/*.js',

'test/spec/**/*.js'

// grunt build를 위한 Gruntfile.js 내역 수정

// 소스의 위치와 grunt build시에 dist 폴더에 .html과 WEB-INF/* 파일까지도 copy 하도록 수정

yeoman: {

// configurable paths

app: require('./bower.json').appPath || 'src/main/webapp',

dist: 'dist'

... 중략 ...

copy: {

dist: {

files: [{

expand: true,

dot: true,

cwd: '<%= yeoman.app %>',

dest: '<%= yeoman.dist %>',

src: [

'*.{ico,png,txt,html}',

'.htaccess',

'bower_components/**/*',

'images/{,*/}*.{gif,webp}',

'styles/fonts/*',

'WEB-INF/*'

]

}, {

expand: true,

cwd: '.tmp/images',

dest: '<%= yeoman.dist %>/images',

src: [

'generated/*'

]

}]

styles: {

expand: true,

cwd: '<%= yeoman.app %>/styles',

dest: '.tmp/styles/',

src: '{,*/}*.css'

}

3. .war 배포파일 만들기

- Maven(java 서버)와 Yo(javascript 클라이언트) 환경설정을 완료하였다면 빌드했을 때 최종파일을 .war파일로 묶어보자

- grunt build를 했을 경우 프로젝트의 root/dist 디렉토리가 신규 생성되어 src/main/webapp/* 파일이 minification 되어 들어있다

- 해당 파일을 .war안에 묶기 위하여 pom.xml 에 플러그인 설정 추가

<build>

<finalName>DashboardTest</finalName>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-compiler-plugin</artifactId>

<source>${jdk.version}</source>

<target>${jdk.version}</target>

</configuration>

</plugin>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-war-plugin</artifactId>

</configuration>

</plugin>

</plugins>

</build>

- 배포파일 war 만들기 순서

$ grunt build (if error ocurred, option --force)

$ mvn clean install

[INFO] Scanning for projects...