web-dev-qa-db-ja.com

フロントエンドおよびバックエンド（Angular 2およびSpring）のMavenマルチモジュールプロジェクトを作成する

SpringバックエンドとAngular2フロントエンドでMavenマルチモジュールプロジェクトを作成するにはどうすればよいですか？ spring initializr（ https://start.spring.io ）とangular cliを別々に使用するのは簡単なようですが、どうすればマルチモジュールとして整理できますかリンクされているが別々のpomファイルを持つMavenプロジェクト？どのような値と順序でそれらを作成して初期化する必要がありますか？Intellij IDEAそれが物事を簡単にするなら、私は大丈夫ですCMD（Windowsを使用しています）。

これについて私が見つけた唯一のチュートリアルはこちらです。 https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/ 「frontend-maven-plugin」は不要です。誰かが手順を説明したり、サードパーティのリソースを使用しないチュートリアルにリンクしてくれますか？

編集：私がこの質問を投稿したとき、WebDevelopmentは私にとってほとんど新しいものでした。以下のソリューションは最初はうまくいきましたが、スケーラビリティを高めるために、後で別々のプロジェクトを作成することにしました：複数のAngularアプリと多くのFE-libを含む1つのFEプロジェクト（チェックアウト NRWLのNX for））そして、各BE-Microserviceごとに1つのプロジェクト、それぞれCIパイプラインに個別にデプロイ可能。Google自体は、すべてのFEおよびBEに対して1つのプロジェクトのアプローチを採用していますが、特別な要件（すべてライブラリは最新バージョンで相互に連携する必要があります）、ABCスタック（Angular + Bazel + Closure）スタックを使用します。これはまだ一般公開されていませんが、注目する価値があります。- https://github.com/angular/angular/issues/19058

springmavenangularspring-bootangular-cli
11
Phil

Angular 2アプリケーションをビルドする推奨方法は、Angular CLIツールを使用することです。同様に、Java EEプロジェクトで作業する場合、通常はビルドツールとしてMavenを使用します。

両方の長所を最大限に活用するために、すでに考えたようにマルチモジュールプロジェクトを開発できます。

必要に応じて、このサンプルのクローンを作成してください。

git clone https://github.com/prashantpro/ng-jee.git

フロントエンド/ UIプロジェクトはAngular 2アプリケーションになります。バックエンドプロジェクトは、Springまたは純粋にJava EEアプリケーション（任意のWebアプリ）です。

Angular 2出力（distディレクトリ）を取得し、UIパーツのWebアプリケーションプロジェクトにマップします。

派手なサードパーティのプラグインなしでそれを行う方法は次のとおりです。このマルチモジュールプロジェクトの構造を例としてみましょう：

cd ng-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は両方のモジュールをリストする必要があります。 firstモジュールは、UI（Angular 2）モジュールの後にJava/Springモジュールが続く必要があります。

ng-jee/pom.xmlの重要なセクションを以下に示します

<packaging>pom</packaging>
<modules>
    <module>ngdemo</module>
    <module>webdemo</module>
</modules>

次に、次のようにCLIを使用してangularアプリを作成した場合：

ng new ngdemo

次に、同じディレクトリにpom.xmlを配置する必要がありますngdemo/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プロジェクトをビルドし、次にWeb Projectをビルドします。後者のビルドを実行すると、Angular distコンテンツをWebプロジェクトルートにコピーします。

そのため、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 and JEE

それでこれが役立つことを願っています！

13
Prashant Padmanabhan