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

Angular projet构建依赖于 Angular CLI tool.
Spring boot项目的构建依赖于 Spring Boot Maven Plugin.

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

我的要求如下：

>使用Maven作为Java构建工具
>在Spring Boot引导的嵌入式Tomcat实例中运行应用程序.
>在开发环境中高效构建生命周期
>可靠的后期开发环境构建

解决方法

角度配置

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

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

>在Spring Boot Maven项目的根文件夹中移动angular应用程序文件夹.
>将.angular-cli.json配置文件修改为
默认情况下更改“dist”的apps / outDir值
“../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 goal实现了它.

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

Maven(作为Gradle)提供了build profile 功能,可以很好地满足这一要求.
所以,我用它.

以下是开发构建的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)服务器.

>要启用静态资源的热刷新,我将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项目中复制的角度应用程序的目录.
>< 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

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

解决方法

相关文章