问题描述

在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. 【贪心】AGC018C Coins

    Problem Link 现在有 \(X+Y+Z\) 个人,第 \(i\) 个人有三个权值 \(a_i,b_i,c_i\),现在要求依次选出 \(X\) 个人,\(Y\) 个人和 \(Z\) 个人(一 ...

  2. 浅浅的源码剖析grpc-go(一)

    最近在学习 rpc 相关的知识,如果让我去从头设计一个 rpc,我从使用者的角度出发,究竟需要去做一下什么工作? 第一,RPC 本质上就是一个远程调用,那肯定就需要通过网络来传输数据.虽然传输协议可以 ...

  3. vue3中retive的错误用法导致数据不跟新

    retive的错误用法 <template> <div> 司藤的信息==>{{ objInfo }} <button @click="handerHttp ...

  4. LINQ分组排序后获取每组第一条记录

    当前有一张数据表{Student},包含了如下的字段信息: CREATE TABLE [dbo].[Student]( [Sno] [nchar](7) NOT NULL, [Sname] [ncha ...

  5. 解决问题:ACM-Reference-Format使用这个style后,文献引用顺序和正文不一致

    解决问题:latex中bib引用顺序不正确,引用顺序和正文不一致_丨汀.的博客-CSDN博客问题:生成pdf时文献应用会乱序引用bib格式的参考文献时,会这么写:\bibliographystyle{ ...

  6. 【二】AI Studio 项目详解【VisualDL工具、(二)环境使用说明、(二)脚本任务、图形化任务、在线部署及预测】PARL

    相关文章 [一]-环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简介 [五]-Sarsa&Qlear ...

  7. 【CSDN浏览器插件测评超详细版】——万能便捷的C功能,直接爱不释手,强烈推荐!更多功能等你探索

    我的界面预览: 1.下载安装 下载链接:https://plugin.csdn.net/?utm_source=chajian-contest-1210#/chrome-index-help 说明:若 ...

  8. C++ Boost 内存池与智能指针

    Pool内存池: 只能开辟常规内存,数据类型为int,float,double,string等. #include <iostream> #include <boost/pool/p ...

  9. Cnpack ctrl+alt+v 来回切换 变量声明区,和代码写区,非常方便

    Cnpack ctrl+alt+v 来回切换 变量声明区,和代码写区,非常方便 非常方便

  10. Linux--split命令(将一个大文件拆分成多个小文件)

    一.split命令简介 split是Linux系统中的一个文件拆分命令,它可以将一个大文件拆分成多个小文件.这对于处理大型文件,或者需要将数据分解到多个文件中的场景非常有用. 二.split命令的使用 ...