Angular 2 et Spring Boot - Déployer en guerre

Question

Permettez-moi de commencer en disant que je suis nouveau dans Maven/Spring et que j'ai du mal à savoir quoi faire si mon répertoire ne suit pas la structure Maven préférée. 

J'ai suivi les instructions pour configurer un projet avec Angular 2 et Spring Boot via ce tutorial . Ce tutoriel crée deux modules, frontend et backend, avec les fichiers correspondants pom.xml et un parent pom.xml. Je peux très bien exécuter l'application en utilisant mon IDE, IntelliJ, ou en exécutant "mvn spring-boot: run" à partir du répertoire principal. Cependant, pour le déploiement, je souhaite conditionner l'application dans un fichier WAR pour le déposer sur un serveur Tomcat. Je ne sais pas comment faire cela en utilisant le fichier pom.xml que j'ai actuellement. Je suis tout à fait sûr que cela a à voir avec la structure de mes répertoires, mais je ne suis pas sûr de devoir restructurer mon application ou de savoir s'il existe un moyen de configurer Maven pour placer les deux modules dans un fichier WAR résultant qui fonctionne comme prévu. 

J'ai trouvé une réponse similaire ici mais la dernière partie est ce qui me jette. Je n'ai pas de dossier/src/main/webapp/WEB-INF et je ne sais pas où le créer.

Ma structure d'application est la suivante:

AppRoot

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

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

-pom.xml

Ma racine pom.xml est:

<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>

Frontend 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>

Back-end 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>

S'il vous plaît laissez-moi savoir s'il y a plus d'informations qui sont nécessaires.

Answer 1

Après de nombreuses recherches, je suis tombé sur le Maven War Plugin . Cela m'a permis d'extraire les fichiers frontaux nécessaires vers le serveur afin de réussir la création de mon fichier WAR. Les modifications à apporter sont les suivantes:

Backend pom.xml - Après les balises de description, ajoutez:

<packaging>war</packaging>

Ensuite, dans les balises de construction, dans les plugins, ajoutez ce plugin:

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

En dehors de cela, vous pouvez conserver le même fichier pom.xml existant, car seul le back-end dont il a besoin inclut un emballage de guerre. Cela a fini par être une réponse plutôt simple.

Il faut également définir la base-href dans le package.json. Note "build":

"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

Bonjour, j'utilise Angular 4 et Spring Boot pour déployer la guerre. C'est bon et je le partage.

Ici 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>

Ensuite, dans votre package angulaire angulaire.json, changez comme suit:

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

Créez un fichier proxy.conf.json à la racine du projet angulaire: 

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

Et dernière chose à faire, déplacez votre projet angular 4 dans: "src/main /" sur le projet SpringBoot.

Bonne chance selon cette démo: http://javasampleapproach.com/Java-integration/integrate-angular-4-springboot-web-app-springtoolsuite

Answer 3

Le document de référence contient une description détaillée de cela. Vous avez besoin de <packaging>war</packaging> dans votre pom de module frontal et sauvegardé, ainsi que dans du code Java. Tous décrits ici

Cela dit, j’essaie d’éviter les déploiements de guerre, s’ils ne sont pas absolument nécessaires. Vous pouvez simplement exécuter le fichier jar construit avec Java -jar your.jar et le démarrer dans un Tomcat intégré.

Answer 4

Il existe différentes manières de déployer une application Spring Boot Angular.

La meilleure pratique pour déployer une application angulaire et de démarrage à ressort consiste à séparer le code de l’interface utilisateur avec la logique d’entreprise. Cela permet de découpler le code client avec le code serveur.

Déploiement avec Maven War Plugin

Le plugin maven war crée un fichier .war en collectant toutes les dépendances d'artefact, les classes et les ressources de l'application Web. Par conséquent, ici, dans cette configuration, nous allons configurer notre projet client pour qu'il pousse toutes les ressources statiques vers cible/client et, plus tard, lors de la création du fichier war, nous utiliserons le plugin maven war pour l'inclure dans la génération .war et le placer dans le dossier/static . Et bien sûr, Spring Boot dispose d’une fonctionnalité permettant de rechercher des ressources statiques dans le dossier statique et nos ressources statiques angulaires seront servies.

Alors maintenant, comment allons-nous obtenir la version finale des ressources statiques. Eh bien, cela sera fait par angular lui-même.Si vous regardez dans angular-cli.json, vous trouverez une propriété JSOn comme - "outDir": "dist" ,. Cela signifie que la sortie finale sera poussée dans le dossier dist si nous construisons le projet angular. Et nous aurons maintenant la configuration dans le fichier client pom.xml pour construire le projet angulaire avec npm. Pour cela, nous devons modifier le client pom.xml comme suit:

Cette configuration téléchargera et installera le nœud et npm tels que configurés dans le fichier pom et npm install installera tous les modules répertoriés comme dépendances dans package.json et, lors de la phase d'exécution, les sources finales seront placées dans le dossier dist conformément à la configuration dans le package. .json.

De plus, nous aurons une configuration dans le fichier pom du serveur où nous configurerons notre plug-in maven war pour inclure les ressources de ../client/target lors de la construction du fichier war.En outre, le client angulaire aura comme dépendance jar. Et ainsi, la guerre finale sera générée et vous pouvez maintenant la déployer sur n’importe quel Tomcat autonome.

client 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>

serveur 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>