windows+django+nginx部署静态资源文件

平台:windows
python:3.10.0
django:4.0.8
nginx:1.24.0

背景

开发阶段采用前后端分离模式,现在要将项目部署到工控机上,把前端项目编译出来的静态文件放到后端项目中进行一体化部署,且不修改生成的html文件,不使用django的模板标签

项目结构

在这里插入图片描述

开发模式

相关配置
settings.py

#项目根目录路径,也可以用其它写法
BASE_DIR = Path(__file__).resolve().parent.parent

#仅在DEBUG模式(开发模式)下,才能用django自带的方法加载静态资源
DEBUG = True

#模板配置
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 模板文件存放的位置,这里html文件放在项目的static文件夹下
        'DIRS': [os.path.join(BASE_DIR, 'static')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

#静态文件的基础 URL
STATIC_URL = '/static/'	
#第一个斜杠加不加都可以,但这个前缀必须和html文件中请求资源文件的url前缀保持一致
#例如,html文件中请求资源文件的url为:/static/js/chunk-vendors.js,那么这里就不能写成statics或者其它的,否则匹配不上

#静态文件搜索目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, 'static','static'),	
    #由于脚本文件放在 static/static/js目录下,所以搜索目录必须加上 工程绝对路径/static/static,否则当请求路径为 /static/js/chunk-vendors.js时,只会到 工程绝对路径/static目录下去找,不会到子目录继续寻找
]

#总结:
#请求路径为 /static/js/chunk-vendors.js
#先到 工程绝对路径/static/js/chunk-vendors.js寻找(STATICFILES_DIRS配置的第一个目录)
#找不到目标文件,再到 工程绝对路径/static/static/js/chunk-vendors.js寻找(STATICFILES_DIRS配置的第二个目录)

由于资源文件是前端项目直接生成的,我并不想用模板标签对生成的html文件进行改动。刚开始出现了访问不到资源文件的问题,后来发现在不使用模板标签的情况下,在HTML文件中访问静态文件,也是需要通过路由映射的。django提供了 staticfiles_urlpatterns() 这个函数将静态文件服务的url模式添加到django项目的url配置中,所以不需要我们手动添加。
当DEBUG设置为True时,django会自动提供静态文件服务,这样在开发环境中,就可以通过访问STATIC_URL中定义的路径来获取静态文件。
urls.py

from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.http import HttpResponse
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('system/', include(DeviceManager.urls)), # demo add
    path('', TemplateView.as_view(template_name='index.html')),
    path('monitor', TemplateView.as_view(template_name='monitor.html')),
]

urlpatterns += staticfiles_urlpatterns()

staticfiles_urlpatterns()源码

def staticfiles_urlpatterns(prefix=None):
    """
    Helper function to return a URL pattern for serving static files.
    """
    #没有指定前缀,就用STATIC_URL作为前缀
    if prefix is None:
        prefix = settings.STATIC_URL
    return static(prefix, view=serve)


# Only append if urlpatterns are empty
#可见当settings.DEBUG为False的时候,这个配置是不起作用的
if settings.DEBUG and not urlpatterns:
    urlpatterns += staticfiles_urlpatterns()

生产模式(需要安装nginx)

nginx:1.24.0
nginx下载地址
选择windows版本进行下载和安装
在这里插入图片描述
修改nginx配置
在nginx安装目录下找到conf/nginx.conf

#user  nobody;
worker_processes  1;

error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#access_log logs/access.log;


#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            #index  index.html index.htm;
            proxy_pass http://127.0.0.1:5000;  # 将端口号替换为 Django 项目运行的端口
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /static/ {
            alias E:/Demo/工程名/static/static/;  # 将路径替换为静态文件所在的绝对路径(相对路径也可以,这里的相对路径就是相对于nginx.conf的路径)
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}

主要需要关注的地方有

server {
        listen       80;	#用于指定Nginx监听的端口号,表示监听 HTTP 请求的标准端口
        server_name  localhost;	#用于指定Nginx服务器的域名或IP地址,表示对来自该域名的请求进行处理

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		#用于配置处理根路径 / 的请求的规则
        location / {
            root   html;	#指定静态文件的根目录。在这里,设置为 html,表示 Nginx 在处理请求时会从 html 目录中查找文件(nginx安装目录下的html目录)
            #index  index.html index.htm;
            proxy_pass http://127.0.0.1:5000;  #指定Nginx将请求转发到的后端服务器的地址。在这里,将请求代理到运行在 http://127.0.0.1:5000 上的 Django 项目,相当于直接访问http://127.0.0.1:5000
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

		#域名/static/与服务端的静态文件路径间的映射
		#用于配置处理静态文件路径 /static/ 的请求的规则。在这里,使用 alias 指令指定静态文件的根目录。
        location /static/ {
            alias E:/Demo/工程名/static/static/;  # 将路径替换为你的静态文件路径
        }
    }

配置完成后,在nginx的安装目录下用命令行启动nginx.exe
修改settings.py

DEBUG = False

启动django项目,在浏览器中,用nginx.conf中配置的nginx服务器的IP和端口去访问页面。
例如,访问localhost:80(80可省略),就相当于直接访问localhost:5000
在django项目的urls.py中,有映射关系如下:

path('', TemplateView.as_view(template_name='index.html')),
path('monitor',TemplateView.as_view(template_name='monitor.html')),

localhost:5000对应的模板文件是index.html,浏览器就会加载这个页面,并根据nginx的配置,到指定路径下寻找html请求的资源文件

location /static/ {
            alias E:/Demo/工程名/static/static/;  # 将路径替换为你的静态文件路径
        }

同样的,访问localhost:80/monitor也就相当于直接访问localhost:5000/monitor,对应的模板文件是monitor.html

停止nginx服务

nginx.exe -s stop

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/291350.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

告别复杂排版:Markdown语法指南

导语:Markdown作为一种轻量级的标记语言,以其简洁、易学的语法和强大的兼容性赢得了广泛的应用。本文将为您详细介绍Markdown的起源、基本语法及其在写作、博客、项目管理等场景的应用,带您领略这一简洁高效的文本编写工具的无穷魅力。 Mark…

「HarmonyOS」验证码多TextInput输入框焦点自动跳转问题

需求背景:需要做一个多输入框的验证码模块,输入验证码时输入后光标会自动跳转至下一个输入框,删除验证码时会自动删除上一个输入框内容,并且光标跳转至上一个输入框内。6位验证码全部输完后进行登录请求 具体样式如下图&#xff1…

前端angular 实现验证码 输入+展示(大框+加粗内容 )

参考用原生方在手机上此效果 如何实现一个4位验证码输入框效果 输入使用的任旧是html的input元素,只是让它看不到了只是把输入到input元素里的内容取到的内容放在改过样式的div里不需要dom操作,直接用双向绑定就拿到数据;使用动态样式 设置了…

全球大气二氧化碳浓度2°x2.5°栅格模拟数据集(1992-2020)

全球大气二氧化碳浓度2x2.5栅格模拟数据集(1992-2020) 全球大气二氧化碳浓度2x2.5栅格模拟数据集(1992-2020)是以2002-2012年全球对流层CO2浓度卫星遥感产品(AIRS,AIRx3C2M 005)为基础&#xff…

中国FinOps现状调查报告(2023)》亮点解读

今年以来,我们举办了多期FinOps的专题分享,邀请了美图、腾讯、B站、趣丸、知乎等厂商和行业专家,分享他们在FinOps领域的经验。我们也发现越来越多的人对FinOps产生了浓厚的兴趣,而且FinOps的成熟度也在逐渐提升。 降本增效&…

前端如何捕获网络问题导致的接口失败 net::ERR_NETWORK_IO_SUSPENDED

上传大文件时电脑休眠、页面静置导致接口报网络错误,上传失败 最近遇到了上传文件遇到网络波动、超时、网络中断情况下需要重传的需求刚开始排查只能在控制台看到报错net::ERR_NETWORK_IO_SUSPENDED,一头雾水。后加上catch捕获异常进行判断 fetch(/upl…

uniapp中uview组件库丰富的Slider 滑动选择器的使用方法

目录 #平台差异说明 #基本使用 #设置最大和最小值 #设置步进值 #禁用状态 #自定义按钮的内容和样式 #自定义滑动选择器整体的样式 #此页面源代码地址 #API #Props #Slider Events 该组件一般用于表单中,手动选择一个区间范围的场景。 说明 该组件在H5&…

如何制作可预约的上门维修服务小程序?

上门维修服务已经成为人们日常生活中不可或缺的一部分。为了满足这一需求,我们学习如何无经验自己制作上门维修服务小程序。 首先,打开乔拓云-门店系统的后台,可以看到有很多各行各业的模版。这些模版涵盖了各种行业,包括家电维修…

竞赛保研 基于机器视觉的行人口罩佩戴检测

简介 2020新冠爆发以来,疫情牵动着全国人民的心,一线医护工作者在最前线抗击疫情的同时,我们也可以看到很多科技行业和人工智能领域的从业者,也在贡献着他们的力量。近些天来,旷视、商汤、海康、百度都多家科技公司研…

Js的$如同 sed的 java的$0 指代matcher匹配到的内容的符号

Js的$&如同 sed的& java的$0 $& 可用于Js,Vscode,RJTextEd,editplus,notepad, 在 Vscode,RJTextEd,editplus,notepad,等的替换中, 启用正则, 就能使 $&生效, 比如 ($&)表示给匹配到的内容加上括号 $& 可用于Js的String的replace(和replaceAll( 的第二…

《软件方法(下)》8.2.4-8.2.5 类和属性的命名,审查类和属性(202401更新)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 8.2 建模步骤C-1 识别类和属性 8.2.4 类和属性的命名 8.2.4.2 关于DDD话语中的“通用语言” DDD(领域驱动设计)话语中有“通用语言(Ubiquitous L…

DBeaver配置达梦数据库连接

随着信创逐渐推广,达梦数据库也成为流行。下面展示如何使用dbeaver配置达梦数据库连接 1 驱动新建 菜单,数据库->驱动管理器 2 驱动信息填写 选择新建之后,弹出一个填写页面 需要填写的几个关键信息: 驱动名称:…

迈向更高质量的深度估计

题目: Towards High Quality Depoth Estimation 摘要 目前的深度估计从业人员大多follow the settings of specific backbone without thinking about why is that。本文将详细探索从数据(不同类型数据集加载、稳定性、预处理、数据生成)&a…

从工程和科学问题到实际解决方案——《Python应用数值方法——解决工程和科学问题》

内容简介 《Python应用数值方法——解决工程和科学问题》是为想要学习和应用数值方法来解决工程和科学问题的学生撰写的。书中提供了足够丰富的理论知识。如果读过本书的姊妹篇《工程与科学数值方法的MATLAB实现(第4版)》,就会发现过渡到Python程序是无缝的&#x…

PLC-RecorderV3通过复制粘贴,便捷地处理采集变量的技巧

如何快速、批量创建或者修改采集变量呢?从早期版本开始,PLC-Recorder就有了导入、导出的功能,可以通过.CSV格式进行批量操作。从V3版本开始,又增加了简单的复制粘贴功能来便捷地进行变量操作。下面描述一下操作过程: …

vue3 基础+进阶(三、项目篇:状态管理库、路由以及一些基本配置)

目录 第三章 状态管理库:Pinia 3.1 创建空Vue项目并安装Pinia 3.1.1 创建空Vue项目 3.1.2 安装Pinia以及持久化工具 3.2 使用pinia 3.1.1 使用案例 3.1.2 规范问题 3.1.3 简化:结构赋值 第四章 Vue3的Router路由理解(与vue2类比) …

威尔仕2023年的统计数据

威尔仕健身房更新了2023年的统计数据,大家可以猜一猜我是哪一个称号?虽然小伙伴们的健身时长各有不同,有时候在课程中我也会分享自己健身的案例,看似一个简单的增强环路,旁边会有很多的调节环路来限制增强环路的增长&a…

CMA认证和CNAS认可哪个更专业?如何获取CMA、CNAS软件测试报告?

企事业单位或个人在选择软件检测机构时,首先需要考虑的就是该检测机构有无资质认证,这将关系到获取的检测报告的专业性,那么检测行业的CMA认证和CNAS认可哪个更专业呢?软件企业又该如何获取CMA、CNAS软件测试报告? 一、CMA认证是什么?  …

电源管理芯片常见故障有哪些?如何处理这些故障?

电源管理芯片常见故障 电源管理芯片是电子设备的关键器件,负责电能的转换、配电、检测和其他电源管理。在使用过程中,电源芯片也会出现一些故障,常见的故障有: 1. 电源芯片损坏 长时间的使用可能会导致电源管理芯片损坏&#xff0…

Profinet转Modbus使设备互联更简单

在工业自动化领域,为了使设备互联更加简单,可以将Modbus和Profinet相互转换。这样一来,设备之间的互联就变得更加方便和高效。通过Modbus转Profinet网关(XD-MDPN100/200),设备之间的通信变得更加灵活和可靠…