【问题标题】:Angular 2 and Spring Boot - Deploy to WarAngular 2 和 Spring Boot - 部署到战争
【发布时间】:2017-09-21 23:57:19
【问题描述】:

首先让我说,我是 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

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

如果需要更多信息,请告诉我。

【问题讨论】:

    标签: spring maven angular spring-mvc


    【解决方案1】:

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

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

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

    【讨论】:

    • 我已经尝试了上述方法,但我的战争没有创建。
    • 我可以将应用程序打包为 jar 和 war。并且能够执行打包好的jar。我面临另一个问题。我无法访问 proxy.conf.json 中提到的休息点。有什么想法吗?
    【解决方案2】:

    经过大量搜索,我找到了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 需要包括战争包装。最终得到了一个相当简单的答案。

    还需要在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=\"./\""
    },
    

    【讨论】:

    • 在我的项目中我没有后端,你知道我应该在 spring boot 项目中将我的 dist 文件夹复制到哪里,以将其部署为 war 文件吗?
    • 我不完全确定,但我很好奇……如果你没有后端,为什么你的项目需要打包成一个war文件?
    • :) 有一个后端,只包含 RESTful 服务,但我不能将 Angular 代码与该代码一起放入一个模块中,基本上我不允许修改另一个后端模块,我只能调用restful服务。
    • 您应该能够将 dist 文件夹复制到您的 tomcat 实例中,而不必将其部署为战争。您应该相应地重命名它。您也可以将所有内容放在您的 tomcat 实例的根目录中。
    • 是的,我做到了,而且确实有效,但目的是通过 gradle 或 maven 在竹服务器上运行 ng 构建,这就是为什么我必须将它包装在 war 文件中。
    【解决方案3】:

    参考文档包含对此的详细描述。您的前端和后端模块 pom 和一些 Java 代码都需要 &lt;packaging&gt;war&lt;/packaging&gt;。全部描述here

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

    【讨论】:

      猜你喜欢
      • 2019-03-23
      • 2019-03-21
      • 2018-08-11
      • 1970-01-01
      • 2016-08-16
      • 2018-07-05
      • 2015-10-28
      • 1970-01-01
      • 2017-04-12
      相关资源
      最近更新 更多