Deployed App Service doesn't deliver .woff font or .mp4 files

Question

Hi,

I have set up a new web app, which contains a React JS frontend application.
The builds are clean an successfully deployed via github actions.
I also can see, all files are at their place in the wwwroot:

├── asset-manifest.json  
├── favicon.ico  
├── index.html  
├── manifest.json  
├── precache-manifest.434101f99e34655645ff23ae469a6415.js  
├── service-worker.js  
└── static  
    ├── css  
    │   ├── 2.2ce0d9b2.chunk.css  
    │   ├── 2.2ce0d9b2.chunk.css.map  
    │   ├── main.c6a6fb9f.chunk.css  
    │   └── main.c6a6fb9f.chunk.css.map  
    ├── js  
    │   ├── 2.2c20bca9.chunk.js  
    │   ├── 2.2c20bca9.chunk.js.map  
    │   ├── main.c9504c3a.chunk.js  
    │   ├── main.c9504c3a.chunk.js.map  
    │   ├── runtime~main.a8a9905a.js  
    │   └── runtime~main.a8a9905a.js.map  
    └── media  
        ├── bg-loop.cc0f4344.mp4  
        ├── bg-loop-no-logo.d4a71588.mp4  
        ├── Lemon.361aeb50.png  
        ├── Peach.df3b5e90.png  
        └── signPainter.cc8a6b11.woff  

The index.html loads everything (images, scripts, chunks, css files) correcttly but fails loading the mp4 files, the .woff font and the manifest.json (all these return 404 responses)

All questions related to this are more than 5 years old and refer to any IIS configuration for which I can't find any settings within the azure portal.

Has anyone a clue?
The mp4 files are 2MB in size each.

Thanks in advance for any hint,
Best regards,
Nico

Answer 1

I found a solution for it:

I had to add the following file named "web.config" (which did not exist before) into the wwwroot of the App to make it work:

<?xml version="1.0" encoding="UTF-8"?>  
<configuration>  
    <system.webServer>  
        <staticContent>  
               <remove fileExtension=".mp4" />  
               <mimeMap fileExtension=".mp4" mimeType="video/mp4" />  
			   <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />  
			   <remove fileExtension=".woff" />  
                       <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />  
			   <remove fileExtension=".json" />  
               <mimeMap fileExtension=".json" mimeType="application/json" />  
     </staticContent>  
    </system.webServer>  
</configuration>  

I did this with the App Service Editor, but it worked also when I added the file to my repository which gets build and deployed.
Btw, the "clientCache" xml tag sets the caching expiration to 1 day and is not required to make it work in the first place.
The app delivered the files as expected after I added the file.