角和弹簧启动:使它们有效地协同工作的配置

Question

角喷射器的建造依赖于角CLI工具。

Spring项目构建依赖于Spring Boot Maven插件。

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

我的要求如下：

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

Answer 1

角组态

首先，我需要配置Spring应用程序，以便在Spring项目的源代码目录中提供构建的功能。

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

• 将角应用程序文件夹移动到Spring项目的根文件夹中。
• 修改.angular-cli.json配置文件以更改默认情况下由"../src/main/resources/static"生成的apps/outDir值，即"dist"。

即：

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

默认情况下，Spring提供来自类路径中名为/static (或/public、/resources或/META-INF/resources)的目录或ServletContext根目录的静态内容。

通过这种方式，在执行ng build命令时，Webpack绑定的角应用程序将位于Spring静态内容的资源目录中。

弹簧启动配置

我不想在开发和开发后环境中执行完全相同的Spring构建任务。

当然，这并不意味着构建会根据目标环境产生不同的功能行为。

In development，我想要一个快速的构建。

当我修改源代码(Java、JavaScript或其他任何东西)时，我需要一个快速的反馈。例如，我不想在每次修改源代码时打包和重新部署应用程序。

我也不想在每次修改源代码时做一些特殊的事情。

我希望更改能够快速、自动地反映在应用程序中。

要为后开发环境构建应用程序，我希望有一个可靠的构建，并包含最终的内容。

在这里，对开发后环境的详细要求：

• 我想从零开始执行角度应用程序(甚至整个Spring应用程序)的完整构建。 在每次修改源代码的过程中，webpack捆绑应用程序的增量更新都很好，但是当我交付应用程序时，我会最大限度地减少潜在的副作用。 我不在乎是否必须从头打包应用程序，因为我不经常创建这个构建，我也把这个任务留给自动工具，比如持续集成。
• 我希望通过运行自己的嵌入式Tomcat来重新打包应用程序，使其具有自主性。 Spring插件的目标实现了它。

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

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插件的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项目中复制的角形应用程序的目录。
• <installDirectory>angular-app</installDirectory>是frontend-maven-plugin将安装节点和所需依赖项的工作文件夹。 angular-app目录本身并不直接用于生成打包的应用程序。 因此，使用这个目录是很好的，并且还允许从角CLI运行角应用程序。

运行builds的角和Spring命令

• 发展建设：

- Angular CLI : from the `angular-app` directory, execute `ng build -w`.  It will build the Angular application and also update incrementally the build (`w` for watch)    
- Spring Boot : from the base directory of the maven project, execute `mvn spring-boot:run -Pfast-build` (a script that executes it is welcome)

​

• 对于开发后的构建：

- Angular CLI is not required.   
- Spring Boot : from the base directory of the maven project, execute `mvn spring-boot:run`

​