frontend-maven-plugin 사용 빌드

VUEJS + 스프링부트(메이븐) 빌드  과정입니다.

 

frontend-maven-plugin은 Maven 빌드 도구를 사용하여 프론트엔드 프로젝트를 빌드하는 데 도움이 되는 플러그인입니다. 이를 사용하면 프론트엔드 빌드 도구(예: Node.js 및 npm)를 Maven 빌드 프로세스에 통합할 수 있습니다.

다음은 frontend-maven-plugin을 사용하는 간단한 Maven 프로젝트의 예제입니다. 이 예제에서는 Node.js 및 npm을 사용하여 VUEJS  애플리케이션을 빌드합니다.

 

1.Maven 프로젝트 설정

<project>
    <!-- 다른 Maven 설정 ... -->

    <build>
        <plugins>
            <!-- frontend-maven-plugin 추가 -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.14.1</version> <!-- 최신 버전 사용 가능한지 확인 -->
                <configuration>        
					<workingDirectory>front</workingDirectory>        
					<installDirectory>target</installDirectory>    
				</configuration> 
                <executions>
                    <execution>
                        <!-- install 명령어를 실행하여 npm 패키지 설치 -->
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v20.9.0</nodeVersion> <!-- 사용할 Node.js 버전 -->
                            <npmVersion>10.2.3</npmVersion> <!-- 사용할 npm 버전 -->
                        </configuration>
                    </execution>
                    <execution>
                        <!-- npm install 명령어를 실행하여 프론트엔드 종속성 설치 -->
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <!-- npm run build 명령어를 실행하여 프론트엔드 빌드 -->
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>    
			<artifactId>maven-antrun-plugin</artifactId>    
				<executions>        
					<execution>            
						<phase>generate-resources</phase>            
						<configuration>                
							<target>                    
								<copy todir="${project.build.directory}/classes/public">                        
								<fileset dir="${project.basedir}/front/dist"/>                    
								</copy>                
							</target>            
						</configuration>            
						<goals>                
							<goal>run</goal>            
						</goals>        
					</execution>    
				</executions>
			</plugin>
        </plugins>
    </build>
</project>

 

 

위의 설정은 Node.js 및 npm 설치, 종속성 설치, 프론트엔드 빌드 단계를 정의합니다.

 

2. 프론트엔드 소스 코드 구조:

    프로젝트 디렉토리에 프론트엔드 소스 코드 및 package.json 파일이 포함되어 있어야 합니다.

 

3. 빌드 실행

• Maven 명령어를 사용하여 빌드

mvn clean install

 

이 명령어는 Maven 빌드와 함께 frontend-maven-plugin의 설정에 따라 Node.js, npm 설치 및 프론트엔드 빌드를

수행합니다.

 

• Visual Source Code 에서의 빌드 

 

 clean > package  실행

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

빌드 결과

 

 

 빌드 결과  만들어진  web 파일들