전면 및 백엔드(앵글 2 및 스프링) 메이븐 멀티모듈 프로젝트 만들기

전면 및 백엔드(앵글 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