Angular 2およびSpring Boot-Deploy to War

Question

まず、私はMaven/Springを使い始めたばかりで、ディレクトリが優先されるMaven構造に従っていない場合の対処方法を理解するのに苦労しています。

Angular 2およびこれを介してSpring Bootでプロジェクトを設定するための指示に従いました tutorial 。このチュートリアルでは、フロントエンドとバックエンドの2つのモジュールを作成し、対応するpom.xmlと1つの親pom.xml。IDE、IntelliJを使用するか、バックエンドディレクトリから「mvn spring-boot：run」を実行することで、アプリケーションを問題なく実行できます。ただし、デプロイのために、アプリケーションをWARファイルにパッケージ化したいと思いますTomcatサーバーにドロップする方法です。私が現在持っているpom.xmlを使用してこれを行う方法はわかりません。ディレクトリ構造に関係していることは確かですが、アプリケーションを再構築する必要があるのか​​、それとも、意図したとおりに機能する結果のWARファイルに2つのモジュールを配置するようにMavenを構成する方法があります。

私は同様の答えを見つけました here しかし、最後の部分は私を捨てるものです。/src/main/webapp/WEB-INFフォルダーがなく、どこに作成するかわかりません。

私のアプリケーション構造は次のとおりです。

AppRoot

-backend
--src
---main
----Java
--pom.xml

-frontend
--src
---main
----frontend
--pom.xml

-pom.xml

私のルートpom.xmlは：

<groupId>com.trinityinnovations</groupId>
<artifactId>parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>pom</packaging>

<name>c-cop</name>
<description>C-COP Project</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.2.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <Java.version>1.8</Java.version>
</properties>

<modules>
    <module>frontend</module>
    <module>backend</module>
<module>web</module>

フロントエンドpom.xml：

<artifactId>frontend</artifactId>

<name>frontend</name>
<description>C-COP Project frontend</description>

<parent>
    <groupId>com.trinityinnovations</groupId>
    <artifactId>parent</artifactId>
    <version>0.0.1-SNAPSHOT</version>
</parent>

<build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.3</version>

            <configuration>
                <nodeVersion>v6.9.1</nodeVersion>
                <npmVersion>4.0.3</npmVersion>
                <workingDirectory>src/main/frontend</workingDirectory>
            </configuration>

            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                </execution>

                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                </execution>

                <execution>
                    <id>npm run build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>

                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
    <resources>
        <resource>
            <directory>target/frontend</directory>
            <targetPath>static</targetPath>
        </resource>
    </resources>
</build>

バックエンドpom.xml：

<artifactId>backend</artifactId>

<name>backend</name>
<description>C-COP Project backend</description>

<parent>
    <groupId>com.trinityinnovations</groupId>
    <artifactId>parent</artifactId>
    <version>0.0.1-SNAPSHOT</version>
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <Java.version>1.8</Java.version>
</properties>

<dependencies>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.restdocs</groupId>
        <artifactId>spring-restdocs-mockmvc</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>com.trinityinnovations</groupId>
        <artifactId>frontend</artifactId>
        <version>${project.version}</version>
        <scope>runtime</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-httpclient/commons-httpclient -->
    <dependency>
        <groupId>commons-httpclient</groupId>
        <artifactId>commons-httpclient</artifactId>
        <version>3.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.Apache.commons/commons-csv -->
    <dependency>
        <groupId>org.Apache.commons</groupId>
        <artifactId>commons-csv</artifactId>
        <version>1.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-Java -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-Java</artifactId>
        <version>6.0.6</version>
    </dependency>
    <dependency>
        <groupId>commons-dbcp</groupId>
        <artifactId>commons-dbcp</artifactId>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-core -->
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-core</artifactId>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.datatype</groupId>
        <artifactId>jackson-datatype-hibernate5</artifactId>
    </dependency>
    <dependency>
        <groupId>com.javaetmoi.core</groupId>
        <artifactId>javaetmoi-hibernate5-hydrate</artifactId>
        <version>2.3</version>
    </dependency>
<dependency>
  <groupId>com.google.maps</groupId>
  <artifactId>google-maps-services</artifactId>
  <version>0.1.20</version>
</dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

他に必要な情報がある場合はお知らせください。

Answer 1

多くの検索を行った後、私は Maven War Plugin に出くわしました。これにより、WARファイルを正常に作成するために必要なフロントエンドファイルをバックエンドに取り込むことができました。必要な変更は次のとおりです。

バックエンドpom.xml-説明タグの後に追加：

<packaging>war</packaging>

次に、ビルドタグ内で、プラグイン内でこのプラグインを追加します。

  <plugin>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
      <webResources>
        <resource>
          <directory>../frontend/target/frontend</directory>
        </resource>
      </webResources>
    </configuration>
  </plugin>

それ以外は、既存のpom.xmlを同じに保つことができます。バックエンドpom.xmlのみがwarパッケージを含める必要があるからです。それは結局かなり単純な答えになりました。

また、package.jsonでbase-hrefを設定する必要があります。 「ビルド」に注意してください：

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build": "ng build --base-href=\"./\""
},

Answer 2

こんにちはAngular 4とスプリングブートを使用して戦争を展開します。問題なく動作し、共有しています。

ここでpom.xml：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.Apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.Apache.org/POM/4.0.0http://maven.Apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>Spring_Angular</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging><name>Spring_Angular</name>
<description>Demo project for Spring Boot</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.2.RELEASE</version>
    <relativePath /> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <Java.version>1.8</Java.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <groupId>org.Apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
        </plugin>
        <plugin>
            <groupId>org.Apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <webResources>
                    <resource>
                        <directory>${basedir}/target/angular4Client</directory>
                    </resource>
                </webResources>
            </configuration>
        </plugin>

        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.6</version>
            <configuration>
                <nodeVersion>v8.9.2</nodeVersion>
                <npmVersion>5.6.0</npmVersion>
                <installDirectory>target</installDirectory>
                <workingDirectory>${basedir}/src/main/angular4client</workingDirectory>
            </configuration>
            <executions>
                <!-- It will install nodejs and npm -->
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v8.9.2</nodeVersion>
                        <npmVersion>5.6.0</npmVersion>
                    </configuration>
                </execution>

                <!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <!-- It will execute command "npm build" inside "/e2e-angular2" directory 
                    to clean and create "/dist" directory -->
                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>

        <!-- Plugin to copy the content of /angular/dist/ directory to output 
            directory (ie/ /target/transactionManager-1.0/) -->
        <plugin>
            <groupId>org.Apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <id>copy-resources</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/classes/static/</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${basedir}/src/main/angular4Client/dist/angular4Client</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
    <resources>
        <resource>
            <directory>target/angular4Client</directory>
            <targetPath>static</targetPath>
        </resource>
    </resources>
</build>
</project>

次に、angular package.jsonで次のように変更します。

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}

angular project rootにproxy.conf.jsonファイルを作成します。

{
"/api": {
    "target": "http://localhost:8080",
    "secure": false
    }
}

最後に、angular 4プロジェクトをSpringBootプロジェクトの "src/main /"に移動します。

このデモによる幸運： http://javasampleapproach.com/Java-integration/integrate-angular-4-springboot-web-app-springtoolsuite

Answer 3

リファレンスドキュメントには、この詳細な説明が含まれています。フロントエンドモジュールとバッキングモジュールpomの両方に<packaging>war</packaging>が必要であり、一部のJavaコード。すべての説明 here が必要）

そうは言っても、私は完全に必要でなければ戦争の展開を避けるように努めます。ビルドされたjarファイルをJava -jar your.jarで実行すると、組み込みのTomcatで起動します。

Answer 4

Spring Boot Angularアプリケーションをデプロイする方法はいくつかあります。

スプリングブートとangularアプリケーションをデプロイするためのベストプラクティスは、ユーザーインターフェイスコードをビジネスロジックで分離することです。これにより、クライアントコードとサーバーコードを分離できます。

Maven Warプラグインを使用したデプロイ

Maven warプラグインは、Webアプリケーションのすべてのアーティファクト依存関係、クラス、リソースを収集して.warファイルを作成します。したがって、この構成では、すべての静的リソースをターゲット/クライアントにプッシュするようにクライアントプロジェクトを構成し、後でwarファイルを作成するときにmaven warプラグインを使用してこれを.war世代に含め、/ staticフォルダー内に配置します。そしてもちろん、Spring Bootには静的リソースを静的フォルダーで探す機能があり、angular静的リソースが提供されます。

それでは、静的リソースの最終ビルドをどのように取得するのでしょうか。まあ、これはangular自体によって行われます。angular-cli.jsonを調べると、JSOnプロパティが-"outDir"： "dist"、として見つかります。これは最終出力を意味します。 angularプロジェクトをビルドすると、distフォルダーにプッシュされます。クライアントのpom.xmlファイルにangularプロジェクトを使用して、 npm。これを行うには、クライアントのpom.xmlを次のように変更する必要があります。

この構成は、pomファイルで構成されているようにノードとnpmをダウンロードしてインストールし、npm installは、package.jsonに依存関係としてリストされているすべてのモジュールをインストールし、実行フェーズでは、パッケージの構成に従って最終ソースがdistフォルダーにプッシュされます.json。

また、サーバーのpomファイルに構成があり、warファイルのビルド中に../client/targetのリソースを含めるようにmaven warプラグインを構成します。また、angularクライアントのjar依存関係。これで、最終的な戦争が生成され、スタンドアロンのTomcatに展開できるようになります。

クライアントpom.xml

<build>
    <finalName>client</finalName>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.6</version>

        <configuration>
          nodeVersion>v8.9.0</nodeVersion>
          <npmVersion>5.5.1</npmVersion>

        </configuration>

        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
          </execution>

          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
          </execution>

          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>

            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
    <resources>
      <resource>
        <directory>target/client</directory>
        <targetPath>static</targetPath>
      </resource>
    </resources>
  </build>

サーバーpom.xml

 <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
                <plugin>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>3.2.0</version>
                    <configuration>
                        <webResources>
                            <resource>
                                <directory>../user-portal/target</directory>
                            </resource>
                        </webResources>
                    </configuration>
                </plugin>
            </plugins>
        </build>