问题描述

在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/

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

  1. 【Azure 应用服务】PHP应用部署在App Service for Linux环境中,上传文件大于1MB时,遇见了413 Request Entity Too Large 错误的解决方法

    问题描述 在PHP项目部署在App Service后,上传文件如果大于1MB就会遇见 413 Request Entity Too Large 的问题. 问题解决 目前这个问题,首先需要分析应用所在的 ...

  2. 【Azure 应用服务】App Service For Windows 环境中部署Python站点后,如何继续访问静态资源文件呢(Serving Static Files)?

    问题描述 当创建一个App Service 后,运行时环境和版本选择Windows 和 Python 3.6. 登录Kudu 站点查看,默认的文件有 web.config, hostingstart- ...

  3. 【Azure 应用服务】一个 App Service 同时部署运行两个及多个 Java 应用程序(Jar包)

    问题描述 如何在一个AppService下同时部署运行多个Java 应用程序呢? 问题解答 因为App Service的默认根目录为 wwwroot.如果需要运行多个Java 应用程序,需要在 www ...

  4. 【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法

    问题描述 在App Service for Windows的环境中,当前只提供了PHP 7.4 版本的选择情况下,如何实现自定义PHP Runtime的版本呢? 如 PHP Version 8.1.9 ...

  5. 【Azure 应用服务】App Service For Linux 部署PHP Laravel 项目,如何修改首页路径为 wwwroot\public\index.php

    问题描述 参考官方文档部署 PHP Laravel 项目到App Service for Linux环境中,但是访问应用时候遇见了500 Server Error 错误. 从部署的日志中,可以明确看出 ...

  6. 【Azure 应用服务】App Service for Linux 中实现 WebSocket 功能 (Python SocketIO)

    问题描述 使用 python websockets 模块作为Socket的服务端,发布到App Service for Linux环境后,发现Docker Container无法启动.错误消息为: 2 ...

  7. 【Azure 应用服务】NodeJS Express + MSAL 应用实现AAD集成登录并部署在App Service Linux环境中的实现步骤

    问题描述 实现部署NodeJS Express应用在App Service Linux环境中,并且使用Microsoft Authentication  Library(MSAL)来实现登录Azure ...

  8. 【Azure 应用服务】App Service For Linux 如何在 Web 应用实例上住抓取网络日志

    问题描述 在App Service For Windows的环境中,我们可以通过ArmClient 工具发送POST请求在Web应用的实例中抓取网络日志,但是在App Service For Linu ...

  9. 【Azure 应用服务】App Service For Linux 部署Java Spring Boot应用后,查看日志文件时的疑惑

    编写Java Spring Boot应用,通过配置logging.path路径把日志输出在指定的文件夹中. 第一步:通过VS Code创建一个空的Spring Boot项目 第二步:在applicat ...

  10. 【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https

    问题描述 在上篇博文"[Azure 应用服务]App Service for Linux 中实现 WebSocket 功能 (Python SocketIO)"中,实现了通过 HT ...

随机推荐

  1. @Transaction注解的失效场景

    作者:京东物流 孔祥东 背景 事情是这样,最近在实现一个需求的时候,有一个定时异步任务会捞取主表的数据并置为处理中(为了防止任务执行时间过长,下次任务执行把本次数据重复捞取),然后根据主表关联明细表数 ...

  2. package.json中^,~的详细说明

    场景描述 在package.json这个文件中,我们经常可以看见这样的信息 但是我们很少注意的是 版本前面的 ^ 到底是什么意思 今天我们就来讲一下(端好小板凳) "dependencies ...

  3. docker的架构及工作原理(详解)

    目录 一.docker架构图 二.Client 客户端 三.Host 主机(docker引擎) 四.Image 镜像 五.Container 容器 六.镜像分层 可写的容器层 七.Volume 数据卷 ...

  4. MeshFilter mesh vs sharedMesh

    MeshFilter有两个属性mesh和sharedMesh,从官方文档和实际使用来说说这两者的区别 MeshFilter文档 Unity的MeshFilter文档:https://docs.unit ...

  5. 数据挖掘[一]---汽车车交易价格预测(测评指标;EDA)

    题目出自阿里天池赛题链接:零基础入门数据挖掘 - 二手车交易价格预测-天池大赛-阿里云天池 相关文章: 特征工程详解及实战项目[参考] 数据挖掘---汽车车交易价格预测[一](测评指标:EDA) 数据 ...

  6. P2572 [SCOI2010] 序列操作 题解

    题解:序列操作 比较综合的 ds 题,综合了线段树常见的几种操作:维护最大子段和.区间翻转.区间求和.区间覆盖 . 维护子段和常见的我们维护三类东西: 前缀最长连续段.后缀最长连续段.当前区间上的最大 ...

  7. 资深工程师 VSCode C/C++ 必备开发插件

    1.前言 俗话说"工欲善其事,必先利其器",下面介绍几个VSCode提高开发效率的插件,资深工程师必备. 2.基础插件 2.1.Chinese(Simplified) vscode ...

  8. Linux-如何比较比较两个目录中的文件差异

    在 Linux 命令行中比较两个目录是一项常见的任务,特别是当你需要确保两个目录之间的文件完全相同时. 本文我们将介绍一些在 Linux 命令行中比较两个目录的方法. 方法一:使用 diff 命令比较 ...

  9. 回顾复习之坐标DP

    定义 坐标型动态规划一般是给定网格.序列,求满足条件的MAX或MIN. 开数组时,dp[i]一般代表以ai结尾的满足条件的子序列,dp[i][j]代表以i.j结尾的满足条件的最优解 例题 数塔 典中典 ...

  10. linux 中grep 命令详细使用方法说明

    前言在linux命令行中,经常需要对当前获取的一堆数据进行过滤.提取和分析,其中grep命令是其中非常重要的命令之一,比如,在生产环境服务器上,经常使用到下面这个命令 ps -ef | grep ja ...