Angular和Spring Boot:配置使它们有效地协同工作

Question

Angular projet构建依赖于Angular CLI工具.
Spring启动项目构建依赖于Spring Boot Maven插件.

那么如何配置和构建一个在前端托管Angular应用程序的Spring Boot应用程序呢？

我的要求如下:

• 使用Maven作为Java构建工具

• 在Spring Boot引导的嵌入式Tomcat实例中运行应用程序.

• 高效的开发环境中的构建生命周期

• 可靠的后期开发环境构建

Answer 1

角度配置

首先,我需要配置Angular应用程序,以便在Spring Boot Maven项目的源代码目录中提供Angular应用程序的构建.

一个简单的方法需要2个简单的更改:

• 移动Spring Boot Maven项目的根文件夹中的angular应用程序文件夹.

• 修改.angular-cli.json配置文件以更改默认 apps/outDir值. "dist""../src/main/resources/static"

那是 :

{
  ...
  "apps": [
    {
      "root": "src",
      "outDir": "../src/main/resources/static",
  ...
}

默认情况下,Spring Boot从类路径中的/static(/public或/resources或/META-INF/resources)目录或者根目录中提供静态内容ServletContext.

这样,当我执行ng build命令时,Webpack捆绑的angular应用程序将位于Spring Boot的静态内容的资源目录中.

Spring Boot配置

我不想在开发和后期开发环境中执行完全相同的Spring Boot构建任务.
当然,这并不意味着构建将根据目标环境产生不同的功能行为.

在开发中,我希望快速构建.
当我修改源代码(Java,JavaScript或其他任何东西)时,我想要快速反馈.我不想在每次源代码修改时打包和重新部署应用程序.
每次更改源代码时我都不想做一些特殊的事情.
我希望这些更改能够快速自动地反映在应用程序中.

要为后期开发环境构建应用程序,我希望有一个可靠的构建,并包含最终内容.
这里是开发后环境的详细要求:

• 我想从头开始执行Angular应用程序的完整构建(甚至整个Spring Boot应用程序).
  在开发过程中,每次源代码修改时webpack捆绑应用程序的增量更新都很好,但是当我提交应用程序时,我将真正减少潜在的副作用.
  我不在乎是否必须从头开始打包应用程序,因为我不经常创建此构建,我还将此任务留给自动工具,例如持续集成.

• 我希望通过自行运行部署它的嵌入式Tomcat来重新打包应用程序.Spring Boot Maven插件
  的repackage目标实现了它.

为了能够以干净/可靠的方式从一种类型的构建切换到另一种构建,我想指定两个不同的构建.

Maven(作为Gradle)提供了一个构建配置文件功能,可以很好地满足此要求.
所以,我用它.

以下是开发构建的Maven配置文件:

<profile>
    <id>fast-build</id>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <jvmArguments>
                        -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005
                    </jvmArguments>
                    <addResources>true</addResources>
                </configuration>
            </plugin>
        </plugins>
    </build>
</profile>

一些额外的说明:

• 在开发中,我希望总是能够在需要时添加断点,而无需重新启动应用程序.以这种方式评估的Spring Boot Maven插件
  的jvmArguments参数:

  <jvmArguments> -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005 </jvmArguments>

指定5005为调试器侦听器的端口,而不是suspend=n服务器的blocking().

• 要启用静态资源的热刷新,我将设置addResources为true.

以下是开发后构建的Maven配置文件(以及它使用的声明属性):

<properties>
    ...
    <node.version>v6.9.1</node.version>
    <npm.version>3.10.8</npm.version>
    ...
</properties>
    ...
    <profile>
        <id>full-build</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <executions>
                        <execution>
                            <goals>
                                <goal>repackage</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>1.2</version>
                    <configuration>
                        <installDirectory>angular-app</installDirectory>
                        <workingDirectory>angular-app</workingDirectory>
                    </configuration>
                    <executions>
                        <execution>
                            <id>install node and npm</id>
                            <goals>
                                <goal>install-node-and-npm</goal>
                            </goals>
                            <configuration>
                                <nodeVersion>${node.version}</nodeVersion>
                                <npmVersion>${npm.version}</npmVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>install angular app</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>install</arguments>
                            </configuration>
                        </execution>                            
                        <execution>
                            <id>npm build</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>run build</arguments>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>

一些额外的说明:

• angular-app声明在这里: <workingDirectory>angular-app</workingDirectory>是我在Maven Spring Boot项目中复制的angular应用程序的目录.

• <installDirectory>angular-app</installDirectory>是frontend-maven-plugin将安装节点和所需依赖项的工作文件夹.
  该angular-app目录本身不直接用于生成打包的应用程序.
  所以使用这个目录很好,也允许从Angular CLI运行角度应用程序.

用于运行构建的Angular和Spring Boot命令

• 对于开发构建:

  • Angular CLI:从angular-app目录中执行ng build -w.它将构建Angular应用程序并逐步更新构建(w用于监视)
  • Spring Boot:从maven项目的基目录开始执行mvn spring-boot:run -Pfast-build(欢迎执行它的脚本)

• 对于后期开发构建:

  • Angular CLI不是必需的.
  • Spring Boot:从maven项目的基目录开始执行 mvn spring-boot:run