无法将 Angular 应用程序部署到 Spring Boot

Question

我有一个 Angular 应用程序以及一个使用 Spring Boot 的 rest API，我需要将其打包为单个 war 文件以部署在 apache tomcat 上。我试过了：

• 构建我的 Angular 应用并将构建的文件粘贴到我的 Spring 应用中

• 使用 maven 战争插件将文件构建成战争

我看过的一些教程似乎向人们展示了将构建的 angular 文件复制到 Spring 静态文件夹中，然后运行 ​​spring 并且它可以工作。这对我来说似乎很奇怪，因为没有配置映射并且也不起作用。对我来说。

我认为我最好的选择是使用 maven war 插件，但我的问题是：

• 部署到 tomcat 时，我构建的战争无法通过浏览器访问

• 它们会导致The origin server did not find a current representation for the target resource or is not willing to disclose that one exists. 错误

• 我只是不知道下一步该做什么

我希望有人可以在这里为我指明正确的方向。提前致谢。

我已经根据答案进行了一些更改，并且我的 war 文件正在编译并被 tomcat 找到，但是，角度应用程序无法找到任何其他资源，并且只加载了一个空白页面。在开发工具中查看样式和其他文件时，我得到 404。

我现在使用不同名称的目录副本。在我的 package.json 中，我这样做：

{
  "name": "task-app-front-end",
  "version": "0.0.0",
  "scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxyconfig.json",
  "build": "ng build",
  "test": "ng test",
  "outDir": "../taskappmain\\src\\main\\resources\\public",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

将我构建的文件输出到我的后端应用程序的 /public/ 目录。

我的 pom.xml：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.4.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>taskappmain</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>taskappmain</name>
<description>taskAppMain</description>

<packaging>war</packaging>

<properties>
    <java.version>1.8</java.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.0</version>
    </dependency>
    <dependency>
        <groupId>javax.xml.bind</groupId>
        <artifactId>jaxb-api</artifactId>
        <version>2.3.0</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
        <exclusions>
            <exclusion>
                <groupId>org.junit.vintage</groupId>
                <artifactId>junit-vintage-engine</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <scope>provided</scope>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.1.0</version>
            <executions>
                <execution>
                    <id>copy-resources</id>

                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/classes/public</outputDirectory>
                        <resources>
                            <resource>
                                <directory>src/main/resources/public</directory>
                                <filtering>true</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

</project>

Answer 1

您的构建顺序应如下所示：

• 构建前端应用程序 (Angular)
• 构建 REST 应用程序（Spring Boot 应用程序）

您需要这样做，因为您将需要 Angular 应用程序中的 dist 文件夹，其中包含前端的生产代码。

在您的 maven 构建中，组装 war 文件时，您需要执行以下操作：

• 首先确保prepare-compile和compile阶段已经在maven下运行
• 在Prepare package 阶段，您需要将文件从front-end/dist/web 复制到项目backend 下target/classes/static/

可以使用 Maven 资源插件或 Maven AntRun 插件自动完成复制操作。

复制到target 目录而不是src/main/resources/static 的原因是Angular 应用程序的分发不是后端的“源”代码。

至于为什么static 包中的任何文件都可以直接在您的WAR 中使用，这是因为Spring Boot 默认情况下具有静态资源绑定，允许static 包中的所有文件通过互联网访问。另请参阅 Spring Boot 本身的 Sample project。

对于您的后端在 Tomcat 中部署后无法工作的问题，这可能是由于 Tomcat 不知道如何启动您的应用程序。请记住，Spring Boot 默认放弃使用 web.xml。因此，要允许容器服务器（Tomcat）启动 Spring Boot，您需要将以下内容添加到带有 @SpringBootApplication 注释的类中

public class MyRestApp extends SpringBootSerlvetInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
      return builder.sources(MyRestApp.class);
    }
}