【Azure 应用服务】在Azure App Service for Linux环境中，部署的Django应用，出现加载css、js等静态资源文件失败

问题描述

在App Service for Linux环境中，部署Django应用，访问应用页面时候，出现css、js等静态资源文件加载失败问题。

浏览器Console提示的错误消息为：

Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

 

问题分析

根据错误消息，初步怀疑是Django的静态文件配置路径不对。所以需要根据Django静态文件设置，查看是否配置 STATIC_URL。 

当项目在本地运行时，STATIC_URL设置如下：

STATIC_URL = 'static/'

但当部署到云上环境时候，需要考虑从环境变量中读取部署后(非开发环境路径）的静态文件夹路径：

STATIC_URL = os.environ.get("DJANGO_STATIC_URL", "/static/")
STATIC_ROOT = os.environ.get("DJANGO_STATIC_ROOT", "./static/")    

然后，在App Service 的应用程序配置页面查看  DJANGO_STATIC_ROOT 和 DJANGO_STATIC_URL 是否配置并配置正确。

 

参考资料

How to manage static files (e.g. images, JavaScript, CSS)：https://docs.djangoproject.com/en/4.0/howto/static-files/

提供 Django 应用的静态文件：https://docs.azure.cn/zh-cn/app-service/configure-language-python#serve-static-files-for-django-apps