전면 및 백엔드(앵글 2 및 스프링) 메이븐 멀티모듈 프로젝트 만들기
스프링 백엔드와 Angular2 프론트엔드로 메이븐 멀티모듈 프로젝트를 만들려면 어떻게 해야 합니까?spring initializr(https://start.spring.io )과 angular cli를 별도로 사용하는 것은 간단한 것처럼 보이지만, 링크되지만 별도의 pom-files가 있는 멀티태스킹 메이븐 프로젝트로 어떻게 구성해야 합니까?어떤 값과 순서로 생성하고 초기화해야 합니까?Intellij IDEA를 사용하면 일이 더 쉬워질 수 있지만 CMD(Windows에 있습니다)도 괜찮습니다.
제가 이것에 대해 찾은 유일한 튜토리얼은 여기에 있습니다: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/ 하지만 그 남자는 제가 원하지 않는 자필 "프론트 엔드 메이븐"을 사용합니다.누가 단계를 설명하거나 타사 리소스를 사용하지 않고 Spring과 Angular2만 청소하는 튜토리얼에 연결해 줄 수 있습니까?
편집: 제가 이 질문을 올렸을 때, 웹 개발은 저에게 대부분 새로운 것이었습니다.아래 솔루션은 처음에는 효과가 있었지만, 더 나은 확장성을 위해 나중에 여러 Angular 앱과 많은 FE-lib를 포함하는 하나의 FE 프로젝트(NRWL의 NX 참조)를 별도의 프로젝트로 만들기로 결정했습니다.각 BE-Micro 서비스에 대해 하나의 프로젝트를 제공하며, 각 프로젝트는 CI-Pipeline에서 개별적으로 배포할 수 있습니다.구글 자체는 모든 FE와 BE에 대해 하나의 프로젝트 접근 방식을 따르지만, 특별한 요구 사항(모든 립은 최신 버전에서 서로 협력해야 함)을 가지고 있으며, 이를 위해 ABC 스택(앵글 + 베이젤 + 클로저)을 사용하는데, 이는 아직 대중이 완전히 이용할 수는 없지만 주시할 가치가 있다: https://github.com/angular/angular/issues/19058
Angular 2 애플리케이션을 구축하는 권장 방법은 Angular CLI 도구를 사용하는 것입니다.마찬가지로 Java EE 프로젝트에서 작업할 때 일반적으로 Maven을 빌드 도구로 사용합니다.
두 가지 장점을 모두 활용하기 위해 이미 파악한 대로 멀티 모듈 프로젝트를 개발할 수 있습니다.
원하는 경우 이 샘플을 복제합니다.
git clone https://github.com/prashantpro/ng-jee.git
프론트엔드/UI 프로젝트는 Angular 2 애플리케이션이 될 것입니다.백엔드 프로젝트는 Spring 또는 순수 Java EE 애플리케이션(Any web app)일 수 있습니다.
Angular 2 출력(dist directory)을 가져가서 UI 부분의 웹 애플리케이션 프로젝트에 매핑하고 싶습니다.
다음은 고급 타사 플러그인 없이도 수행할 수 있는 방법입니다.이 다중 모듈 프로젝트 구조를 예로 들어 보겠습니다.
cdng-jee (이것은 부모님의 POM 프로젝트입니다)
.
├── pom.xml
├── ngdemo
│ ├── pom.xml --- maven pom for angular module
│ ├── dist --- This will be Angular output
│ ├── e2e
│ ├── karma.conf.js
│ ├── node_modules
│ ├── package.json
│ ├── protractor.conf.js
│ ├── README.md
│ ├── src
│ ├── tsconfig.json
│ └── tslint.json
└── webdemo
├── pom.xml
└── src
상위 pom.xml은 두 모듈을 모두 나열해야 합니다.첫 번째 모듈은 UI(Angular 2) 모듈에 이어 Java/Spring 모듈이 되어야 합니다.
ng-jee/pom.xml에 대한 중요한 섹션은 아래와 같습니다.
<packaging>pom</packaging>
<modules>
<module>ngdemo</module>
<module>webdemo</module>
</modules>
다음으로, 다음과 같은 CLI를 사용하여 각진 앱을 만든 경우:
ngnew ngdemo
그런 다음 아래 빌드 플러그인이 있는 동일한 디렉토리 ngdemo/pom.xml에 pom.xml을 배치해야 합니다. (이렇게 하면 Angular CLI 프로젝트가 빌드되고 dist 폴더에 출력이 생성됩니다.
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<failOnError>false</failOnError>
<filesets>
<fileset>
<directory>.</directory>
<includes>
<include>dist/**/*.*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>angular-cli build</id>
<configuration>
<workingDirectory>.</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--prod</argument>
<argument>--base-href</argument>
<argument>"/ngdemo/"</argument>
</arguments>
</configuration>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
퍼즐의 마지막 조각은 이 ngdemo/dist 폴더를 참조하여 출력을 WAR 파일로 복사할 수 있도록 하는 것입니다.
webdemo/pom.xml에서 수행해야 할 작업은 다음과 같습니다.
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<webResources>
<resource>
<!-- this is relative to the pom.xml directory -->
<directory>../ngdemo/dist/</directory>
</resource>
</webResources>
</configuration>
</plugin>
</plugins>
</build>
이제, 만약 당신이 부모 디렉토리 ng-jee로부터 프로젝트를 구축한다면,
mvn clean install
그러면 먼저 Angular 프로젝트를 빌드한 다음 웹 프로젝트를 빌드하고, 후자의 빌드를 수행하면 Angular dist 컨텐츠도 웹 프로젝트 루트에 복사된다는 것을 알 수 있습니다.
WAR/Web 프로젝트 대상 디렉터리에서 다음과 같은 내용을 확인할 수 있습니다.
/ng-jee/webdemo/target/webdemo-1.0-SNAPshot.war
.
├── favicon.ico
├── index.html
├── inline.d72284a6a83444350a39.bundle.js
├── main.e088c8ce83e51568eb21.bundle.js
├── META-INF
├── polyfills.f52c146b4f7d1751829e.bundle.js
├── styles.d41d8cd98f00b204e980.bundle.css
├── vendor.fb5e0f38fc8dca20e0ec.bundle.js
└── WEB-INF
└── classes
바로 그겁니다.저는 이러한 측면 중 몇 가지에 대해 시리즈를 만들 것이고 여기서 Angular와 JEE를 더 많이 할 것입니다.
그때까지 이것이 도움이 되기를 바랍니다!
언급URL : https://stackoverflow.com/questions/42593975/make-front-and-backend-angular-2-and-spring-maven-multimodule-project
'programing' 카테고리의 다른 글
함수의 PowerShell 변수 증가 (0) | 2023.08.15 |
---|---|
스팬 요소의 줄 바꿈 방지 (0) | 2023.08.15 |
Mariadb에서 봄 부츠와 긴 트랜잭션 [소켓 예외] (0) | 2023.08.15 |
주소 표시줄 표시 시 100vh 높이 - Chrome Mobile (0) | 2023.08.15 |
WP CLI는 DB를 복구해야 하지만 WP 자체는 작동한다고 주장합니다. (0) | 2023.08.15 |