spring5 vue webpack

spring5 vue.js webpack 구성 프로젝트 설정

step 1 ) maven 프로젝트 생성

Webcontent 구조가 아닌 이전 처럼 디렉토리 구조를 생성

step 2 ) pom.xml 설정

<name>***</name>
  <url>http://maven.apache.org</url>
 
  <properties>
      <java-version>1.8</java-version>
      <org.springframework-version>5.1.3.RELEASE</org.springframework-version>
    <spring-security.version>5.1.2.RELEASE</spring-security.version>
    <org.aspectj-version>1.6.10</org.aspectj-version>
    <org.slf4j-version>1.6.6</org.slf4j-version>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
 
  <dependencies>
      <!-- Spring -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>${org.springframework-version}</version>
        <exclusions>
            <!-- Exclude Commons Logging in favor of SLF4j -->
            <exclusion>
                <groupId>commons-logging</groupId>
                <artifactId>commons-logging</artifactId>
             </exclusion>
        </exclusions>
    </dependency>
    
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>${org.springframework-version}</version>
    </dependency>
    
    <!-- AspectJ -->
    <dependency>
        <groupId>org.aspectj</groupId>
        <artifactId>aspectjrt</artifactId>
        <version>${org.aspectj-version}</version>
    </dependency>    
    
    <!-- Logging -->
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-api</artifactId>
        <version>${org.slf4j-version}</version>
    </dependency>
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>jcl-over-slf4j</artifactId>
        <version>${org.slf4j-version}</version>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-log4j12</artifactId>
        <version>${org.slf4j-version}</version>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>log4j</groupId>
        <artifactId>log4j</artifactId>
        <version>1.2.15</version>
        <exclusions>
            <exclusion>
                <groupId>javax.mail</groupId>
                <artifactId>mail</artifactId>
            </exclusion>
            <exclusion>
                <groupId>javax.jms</groupId>
                <artifactId>jms</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.sun.jdmk</groupId>
                <artifactId>jmxtools</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.sun.jmx</groupId>
                <artifactId>jmxri</artifactId>
            </exclusion>
        </exclusions>
        <scope>runtime</scope>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/org.lazyluke/log4jdbc-remix -->
    <dependency>
        <groupId>org.lazyluke</groupId>
        <artifactId>log4jdbc-remix</artifactId>
        <version>0.2.7</version>
    </dependency>
    
    <!-- Servlet -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.1</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    
    <!-- junit  Test-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
 
    <!-- spring-jdbc --> 
    <dependency> 
        <groupId>org.springframework</groupId> 
        <artifactId>spring-jdbc</artifactId> 
        <version>${org.springframework-version}</version> 
    </dependency>
        
    <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.4.6</version>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>1.3.2</version>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp -->
    <dependency>
        <groupId>commons-dbcp</groupId>
        <artifactId>commons-dbcp</artifactId>
        <version>1.4</version>
    </dependency>
    
    <dependency>
        <groupId>commons-lang</groupId>
        <artifactId>commons-lang</artifactId>
        <version>2.6</version>
    </dependency>
    
    <!-- Spring Security -->
    <!-- <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-core</artifactId>
        <version>${spring-security.version}</version>
    </dependency>
    
    <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-web</artifactId>
            <version>${spring-security.version}</version>
        </dependency>
    
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId>
            <version>${spring-security.version}</version>
        </dependency>
    
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-taglibs</artifactId>
            <version>${spring-security.version}</version>
        </dependency> -->
        
        <!-- excel file upload --> 
    <!-- https://mvnrepository.com/artifact/org.apache.poi/poi -->
    <dependency>
           <groupId>org.apache.poi</groupId>
           <artifactId>poi</artifactId>
           <version>3.17</version>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
    <dependency>
           <groupId>org.apache.poi</groupId>
           <artifactId>poi-ooxml</artifactId>
           <version>3.17</version>
    </dependency>
    
    <!--@ResponseBody-->
    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.8.2</version>
    </dependency>
    
    <!-- FILE UPLOAD  -->    
    <dependency> 
        <groupId>commons-fileupload</groupId> 
        <artifactId>commons-fileupload</artifactId> 
        <version>1.2.1</version>
    </dependency> 
    
    <dependency> 
        <groupId>commons-io</groupId> 
        <artifactId>commons-io</artifactId> 
        <version>1.4</version> 
    </dependency>
    
    <!-- apache Common util  -->
    <dependency>
        <groupId>commons-lang</groupId>
        <artifactId>commons-lang</artifactId>
        <version>2.6</version>
    </dependency>
    
    <!-- xss servlet filter -->
    <dependency>
        <groupId>com.navercorp.lucy</groupId>
        <artifactId>lucy-xss-servlet</artifactId>
        <version>2.0.0</version>
    </dependency>
    
    <!-- thymeleaf -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring5</artifactId>
        <version>3.0.9.RELEASE</version>
     </dependency>
     
     <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf</artifactId>
        <version>3.0.9.RELEASE</version>
    </dependency>
     
     
     <!-- Thymeleaf lagacy html5를 위한 라이브러리 -->
     <!-- https://mvnrepository.com/artifact/net.sourceforge.nekohtml/nekohtml -->
     <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
     </dependency>
    
  </dependencies>
  <build>
      <plugins>
         <!-- Embedded Jetty HTTP Server for testing war application -->
         <plugin>
            <groupId>org.eclipse.jetty</groupId>
            <artifactId>jetty-maven-plugin</artifactId>
            <version>9.4.8.v20171121</version>
         </plugin>
      </plugins>
   </build>

security 부분은 차후 세팅을 위해 주석처리

webpack을 통해 빌드된 html로 뷰를 설정하기 위해 thymeleaf 를 추가 

    <!-- thymeleaf -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring5</artifactId>
        <version>3.0.9.RELEASE</version>
     </dependency>
     
     <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf</artifactId>
        <version>3.0.9.RELEASE</version>
    </dependency>
     
     
     <!-- Thymeleaf lagacy html5를 위한 라이브러리 -->
     <!-- https://mvnrepository.com/artifact/net.sourceforge.nekohtml/nekohtml -->
     <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
     </dependency>

step 3 ) servlet-context.xml 설정

    <!-- Thymeleaf view 설정  -->
    <beans:bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".html" />
        <beans:property name="templateMode" value="HTML5" />
        <beans:property name="characterEncoding" value="UTF-8" />
        <beans:property name="cacheable" value="false" />
    </beans:bean>
    
    <beans:bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
        <beans:property name="templateResolver" ref="templateResolver" />
        <beans:property name="enableSpringELCompiler" value="true" />
    </beans:bean>
    
    <beans:bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
        <beans:property name="characterEncoding" value="UTF-8" />
        <beans:property name="templateEngine" ref="templateEngine" />
    </beans:bean>

prefix 경로가 webpack으로 빌드된 html이 저장 될 위치 

step 4 ) frontend 설정 

node.js 설치 https://nodejs.org/ko/

front와 관련한 내용들을 담을 frontend 디렉토리를 src와의 같은 경로에 생성 후

프로젝트 루트 경로에서 npm install -- g vue-cli  실행 (vue-cli 설치)

다음 vue init webpack frontend 실행 (프론트 디렉토리명) 

frontend 디렉토리로 이동 후 

패키지들을 설치하기 위해 npm install 실행 

아래와 같이 경고나는 부분은 파악 못함

step 5 ) webpack config 설정

frontend / config 디렉토리의 index.js 수정

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../src/main/webapp/WEB-INF/views/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../../src/main/webapp/resources'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/cms/resources/',

index : 빌드될 index.html 경로 위치

assetsRoot : 빌드될 css js 의 위치

assetPublicPath : 빌드될 html에서의 css js의 경로 (보통 static루트에 html이 위치함으로 기본설정은 '/')

step 6 )  run build 빌드

frontend 위치에서 npm run build 실행

main.do 의 경로 맵핑 controller

@Controller
public class MainController {
    
    private String PRE_VIEW_PATH = "";
    
    @RequestMapping(value="main.do")
    public String mainDo() {  
        return  PRE_VIEW_PATH+"index";
    }//
}

tomcat 실행 후 확인 (localhost:톰캣서버포트/경로)

-

프론트 적용후 빌드 시키지 않고 프론트 서버에서 확인하려면 npm run dev 실행으로 바로바로 확인할 수 있다.

실행 포트 변경은 config / index.js (빌드 경로 설정했던 파일) 에서

// Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

port부분 수정후 frontend 경로에서  npm run dev 실행 

localhost:위부분에서 변경된포트번호 /경로 로 브라우저에서 바로바로 확인 할 수 있다.

수정 후에는 빌드 실행해야 톰캣서버에 반영이 된다.

spring5 mvc 가 아닌 spring-boot vue webpack 연동으로 만들어본 샘플 (환율계산기)

https://github.com/pikaSoYoung/converter

참고 사이트 - 

https://febdy.tistory.com/65