Angular和Spring Boot:配置以使它们有效地协同工作 [英] Angular and Spring Boot : configuration to make them work together efficiently

问题描述

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

Angular projet build relies on the Angular CLI tool.
Spring boot project build relies on the Spring Boot Maven Plugin.

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

So how to configure and build a Spring Boot application that hosts an Angular Application on the front-end ?

我的要求如下:

• 使用Maven作为Java构建工具

• using Maven as Java build tool

在由Spring Boot启动的嵌入式Tomcat实例中运行应用程序.

running the application in a embedded Tomcat instance bootstrapped by Spring Boot.

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

efficient build lifecycle in development environment

用于后期开发环境的可靠构建

reliable build for post-development environment

推荐答案

角度配置

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

First, I need to configure the Angular application to make the build of the Angular application available in the source code directory of the Spring Boot Maven project.

一种简单的方法需要进行两个简单的更改:

A simple way to do it requires 2 simple changes :

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

• moving the angular application folder in the root folder of the Spring Boot Maven project.

将.angular-cli.json配置文件修改为 更改默认为"dist"的apps/outDir值，方法是 "../src/main/resources/static".

modifying the .angular-cli.json configuration file to change the apps/outDir value that is "dist" by default, by "../src/main/resources/static".

那是:

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

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

By default Spring Boot serves static content from a directory called /static (or /public or /resources or /META-INF/resources) in the classpath or from the root of the ServletContext.

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

In this way, as I execute the ng build command, the angular application bundled by Webpack will be located in the resource directory for static contents of Spring Boot.

Spring Boot配置

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

I don't want to perform exactly the same Spring Boot build tasks in development and in post-development environments.
Of course, it doesn't mean that the builds will produce a distinct functional behavior according to the target environments.

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

In development, I want to have a fast build.
As I modify the source code (Java, JavaScript or anything else), I want a fast feedback. I don't want to package and redeploy the application at each source code modification for example.
I don't want to do some special things at each time the source code is changed either.
I want that changes be reflected in the application fast and automatically.

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

To build the application for post-development environments, I want to have a reliable build and that contains the final content.
Here the detailed requirements for the post-development environments :

• 我想从头开始对Angular应用程序(甚至整个Spring Boot应用程序)进行完整构建.
  在开发过程中，每次修改源代码时，对webpack捆绑应用程序进行增量更新是可以的，但在交付应用程序时，我将最大程度地减少潜在的副作用.
  我不在乎是否必须从头开始打包应用程序，因为我不经常创建此构建，因此我也将这项任务留给了诸如持续集成之类的自动工具.

• I want to perform a full build from scratch of the Angular application (and even of the overall Spring Boot application).
  Incremental updates of the webpack bundled application at each source code modification is fine during development but as I deliver my application, I will really reduce potential side effects at its maximum.
  I don't care if I have to package the application from scratch as I don't create this build frequently and I also leave this task to automatic tools such as the continuous integration.

我想通过自身运行嵌入式Tomcat对其进行重新打包，使其具有自治性.
的 repackage目标 Spring Boot Maven插件即可实现.

I want to repackage the application in a way where it is autonomous by running itself an embedded Tomcat that deploys it.
The repackage goal of Spring Boot Maven plugin achieves it.

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

To be able to switch in a clean/reliable way from a type of build to another one, I want to specify two distinct builds.

Maven(如Gradle)提供了构建配置文件可以很好地满足此要求的功能.
所以，我用它.

Maven (as Gradle) provides a build profile feature that addresses very well this requirement.
So, I use it.

这是开发版本的Maven配置文件:

Here is the Maven profile for the development build :

<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参数以这种方式赋值:

• In development, I want always have a way to add a break point if I need and without restarting the application.
  The jvmArguments argument of the Spring Boot Maven plugin valued in this way :

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

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

将5005指定为调试器侦听器的端口，而不会阻塞服务器(suspend=n).

specifies 5005 as port for the debugger listener without being blocking (suspend=n) for the server.

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

• To enable the hot refreshing of static resources, I set the addResources to true.

这是开发后版本的Maven配置文件(及其使用的声明属性):

Here is the Maven profile for the post-development build (plus declared properties used by it) :

<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-app declared here : <workingDirectory>angular-app</workingDirectory> is the directory of the angular application that I copied in the Maven Spring Boot project.

<installDirectory>angular-app</installDirectory>是frontend-maven-plugin将在其中安装节点和所需依赖项的工作文件夹.
angular-app目录本身并不直接用于生成打包的应用程序.
因此，使用此目录很好，并且还允许从Angular CLI运行angular应用程序.

<installDirectory>angular-app</installDirectory> is the working folder where the frontend-maven-plugin will install node and required dependencies.
In itself, the angular-app directory is not directly used to generate the packaged application.
So using this directory is fine and also allows to run the angular application from Angular CLI.

Angular and Spring Boot命令来运行构建

• 用于开发版本:

• For development build :

• Angular CLI:从angular-app目录中，执行ng build -w. 它将构建Angular应用程序，并以增量方式更新构建(用于观察的w)
• Spring Boot:从maven项目的基本目录中，执行mvn spring-boot:run -Pfast-build(欢迎执行该脚本的脚本)

• 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)

用于后期开发版本:

• 不需要角度CLI.
• Spring Boot:从maven项目的基本目录中，执行mvn spring-boot:run

这篇关于Angular和Spring Boot:配置以使它们有效地协同工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！