12. 프론트엔드 라이브러리 설정

WebJar vs NPM

• 개인적으로는 WebJar 보다는 NPM 선호.
• WebJar은 라이브러리 업데이트가 느리다. 심지어 올라오지 않는 라이브러리도 많다.

스프링 부트와 NPM

• src/main/resources/static 디렉토리 이하는 정적 리소스로 제공한다. (스프링 부트)
• package.json에 프론트엔드 라이브러리를 제공한다.
• 이 둘을 응용하면, 즉 static 디렉토리 아래에 package.json을 사용해서 라이브러리를 받아오면 정적 리소스로 프론트엔드 라이브러리를 사용할 수 있다.

고려해야 할 점

• 빌드
• 버전관리
• 시큐리티 설정

빌드는 어떻게?

• 메이븐 pon.xml을 빌드할 때 static 디렉토리 아래에 있는 package.json도 빌드하도록 설정해야 한다.
• 빌드를 안하면 프론트엔드 라이브러리를 받아오지 않아서 뷰에서 필요한 참조가 끊어지고 화면이 제대로 보이지 않는다.

부트스트랩을 스프링부트에 npm으로 설정해보자.

윈도우의 경우

cmd 창에서 프로젝트의 /src/main/resources/static 디렉토리로 이동후

npm init

npm install bootstrap

npm install jquery --save

 

빌드시 자동으로 불러와지는 모듈들은 .gitignore에 등록하여 git에 업로드되지 않게 한다.

// 추가
### NPM ###
src/main/resources/static/node_modules
src/main/resources/static/node

 

또한 빌드시에 maven을 통한 빌드와함께 node_module에 있는 모듈들도 빌드가 되어야 한다. 그 뜻은 npm install을 실행한다는 의미이다. pom.xml로 mvn package 할때 어떻게 npm install을 시킬지 생각해야한다.

메이븐 관련 플러그인 중에 프론트엔드를 실행할 수있는 플러그인이 있다.

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.8.0</version>
                <configuration>
                    <nodeVersion>v4.6.0</nodeVersion>
                    <workingDirectory>src/main/resources/static</workingDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>com.mysema.maven</groupId>
                <artifactId>apt-maven-plugin</artifactId>
                <version>1.1.3</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>process</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>target/generated-sources/java</outputDirectory>
                            <processor>com.querydsl.apt.jpa.JPAAnnotationProcessor</processor>
                        </configuration>
                    </execution>
                </executions>
                <dependencies>
                    <dependency>
                        <groupId>com.querydsl</groupId>
                        <artifactId>querydsl-apt</artifactId>
                        <version>${querydsl.version}</version>
                    </dependency>
                </dependencies>
            </plugin>

 

이렇게 NPM으로 프론트엔드 설정을 하면 기존에 static/js, static/images, static/css의 경로와는 다르게 /node_modules부터 시작하기때문에 시큐리티 설정인 SecurityConfigure에 /node_modules로 시작하는 요청을 무시하도록 설정한다.

package me.weekbelt.studyolle.config;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    // 기존 코드 ...........

    // static 관련 파일들은 스프링 시큐리티 적용 x
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring()
                .mvcMatchers("/node_modules/**")    // 추가
                .requestMatchers(PathRequest.toStaticResources().atCommonLocations());
    }
}

 

 

참고: https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-JPA-%EC%9B%B9%EC%95%B1#

스프링과 JPA 기반 웹 애플리케이션 개발 - 인프런