ReactJs 应用程序为静态文件返回 404 Not Found

问题描述 投票:0回答:1

我有一个使用react-create-app 创建的ReactJs 应用程序。我已将我的应用程序部署到 Azure 应用服务计划 (sku F1)。

在本地主机中运行应用程序时,背景视频按预期运行。但是,部署后,我发现服务器返回 404 未找到我的 .mp4 文件(因此未按预期加载背景视频)。

Debug Console in browser showing 404 on load of .mp4

索取一般信息:

Request URL: https://abouthorusrm.azurewebsites.net/static/media/typing.203864c7a88151d96941.mp4
Request Method: GET
Status Code: 404 Not Found
Remote Address: 13.89.172.5:443
Referrer Policy: strict-origin-when-cross-origin

请求标头:

Accept: */*
Accept-Encoding: identity;q=1, *;q=0
Accept-Language: en-US,en;q=0.8
Connection: keep-alive
Cookie: ARRAffinity=f4edef8e8ae33d792aa347f6380e743b9805a4dd08725995c30ae1f829052383;ARRAffinitySameSite=f4edef8e8ae33d792aa347f6380e743b9805a4dd08725995c30ae1f829052383
Host: abouthorusrm.azurewebsites.net
Range: bytes=0-
Referer: https://abouthorusrm.azurewebsites.net/
Sec-Ch-Ua: "Not/A)Brand";v="99", "Brave";v="115", "Chromium";v="115"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "Windows"
Sec-Fetch-Dest: video
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
Sec-Gpc: 1
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

响应标头:

Content-Length:103
Content-Type: text/html
Date: Sun, 06 Aug 2023 21:41:53 GMT
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET

我希望此文件加载并显示 .mp4 文件作为我的网络应用程序的背景。

返回 404 的文件位于我的 React 应用程序的优化构建文件夹中,路径如下:

build/static/media/typing.203864c7a88151d96941.mp4

我已经(通过 Kudu)验证了具有相同区分大小写命名的文件位于服务器上的以下路径:

C:\home\site\wwwroot\static\media yping.203864c7a88151d96941.mp4

Screenshot of Web Server filesystem in kudu

我尝试将 web.config 文件添加到服务器以允许包含以下内容的 .mp4 mime 类型:

<configuration>
   <system.webServer>
         <staticContent>
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
            <mimeMap fileExtension=".webm" mimeType="video/webm" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml">
         </staticContent>
   </system.webServer>
</configuration>

但这并没有解决当前的问题。

奇怪的是,从同一目录引用了一个 .svg 文件,该文件渲染没有问题。

Debug Console in browser showing successful load of .svg in same directory as .mp4

reactjs azure azure-web-app-service create-react-app
1个回答
0
投票

我已尝试使用您提供的相同方法并得到相同的错误。

enter image description here

我已将代码修改如下。 在 App.js 文件中添加 .mp4 的源代码。

App.js:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Welcome to React MP4 App</h1>
      <video controls autoPlay loop className="background-video">
        <source src="/sample-mp4-file-small.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <p>This is a sample React app with an MP4 video.</p>
    </div>
  );
}

export default App;

应用程序.css:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

本地:

enter image description here

  • 我已成功将React应用程序部署到azure应用程序服务。

enter image description here

  • KUDU 中的文件结构路径:

enter image description here

enter image description here

输出: enter image description here

需要进一步说明,请参阅此 SO 链接。

© www.soinside.com 2019 - 2024. All rights reserved.