如何将 Spring boot 和 Angular 应用程序部署为单个 war 文件？

Question

我想将 Spring Boot 和 Angular 应用程序部署为单个 War 文件。我尝试过如下操作，

在角度应用程序中创建了一个 build.gradle 文件

plugins {
  id 'java'
  id "com.moowork.node" version "1.3.1"
}

// 2
node {
  version = '10.15.3'
  npmVersion = '6.9.0'
  download = true
}

// 3
jar.dependsOn 'npm_run_build'

// 4
jar {
  from 'dist/projectName' into 'static'
}

在 Spring Boot 项目中的 build.gradle 文件中添加了以下内容，

implementation(project(':angularProject')

在 Spring Boot 项目中的 settings.gradle 文件中添加了以下内容，

include ':angularProject'
project(':angularProject').projectDir = new File('../angularProject')

当我构建 Spring Boot 项目时，我可以在 Spring Boot 项目位置看到 AngularProject，但我希望它自动显示在 Spring Boot 项目的资源文件夹中的静态文件夹中。我错过了什么吗？非常感谢任何帮助。

编辑：

现在，在构建项目时，我收到以下错误

Could not determine the dependencies of task ':war'.
> Could not resolve all task dependencies for configuration ':runtimeClasspath'.
   > Could not resolve project :frontendProject.
     Required by:
         project :
      > No matching variant of project :frontendProject.was found. The consumer was configured to find a runtime of a library compatible with Java 8, packaged as a jar, and its dependencies declared externally but:
          - Variant 'apiElements' capability backendProjectName:frontendProject:unspecified declares a library, packaged as a jar, and its dependencies declared externally:
              - Incompatible because this component declares an API of a component compatible with Java 15 and the consumer needed a runtime of a component compatible with Java 8
          - Variant 'runtimeElements' capability backendProjectName:frontendProject:unspecified declares a runtime of a library, packaged as a jar, and its dependencies declared externally:
              - Incompatible because this component declares a component compatible with Java 15 and the consumer needed a component compatible with Java 8

谢谢你。

Answer 1

使用Maven插件

frontend-maven-plugin

https://github.com/eirslett/frontend-maven-plugin。请参阅https://marco.dev/deploy-java-angular-one

如果您使用 Gradle 作为构建工具，请使用此插件 https://github.com/siouan/frontend-gradle-plugin 。但

frontend-maven-plugin

更稳定。

Answer 2

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.10.4</version>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v14.15.1</nodeVersion>
                <npmVersion>6.14.8</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install --cache</arguments>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>cli build prod</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build-prod</arguments>
            </configuration>
            <phase>generate-resources</phase>
        </execution>
    </executions>
</plugin>

<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.3.1</version>
<configuration>
    <failOnMissingWebXml>false</failOnMissingWebXml>
    <warSourceDirectory>target/classes/static</warSourceDirectory>
    <webResources>
        <resource>
            <directory>src/main/webapp</directory>
            <includes>
                <include>WEB-INF/**</include>
                <include>js/**</include>
                <include>img/**</include>
                <include>css/**</include>
                <include>index.html</include>
                <include>legal.html</include>
                <include>privacyPolicy.html</include>
            </includes>
        </resource>
    </webResources>
</configuration>
</plugin>
        

在 frontend-maven-plugin 上，我们正在构建 Angular，在 maven-war-plugin 上，我们将 Angular 构建文件包含到 war 文件中或排除一些文件