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

Posted 2023-02-25

【中文标题】如何将 Spring Boot 和 Angular 应用程序部署为单个 war 文件？

【英文标题】：How to deploy Spring boot and Angular application as single war file?

【发布时间】：2021-12-28 04:46:50

【问题描述】：

我想将 Spring Boot 和 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 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 项目的资源文件夹中的 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

谢谢。

【参考方案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更稳定。

【参考方案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 文件中或排除一些文件