当前位置: 首页 > article >正文

网站静态文件加速-Django项目静态文件存储到腾讯云COS存储提升网络请求速度

解决办法是通过在 Nginx 中把对 /static/ 路径的请求直接指向你的 COS 域名来实现让浏览器直接去拉取 COS 上的静态资源,而不再经过本地服务器。下面给出两种常见的做法,你可以任选其一:


方法一:使用 301/302 Redirect (让客户端直接跳转到 COS)

这样做的好处是浏览器会直接到 COS 域名去请求资源,减少了你这边服务器的流量和延迟。配置思路就是把所有 /static/... 的请求都重写(rewrite)到 COS 的真实 URL 上去。

server {listen 80;server_name 62.234.180.150;# 其他配置…# 这一段把 /static/ 下的所有请求都重定向到你 COS 上的静态目录location ^~ /static/ {# 正则捕获 /static/ 后面的部分(比如 chat/images/gongan.png)rewrite ^/static/(.*)$ https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/$1 redirect;# 如果想要永久 301,可以改成:# rewrite ^/static/(.*)$ https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/$1 permanent;}# 媒体文件(media)也可以同理location ^~ /media/ {rewrite ^/media/(.*)$ https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/media/$1 redirect;}# 主代理配置:其余请求转发到 Djangolocation / {proxy_pass http://127.0.0.1:8000;proxy_set_header Host $http_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;# WebSocket 支持(可选,看你是否用到 channels/ws)proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_read_timeout 86400s;proxy_send_timeout 86400s;proxy_connect_timeout 30s;proxy_buffering off;}# …其他配置
}
  • 解释

    1. location ^~ /static/ { … }:匹配所有以 /static/ 打头的请求。

    2. rewrite ^/static/(.*)$ https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/$1 redirect;

      • ^/static/(.*)$ 捕获 /static/ 后面的所有路径(比如 chat/images/gongan.png)。
      • 将其一一映射到 https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/$1 ,也就是 COS 上对应的路径。
      • redirect 表示返回 302 临时重定向;如果你希望客户端缓存(301 永久重定向),就把 redirect 改成 permanent 即可。
    3. 浏览器拿到 302/301 后就直接去请求 COS 上的 URL,从而节省了你本地服务器转发这一步骤,也能显著提升静态文件加载速度。

注意:采用此方案后,你需要保持 Django 端的 STATIC_URL = '/static/' 不变,让模板输出的 URL 依旧是 /static/...。Nginx 收到客户端对 /static/... 的请求,就会自动下发 301/302 给浏览器,让它去 COS 拉资源。


方法二:使用 proxy_pass (由 Nginx 反向代理到 COS,浏览器只请求你这台服务器)

如果你希望浏览器在地址栏里仍然是 https://你的域名/static/…,但实际内容由 Nginx 从 COS “取回”后再转给客户端,也可以用 proxy_pass。这种方式浏览器 “看” 不到真正的 COS 域名,所有流量还是走到你这台 Nginx,然后再到 COS。

server {listen 80;server_name 62.234.180.150;# 其他配置…# 代理 /static/ 到 COSlocation /static/ {# 下面这个 proxy_pass 的写法,能够把 /static/foo/bar.js# 对应到 https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/foo/bar.jsproxy_pass https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/;# 一般还要设置 Host,指向你 COS 的域名proxy_set_header Host pygrow-1307692287.cos.ap-chongqing.myqcloud.com;# 缓存头、CORS 等可酌情加expires 30d;add_header Cache-Control "public, max-age=2592000";add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, OPTIONS';# 如果需要 WebSocket 支持,通常不用在 static 里设置proxy_http_version 1.1;}# 媒体文件 同理location /media/ {proxy_pass https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/media/;proxy_set_header Host pygrow-1307692287.cos.ap-chongqing.myqcloud.com;expires 30d;add_header Cache-Control "public, max-age=2592000";add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, OPTIONS';proxy_http_version 1.1;}# 主代理,把其他请求转给 Djangolocation / {proxy_pass http://127.0.0.1:8000;proxy_set_header Host $http_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;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_read_timeout 86400s;proxy_send_timeout 86400s;proxy_connect_timeout 30s;proxy_buffering off;}# …其他配置
}
  • 解释

    1. location /static/:匹配到的请求仍然是以 /static/ 打头。

    2. proxy_pass https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/;

      • 注意最后要保留一个斜杠,这样 Nginx 会把 /static/ 后面的部分拼接到 /staticfiles/ 后面,举例:

        • 客户端请求 /static/chat/images/gongan.png
        • Nginx 会把它转发给 https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/chat/images/gongan.png
    3. proxy_set_header Host pygrow-1307692287.cos.ap-chongqing.myqcloud.com;

      • 让 Nginx 在向 COS 发起请求时,Host 头是你 COS 的桶域名,否则 COS 可能会拒绝访问或者返回 404。
    4. 其余的 expiresCache-ControlAccess-Control-Allow-Origin 都是为了强制客户端缓存、并允许跨域请求。


小结与建议

  1. 如果你希望“浏览器直接去 COS 拉”,减轻自己服务器负担,就用方法一(Redirect)

    • 优点:浏览器绕过你这台机器,直接和 COS 通信,节省带宽和 CPU。
    • 缺点:URL 从 /static/... 变成了 https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/...,地址栏里会发生跳转。
  2. 如果你希望“URL 看起来还是 /static/...,但是背后 Nginx 去取 COS 的内容”,用方法二(proxy_pass)

    • 优点:URL 对用户而言是一致的,也方便做统一日志/安全策略;对客户端透明。
    • 缺点:所有静态请求都要经过你这台服务器一次,带宽依然会消耗在你服务器和 COS 之间。
  3. 不要忘了同步修改 Django 侧

    • 保持 settings.py 里的

      STATIC_URL = '/static/'
      

      如果你改成 STATIC_URL = 'https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/',那么 Django 直接在模板里就会生成完整的 COS 链接,此时 Nginx 不再需要额外的 /static/ 转发配置——静态文件就完全由 COS 托管,但这样做的前提是你希望模板层直接暴露外网 Bucket 地址。

  4. 部署完成后,记得清理(或者暂时关闭)本地的静态文件服务,否则可能会跟 Nginx 的代理/重写冲突。也可以在 Nginx 里把原来指向本地 aliasroot 的部分删掉,只保留重写/代理到 COS 的配置。


配置示例(最终版)

假设你想要使用“让浏览器直接跳到 COS”方案,最终的 Nginx 段落可以像下面这样:

server {listen 80;server_name 62.234.180.150;# 1. 静态文件直接重定向到 COSlocation ^~ /static/ {rewrite ^/static/(.*)$ https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/$1 permanent;}# 2. 媒体文件(Media)同理location ^~ /media/ {rewrite ^/media/(.*)$ https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/media/$1 permanent;}# 3. 其余请求都转给 Djangolocation / {proxy_pass http://127.0.0.1:8000;proxy_set_header Host $http_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;# WebSocket(如果用到 channels)proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_read_timeout 86400s;proxy_send_timeout 86400s;proxy_connect_timeout 30s;proxy_buffering off;}# 日志等配置…access_log /www/wwwlogs/www_pygrow_cn.log;error_log  /www/wwwlogs/www_pygrow_cn.error.log;
}

这样一来:

  • 用户在浏览器里访问 https://62.234.180.150/static/chat/images/gongan.png
  • Nginx 立刻返回一个 301 到 https://pygrow-1307692287.cos.ap-chongqing.myqcloud.com/staticfiles/chat/images/gongan.png
  • 浏览器直接去 COS 上拉取图片,速度最快,也不占你本机带宽。

如果你更倾向于“URL 保持没变,但代理走 COS”,则把第 1、2 步改成前面示例的 proxy_pass 写法即可。


常见坑

  1. 不要同时存在两个 /static/ 匹配,否则 Nginx 会优先走第一个匹配到的。
  2. 如果你用的是 HTTPS(在前端做了反代 SSL),请把 proxy_pass 换成 https://... 并确认 SSL 证书链正确。
  3. 重定向到 COS 时,记得检查 COS 桶的权限(要保证对外是公开可读,否则会 403/404)。
  4. 如果你以后要让 COS 上的静态文件“版本化”或“带签名 URL”,可以在 rewrite 里拼带签名的参数。

总结

  • 最推荐的做法是 方法一(Redirect)。这样静态资源完全脱离你当前服务器,浏览器去 COS 拉最快;
  • 如果业务上有特殊需求一定要“URL 不改变”,再考虑 方法二 (proxy_pass)

按照上面示例修改好 Nginx,然后重载配置:

nginx -t && nginx -s reload

就能让 Django 端的 /static/... 直接对接到你在 COS 上的资源了。

相关文章:

网站静态文件加速-Django项目静态文件存储到腾讯云COS存储提升网络请求速度

解决办法是通过在 Nginx 中把对 /static/ 路径的请求直接指向你的 COS 域名来实现让浏览器直接去拉取 COS 上的静态资源,而不再经过本地服务器。下面给出两种常见的做法,你可以任选其一: 方法一:使用 301/302 Redirect &#xff0…...

开疆智能Ethernet/IP转Modbus网关连接西门子BW500积算仪配置案例

本案例是通过Ethernet转Modbus网关将皮带秤数据接入到罗克韦尔1769L32E型PLC中。 首先进行ABB PLC的设置 1, 运行 RSLogix 5000 程序加载Ethernet转Modbus网关的EDS 文件: 2,新建工程并添加PLC 3,New Module添加网关&#xff…...

【五子棋在线对战】三.数据管理模块实现

数据管理模块实现 1.数据库表的设计2.数据管理模块的封装和实现2.1 user_table() && ~user_table()2.2 insert() 注册时新增用户2.3 login() 登录验证,并返回详细的用户信息2.4 通过用户名获取用户信息 && 通过用户id获取用户信息2.5 win() &&a…...

【JMeter】后置处理器 - 提取器

文章目录 概览边界提取器正则提取器JSON提取器 概览 CSS/JQuery提取器;给网页使用JSON提取器:给JSON数据使用★边界提取器:给字符串使用★正则表达式提取器:更加高级的字符使用★Xpath提取器:给网页使用 边界提取器…...

JSON解析崩溃原因及解决方案

问题记录: /************************************************| * 描述: 将ID124执行NFC操作-JSON解析为结构体* 函数名: cJSON_ID124_to_struct* 参数[ I]: *json_string 待解析的指针* 参数[II]: *wireless_rxd 结构体指针* 返回: 成功返回0 失…...

OpenAI技术路线急转:从TypeScript到Rust的Codex CLI重构内幕

目录 前言:OpenAI的技术抉择引发业界思考 Codex CLI:OpenAI的终端AI编程利器 语言抉择的戏剧性反转:从TypeScript到Rust Rust重写的四大技术动因 1. 零依赖部署:消除环境配置痛点 2. 内存安全与沙箱隔离 3. 性能的全面碾压 …...

window下配置ssh免密登录服务器

window下配置ssh免密登录服务器 本地windows远程登录我的ssh服务器10.10.101.xx服务器,想要每次都免密登录这个服务器. 记录下教程,防止后期忘记,指导我实现这个过程。 教程 二、实践步骤:Windows 上配置 SSH 免密登录 2.1 确…...

nginx部署

配置阿里云yum源 安装如下编译工具 yum install -y gcc gcc-c autoconf automake make #安装使用nginx还得安装nginx所需的一些第三方系统库的支持,比如nginx的静态资源压缩功能所需的gzip lib库,nginx需要支持URL重写,所需的pcre库&…...

c语言超详细知识点总结 1500行手写源码 持续更新中ing 从25年5月到6月5日

想象一下,我们身处的数字世界,如同一座座宏伟的建筑。操作系统、编译器、数据库、嵌入式设备乃至绚丽的游戏引擎,它们都是这座大厦的重要组成部分。而C语言,正是构建这一切的坚固基石。自丹尼斯里奇于贝尔实验室孕育出这颗编程界的…...

线性规划饮食问题求解:FastAPI作为服务端+libhv作为客户端实现

之前在 Pyomo介绍-CSDN博客 中介绍过通过Pyomo求解线性规划问题,这里使用FastAPI作为服务端,开源网络库libhv作为客户端,求解饮食成本最小化问题。 服务端测试代码test_fastapi_pyomo_server.py如下: from fastapi import FastAP…...

笔记:算法题目中需要处理 int 某个位的三种方法:for、while、to_string

int n; cin >> n; 1. 使用for观察高位、低位、本位 for(int i 1; i < n; i * 10){ //i 1 当前位为个位&#xff0c; i 10 为十位&#xff0c;以此类推 high n / (i * 10)&#xff1b; //这是相对于 i 的高位&#xff0c;例如 i 为个位…...

前端验证下跨域问题(npm验证)

文章目录 一、背景二、效果展示三、代码展示3.1&#xff09;index.html3.2&#xff09;package.json3.3&#xff09; service.js3.4&#xff09;service2.js 四、使用说明4.1&#xff09;安装依赖4.2&#xff09;启动服务器4.3&#xff09;访问前端页面 五、跨域解决方案说明六…...

Postgresql字符串操作函数

目录 一、基础字符串操作 二、大小写转换 三、空白处理 四、子串提取 五、搜索与定位 六、字符串修改 七、填充与格式化 八、编码转换 九、正则表达式&#xff08;高级匹配&#xff09; 十、其他实用函数 使用技巧&#xff1a; 以下是 PostgreSQL 中最全面的常用字符…...

vue3-andsign 中实现实物电商列表的页面

这里自己做一个代码整理 做了一个实物电商 选品中心的页面 看里面有些效果挺好 这里记录一下 直接粘贴代码了 我自己能看懂 做了一个列表显示 骨架屏等 效果 使用了grid 布局 比媒体查询好使 <script setup lang"ts"> import { ref, onMounted, watch } fro…...

Linux Docker的简介

参考资料 30分钟Docker入门教程 ◀ 本篇博客所有图片皆来自于该视频截图阮一峰 - Docker 入门教程 目录 一. 环境配置时可能会遇到的问题二. 什么是Docker三. 虚拟机 与 Docker 的区别3.1 虚拟机3.2 Docker 四. Docker的基本架构五. Dockerfile 一. 环境配置时可能会遇到的问题…...

极昆仑智慧与数元灵科技达成战略合作

近日&#xff0c;北京极昆仑智慧科技有限公司与北京数元灵科技有限公司正式签署产品级融合战略合作协议&#xff0c;双方将围绕 "AIBI商业智能分析" " Hybrid RAG 大模型问答" 等核心大模型应用&#xff0c;实现技术架构与业务场景的深度集成&#xff0c;…...

如何写一篇基于Spring Boot + Vue + 微信小程序的软件的接口文档

如何写一篇基于Spring Boot Vue 微信小程序的软件的接口文档 下面是一个例子&#xff0c;仅供参考&#xff01; 基于Spring Boot Vue 微信小程序的博客系统接口文档 技术栈&#xff1a;Spring Boot 3.x Vue 3 Element Plus 微信小程序原生框架 文档版本&#xff1a;v1…...

上位机知识篇---网页端实现

一、网页端基础概念 网页的本质 网页是通过浏览器展示的超文本&#xff08;HTML&#xff09;内容&#xff0c;依赖 HTTP/HTTPS 协议 进行数据传输。组成要素&#xff1a; 结构层&#xff08;HTML&#xff09;&#xff1a;定义页面内容和语义&#xff08;如标题、段落、列表等&a…...

鼠标的拖动效果

1、变量的设置 let isDragging false; let startX; let startY&#xff1b; let endX; let endY; let box null;isDragging : 表示是否推拽startX、startY&#xff1a;表示起始坐标&#xff0c;相对于元素endX、endY&#xff1a;表示结束坐标&#xff0c;相对于元素box&…...

第四讲:类和对象(下)

1. 再探构造函数 • 之前我们实现构造函数时&#xff0c;初始化成员变量主要使⽤函数体内赋值&#xff0c;构造函数初始化还有⼀种⽅ 式&#xff0c;就是初始化列表&#xff0c;初始化列表的使⽤⽅式是以⼀个冒号开始&#xff0c;接着是⼀个以逗号分隔的数据成 员列表&#xff…...

C++ vector容器存储对象和存储指针的区别(vector对象、vector指针)(存储指针时推荐使用智能指针)

文章目录 **1. 内存管理**- **存储对象**&#xff1a;- **存储指针**&#xff1a; **2. 生命周期控制**- **存储对象**&#xff1a;- **存储指针**&#xff1a; **3. 性能差异**- **存储对象**&#xff1a;- **存储指针**&#xff1a; **4. 使用场景**- **选择存储对象的情况**…...

C#和C++在编译过程中的文件区分

1. .h是头文件&#xff08;Header File&#xff09; 用来 声明类、函数、常量等。 通常不包含实际实现&#xff0c;只是“定义接口” // 示例&#xff1a;math_utils.h#pragma once int add(int a, int b); //定义函数名2. .cpp是源文件&#xff08;Source File&…...

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Dad Jokes(冷笑话卡片)

&#x1f4c5; 我们继续 50 个小项目挑战&#xff01;—— DadJokes 组件 仓库地址&#xff1a;https://github.com/SunACong/50-vue-projects 项目预览地址&#xff1a;https://50-vue-projects.vercel.app/ 豆包翻译确实可以&#xff0c;冷笑话应该属于各类语言比较难理解的…...

Spring AOP执行原理源码解析

对【com.example.demo.TestAspect#aopTest】连接点增加了五个通知 在调用【com.example.demo.A#testAop()】&#xff08;用户自定义&#xff09;方法时&#xff0c;Cglib拦截器对其进行了拦截 可以看到执行顺序分别是环绕前置&#xff0c;前置&#xff0c;环绕后置&#xff0c;…...

基于FPGA的超声波显示水位距离,通过蓝牙传输水位数据到手机,同时支持RAM存储水位数据,读取数据。

基于FPGA的超声波显示水位距离 前言一、整体框架二、代码架构1.超声波测距模块2.蓝牙数据发送模块3.数码管数据切换模块4.数码管驱动模块6.串口驱动7.顶层模块8.RAM ip核 仿真相关截图 前言 随着工业化进程的加速和环境保护意识的提升&#xff0c;对水资源管理和水位监测的需求…...

使用swoole作为MQTT客户端并接收实现即时消息推送

环境准备 首先需要安装swoole 可以使用pecl进行安装 &#xff0c;如 pecl install swool, 注意加上版本号 或者使用构建好的docker镜像&#xff0c;这里使用构建好的 zacksleo/php:7.1-alpine-fpm-swoole 镜像 使用 compose 安装依赖库 composer require jesusslim/mqttcl…...

在Windows下利用LoongArch-toolchain交叉编译Qt

文章目录 0.交叉编译的必要性1.下载交叉编译工具链1.1.直接在Windows下使用mingw&#xff08;不使用虚拟机&#xff09;编译&#xff08;还没成功&#xff0c;无法编译&#xff09;1.2.在虚拟机中的Ubuntu中进行交叉编译 2.下载qt源码3.编译Qt3.1.创建loongarch64的mkspec3.2.创…...

如何在 React 中监听 div 的滚动事件

在 React 中监听 div 的滚动事件&#xff08;scroll&#xff09;&#xff0c;可以通过为该 div 添加 onScroll 属性来实现。以下是一个基本的例子&#xff1a; ✅ 示例&#xff1a;监听 div 的滚动事件 import React, { useRef } from react;function ScrollComponent() {cons…...

AIRIOT无人机安防解决方案

随着无人机技术的飞速发展和广泛应用&#xff0c;其在安防领域的价值日益凸显&#xff0c;从关键设施巡检、大型活动安保到边境巡防、应急救援&#xff0c;无人机正成为立体化安防体系不可或缺的“空中哨兵”。然而&#xff0c;无人机安防应用蓬勃发展的同时&#xff0c;其自身…...

华为OD机考 - 水仙花数 Ⅰ(2025B卷 100分)

import java.util.*; public static Integer get(int count,int c){if(count<3||count>7){return -1;}//存储每位数的最高位……最低位int[] arr new int[count];List<Integer> res new ArrayList<>();for(int i(int) Math.pow(10,count-1);i<(int) Math…...