Spring Boot + Angular app deployed to Heroku as a WAR, throws 404 unless I include “index.html” in the URL

Question

我正在尝试创建一个非常基本的 Spring Boot + Angular 应用程序，然后我将能够开发并自动部署为单个应用程序。 为了构建应用程序，我配置了 Maven 来编译 Angular 项目并将其与我的后端一起添加到 WAR 文件中。 然后它将 WAR 部署到 Heroku 并使用以下 web dyno 启动它：

java $JAVA_OPTS -jar target/dependency/webapp-runner.jar --port $PORT target/Springular-1.0.war

我正在使用 Webapp Runner，它使用给定的 WAR 启动 Tomcat 实例。

Angular 部件本身是使用 package.json 中的安装后脚本构建的：

"postinstall": "ng build --prod --base-href /ui/"

如您所见，我在此处和 pom.xml 中将 base-href 设置为“/ui/”。 我将我的 Spring Controller 映射到“/api”。 我希望能够使用https://app.herokuapp.com/ui访问我的前端并发出诸如https://app.herokuapp.com/api/hello-world类的后端请求。

虽然后端部分工作正常，但当我尝试访问 UI 时，我遇到了 404 Whitelabel 错误页面。 我的 webapp 文件夹 (src/main/webapp) 如下所示：

springular 
└───src
    └───main
        └───webapp
            │   index.jsp
            └───WEB-INF
                │   web.xml

web.xml 不包含任何配置。 index.jsp 将重定向发送到“/ui/”。 如果我将重定向更改为“/ui/index.html”，我可以使用 URL https://app.herokuapp.com/访问我的前端，但是当我刷新页面时，我再次得到 404。

到目前为止我尝试过的事情：

• 为“”（空）路径设置 Angular 路由 - 没有帮助，但我还是保留了它。

• 将server.servlet.context-path添加到 Spring 属性，而不是使用 @RequestMapping 注释。

• 在 Spring 的 application.properties 中禁用 Whitelabel 错误页面，这会导致出现关于未处理错误的不同错误。

• 在 web.xml 中指定错误页面位置。 它没有改变任何东西。

• 覆盖主 Java class 中 SpringBootServletInitializer 的配置方法。

• 在 Angular 中使用 hash 定位策略 ( RouterModule.forRoot(routes, { useHash: true }) )

从我目前所读到的，我最好的猜测是我的 Tomcat 配置不正确，但我不知道如何修复它。 如果它使事情变得更容易，我愿意从前端 URL 中删除“/ui/”部分。

最后，我将包含一些我认为可能与该问题相关的文件。

索引.jsp

<% response.sendRedirect("/ui"); %>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <display-name>Springular</display-name>
</web-app>

主Spring Class

@SpringBootApplication
public class SpringularApplication extends SpringBootServletInitializer {
    public static void main(String[] args) {
        SpringApplication.run(SpringularApplication.class, args);
    }
}

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>
    <groupId>com.example</groupId>
    <artifactId>Springular</artifactId>
    <version>1.0</version>
    <name>springular</name>
    <description>Spring + Angular Template Application</description>
    <packaging>war</packaging>

    <properties>
        <java.version>1.8</java.version>
        <heroku.appName>springular-template</heroku.appName>
        <maven.compiler.source>${java.version}</maven.compiler.source>
        <maven.compiler.target>${java.version}</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.4.1</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>2.4.1</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.4.1</version>
            </plugin>
            <plugin>
                <artifactId>maven-clean-plugin</artifactId>
                <version>3.1.0</version>
                <configuration>
                    <filesets>
                        <fileset>
                            <directory>${project.basedir}\frontend\dist</directory>
                        </fileset>
                    </filesets>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.11.0</version>
                <configuration>
                    <workingDirectory>${project.basedir}\frontend</workingDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                          <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                          <nodeVersion>v12.16.2</nodeVersion>
                          <npmVersion>6.14.4</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                          <goal>npm</goal>
                        </goals>
                        <configuration>
                          <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>install angular</id>
                        <goals>
                          <goal>npm</goal>
                        </goals>
                        <configuration>
                          <arguments>install @angular/cli@^9.0.0 -g</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <executions>
                    <execution>
                        <phase>package</phase>
                        <goals><goal>copy</goal></goals>
                        <configuration>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>com.heroku</groupId>
                                    <artifactId>webapp-runner</artifactId>
                                    <version>9.0.41.0</version>
                                    <destFileName>webapp-runner.jar</destFileName>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.3</version>
                <configuration>
                    <webResources>
                        <resource>
                            <directory>frontend/dist/springular</directory>
                            <targetPath>ui</targetPath>
                        </resource>
                    </webResources>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.heroku.sdk</groupId>
                <artifactId>heroku-maven-plugin</artifactId>
                <version>3.0.3</version>
                <executions>
                    <execution>
                        <phase>deploy</phase>
                        <goals><goal>deploy-war</goal></goals>
                        <configuration>
                            <appName>${heroku.appName}</appName>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

Answer 1

在您的应用模块中尝试如下 hash 定位策略，

providers: [
        {provide: LocationStrategy, useClass: HashLocationStrategy}
]