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配置文件，默認情況下，通過"../src/main/resources/static"更改"dist"的apps/outDir值。

那是 ：

{
  ...
  "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 ）服務器。

• 要啟用靜態資源的熱刷新，我將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