angularjs - 将Spring Boot WAR部署到Tomcat 8 - 访问资源时出现HTTP 404

标签 angularjs spring spring-mvc tomcat spring-boot

我是 Spring Boot 的新手,正在努力将一个简单的 HTML 网络应用程序 (AngularJS) 部署到 Tomcat 8。这个网络应用程序只提供一些 HTML/CSS/JS 内容,没有对后端的 REST 调用。它已使用 Webpack“编译”——这会生成 JS/CSS 包和一个通过 <script> / <link> 指向它们的 index.html 文件。标签——并且已经在带有嵌入式 tomcat 的 ExpressJS 和 Spring Boot 上进行了测试,并且按预期工作。但是沿着独立 WAR 的路径部署到 Tomcat 8 似乎并不能正常工作。

对于 Spring Boot 项目,我已将所有 HTML/CSS/JS 文件包含在 src/main/resources/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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example.my-app</groupId>
    <artifactId>my-app</artifactId>
    <version>0.0.1</version>
    <packaging>war</packaging>

    <name>my-app</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

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

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </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>
        </plugins>
    </build>
</project>

“主要”类:

package com.example.my.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.context.web.SpringBootServletInitializer;

@SpringBootApplication
public class MyAppApplication extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(MyAppApplication.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(MyAppApplication.class, args);
    }
}

以下是我用来执行 Tomcat 部署的步骤:

  1. mvn clean package生成 war
  2. 将WAR复制到path/to/tomcat8/webapp
  3. 启动Tomcat
  4. http://localhost:8080/my-app => 自动加载 index.html

不幸的是,我看到的都是 404 错误,因为它找不到一些 JS/CSS 文件。是否有我缺少的配置?

已更新: 这是 index.html 文件(通过 Webpack 自动生成):

<!doctype html>
<html>
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title>My App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="./assets/images/favicon.ico" />
  <link href="/main-aa49893f83cc830596563d81f09a9611.css" rel="stylesheet"><link href="/main-5949f1f257a55a77e48bc4ab62fbc99a.css" rel="stylesheet"></head>

  <body ng-app="myapp">
    <ui-view></ui-view>
  <script type="text/javascript" src="vendor-353ddb48f4ffe6546d59.js"></script><script type="text/javascript" src="app-353ddb48f4ffe6546d59.js"></script></body>
</html>

以下是我在访问 localhost:8080/my-app/index.html 时在 Chrome Web Inspector 中看到的错误:

http://localhost:8080/main-5949f1f257a55a77e48bc4ab62fbc99a.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/main-aa49893f83cc830596563d81f09a9611.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/app-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/app-4ba9083ed9802279c207.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/main-aa49893f83cc830596563d81f09a9611.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/main-5949f1f257a55a77e48bc4ab62fbc99a.css Failed to load resource: the server responded with a status of 404 (Not Found)

还有一件事我忘了说。当我使用 mvn clean package 生成 war 时, src/main/resources/public 下的所有文件都被放入 WEB-INF/classes/resource子文件夹。根据研究,这些文件不是公开可见的(即如果我尝试访问 localhost:8080/my-app/foo.css,它会给出 404)。这就是 index.html 文件无法“看到”它所依赖的 JS/CSS 文件的原因吗?

最佳答案

我最终搞清楚了,但没有使用 Spring Boot 来打包 WAR 文件。在我的本地还有另一个项目使用普通的旧 Maven + pom.xml + web.xml创建 WAR,我将其用作引用以找出当前项目无法正常工作的原因。存在多个问题:

  • 当您使用默认配置部署到 Tomcat 8 时,它会将 WAR 文件的名称(它们称为上下文)附加到其路径。在这种情况下,它是 http://localhost:8080/my-app . “已编译”的 AngularJS 应用程序的 index.html有一个<base href="/">需要指向 /my-app/ 的标签而不是 / .这是 JS/CSS 文件在 Web Inspector > Sources 中不可见的主要原因。 .
  • <link>标签的 src属性不应包含前导 /
  • 就我上面发布的 Spring Boot 应用程序而言,它带有嵌入式 Tomcat 并将应用程序部署在根上下文中,因此无需更改 index.html 文件中的任何路径。
  • 与 Spring Boot 类似,由于未创建“子上下文”,我在 ExpressJS 中运行该应用程序也没有任何问题。同样,在这种情况下无需修改任何文件。

还有其他与查找资源相关的错误,例如 .ttf文件,但至少应用程序能够运行。

更新: 通过在 server.xml 底部附近添加以下内容,看起来可以从 Tomcat 8 根目录提供 WAR 文件。文件:

<Context path="" docBase="my-app" debug="0" reloadable="true"></Context>

这将避免修改 index.html 文件的需要。

太棒了:)

关于angularjs - 将Spring Boot WAR部署到Tomcat 8 - 访问资源时出现HTTP 404,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39187237/

相关文章:

javascript - AngularJS退出递归函数调用

html - 类型错误 : dbg is undefined in angularjs

javascript - 将 id 传递到 url 以获取 angular.js 中的单个 View

java - 使用 Spring @TransactionalEventListener 发布事件时的奇怪(循环)行为

java - 使用 Spring MVC 流式传输可关闭资源

java - Maven项目构建异常

java - Spring找不到HTTP请求的映射

javascript - 为什么 ng-src 需要表达式?

java - 当 JPA 中字段为 LocalDateTime 时,如何查找今天创建的每个实例?

java - 如何防止使用 H2 进行 JUnit-Test 的日期更改?