Add MIME Types to Nginx - Linux App Service (PHP 8.x blessed image)

[Guest shuanand]

MIME types describe the media type of content, either in email, or served by web servers or web applications. They are intended to help provide a hint as to how the content should be processed and displayed.

 

Examples of MIME types:

 

• text/html for HTML documents.
  
• text/plain for plain text.
  
• text/css for Cascading Style Sheets.
  
• text/javascript for JavaScript files.
  
• text/markdown for Markdown files.
  
• application/octet-stream for binary files where user action is expected.
  

 

Server default configurations vary wildly and set different default MIME-type values for files with no defined content type. As new content types are invented or added to web servers, the users may fail to add the new MIME types to their web server's configuration. This is a major source of problems for users of browsers that respect the MIME types reported by web servers and applications. The browser console in such cases may report following error:

 

 

 

 

 

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream".

Strict MIME type checking is enforced for module scripts per HTML spec.

 

 

 

 

 

Why are MIME Types important:

 

 

 

 

If a web server or application reports an incorrect MIME type for content (including a "default type" for unknown content), a web browser has no way of knowing the author's intentions. This may cause unexpected behavior.

 

Some web browsers may try to guess the correct MIME type. This allows misconfigured web servers and applications to continue working for those browsers (but not other browsers that correctly implement the standard).

 

 

 

 

This document shows you how to add a MIME type (for JavaScript ES6 modules (*.mjs)) to your Nginx configuration. Inside App Service built-in PHP 8 docker image, the Nginx configuration for mime types is stored in /etc/nginx/mime.types file. The following steps can be used to create your own customized Nginx mime type configuration based on the default one:

 

 

 

1) Firstly, we need to copy /etc/nginx/mime.types to the /home folder.

 

By default, App Service set WEBSITES_ENABLE_APP_SERVICE_STORAGE = true. The files stored in /home path are persisted in an Azure Storage file share, which can survive restart and shared across scale instances. So, we need to firstly save the Nginx mimetype configure file under /home path.

 

 

 

Go to App Service WEBSSH via https://<AppServiceName>.scm.azurewebsites.net/webssh/host

 

 

 

 

 

cp /etc/nginx/mime.types /home/mime.types

 

 

 

 

 

1. Make Nginx configuration changes to the /home/mime.types file:
   

 

 

 

vi /home/mime.types

 

 

 

 

 

Then find this line: application/javascript js and update it to application/javascript js mjs as shown below:

 

 

 

 

 

 

This ensures that nginx should not use non-JavaScript MIME types for JavaScript ES6 modules (*.mjs) .

 

 

 

1. Use custom startup script to overwrite original Nginx config file. So the platform can use your configuration to start the Nginx server every time the App Service being started.
   

 

Go to “Configuration” --> “General settings” in the App service Portal.

Add the following command in the “Startup Command”:

 

 

 

 

 

cp /home/mime.types /etc/nginx/mime.types; service nginx restart

 

 

 

 

 

 

 

 

If you have any questions or feedback, please add a comment below.

 

Continue reading...