Angular 2和Spring Boot - 部署到战争

时间:2017-04-25 05:55:54

标签: spring maven angular spring-mvc

首先我要说的是,我是Maven / Spring的新手,当我的目录不遵循首选的Maven结构时,我很难搞清楚要做什么。

我按照说明通过此tutorial设置了Angular 2和Spring Boot的项目。本教程创建了两个模块,前端和后端,以及相应的pom.xml和一个父pom.xml。我可以使用我的IDE,IntelliJ或从后端目录运行“mvn spring-boot:run”来运行应用程序。但是,对于部署,我希望将应用程序打包到WAR文件中以放入Tomcat服务器。我不确定如何使用我目前拥有的pom.xml来做到这一点。我很确定它与我的目录结构有关,但是我不确定是否应该重构我的应用程序,或者有一种方法可以配置Maven将这两个模块放入生成预期的WAR文件中。

我找到了类似的答案here,但最后一部分是让我失望的原因。我没有/ src / main / webapp / WEB-INF文件夹,我不确定在哪里制作它。

我的申请结构如下:

AppRoot

-backend
--src
---main
----java
--pom.xml

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

-pom.xml

我的root 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>

如果有更多信息需要,请与我们联系。

4 个答案:

答案 0 :(得分:8)

经过大量搜索后,我偶然发现了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。注意&#34;构建&#34;:

"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=\"./\""
},

答案 1 :(得分:1)

您好我使用Angular 4和Spring启动来部署战争。它工作正常,我分享。

这里是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"
}

在角度项目根目录中创建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

答案 2 :(得分:0)

参考文档包含对此的详细说明。在前端和支持的模块pom和一些Java代码中都需要<packaging>war</packaging>。所有描述都是here

话虽如此,我试图避免战争部署,如果不是完全必要的话。您可以使用java -jar your.jar运行构建的jar文件,它将在嵌入式Tomcat中启动。

答案 3 :(得分:0)

部署Spring Boot Angular Application有不同的方法。

部署spring boot和angular应用程序的最佳做法是将用户界面代码与业务逻辑分开。这提供了客户端代码与服务器代码的分离。

使用Maven War Plugin进行部署

maven war插件通过收集Web应用程序的所有工件依赖项,类和资源来创建.war文件。因此,在此配置中,我们将配置我们的客户端项目以将所有静态资源推送到目标/客户端,稍后在创建war文件时,我们将使用maven war插件将其包含在.war生成中并将其放在/ static文件夹中。当然,spring boot具有查看静态资源的静态文件夹的功能,并且我们将提供角度静态资源。

那么现在我们将如何获得静态资源的最终构建。好吧,这将由棱角本身完成。如果你看一下angular-cli.json,你会发现一个JSOn属性为 - &#34; outDir&#34;:&#34; dist&#34; ,.这意味着如果我们构建角度项目,最终输出将被推送到dist文件夹。我们现在将在客户端pom.xml文件中进行配置,以使用npm构建角度项目。为此,我们必须在客户端pom.xml中进行如下更改:

此配置将按照pom文件中的配置下载并安装节点和npm,npm install将安装在package.json中列为依赖项的所有模块,并且在执行阶段,最终源将按推送到dist文件夹package.json中的配置。

此外,我们将在服务器的pom文件中进行配置,我们将配置我们的maven war插件,以在构建war文件时包含../client/target的资源。此外,它将使用角度客户端作为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>

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