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

Question

我想将 spring 引导和 angular 应用程序部署为单个 war 文件。 我试过这样做，如下所示，

在 angular 应用程序中创建了一个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引导工程中的build.gradle文件中添加如下内容，

implementation(project(':angularProject')

在 spring 引导项目中的settings.gradle文件中添加以下内容，

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

当我构建 spring 引导项目时，我可以在 spring 引导项目位置看到 angularProject，但我希望它自动显示在 spring 引导项目的资源文件夹中的 static 文件夹中。 我错过了什么吗？ 任何帮助深表感谢。

编辑：

现在，在构建项目时出现以下错误

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

如果您使用 Gralde，请使用此插件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 文件中或排除一些文件