如何实现网站文件动静分离

简介: 传统动静不分离的产品架构,随着访问量在增长,性能会成为瓶颈。在这种情况下,用户可以通过利用OSS和CDN对网站进行架构优化,做到网站文件的动静分离的,提升用户访问体验,实现成本可控。

背景

传统动静不分离的产品架构,随着访问量在增长,性能会成为瓶颈。以一个常见的Web站点为例。www.acar.com是一个刚建立汽车资讯车友交流网站,主站用Php搭建,有10GB的图片素材,部分JS文件。目前购买一台ECS放置所有程序代码,并在ECS上安装MySQL数据库。随着用户访问量的不断增长,不少用户反映,访问网站的速度越来越慢,图片加载慢,网站响应慢,同时网站技术人员也发现用户上传的图片越来越多,快超过1TB了。在这种情况下,用户可以通过利用OSS和CDN对网站进行架构优化,做到网站文件的动静分离的,提升用户访问体验,实现成本可控。

网站动静分离架构

5e7843355e32650ee2257fed83f5030041c68759

在该架构中,OSS作为海量文件存储源,静态图片、视频文件、下载包、App更新包等均放在OSS,同时OSS作为CDN的源站,通过CDN加速分发,用户通过CDN节点就近获得文件。

该架构优势十分明显:

  • 降低Web服务器负载,静态文件访问负载全部通过CDN;
  • 存储费用最低,OSS的存储费用仅为ECS磁盘费用的50%;
  • 海量存储空间,无需考虑存储架构升级;
  • 流量费用低,相比直接通过OSS访问,除极少额外增加的回源流量外,主要流量使用CDN流量,单价最低只需0.26GB,远远低于OSS直接访问的外网流量单价。

具体操作步骤

第一步:对ECS上的网站程序进行整理,把动态程序部分和静态部分分不同的目录管理起来:

  • 建立Images目录,放置所有网站高清素材图片;
  • 建立Javascript目录,放置所有的JS脚本;
  • 建立Attachment目录,放置所有用户上传的图片和附件。

第二步:进入到OSS控制台,点击“CDN加速OSS”。

fb33fff01d336f00d2b557e7b620d1a76fbf2497

  • 选择新建Bucket。根据你ECS所在的区域选择Bucket所在区域,权限选择“公共读”,Bucket名称与ECS上新建的目录的名称对应,比如”acar-image-bucket“,选择下一步;
  • 输入“image.acar.com”作为您网站高清素材图片的加速域名后,点击下一步;
  • 选择默认的自动添加阿里云解析,点击完成。

第三步:点击“立即上传文件,体验加速效果”。

  • 把您在第一步中建立在ECS上的Images目录下的所有图片文件上传到这里(acar-image-bucket下),您可以使用OSS客户端工具更加方便灵活的完成图片的上传(OSS客户端工具Windwos版本);
  • 点击列表中已经上传文件的“获取地址”,您就能获取到该文件的CDN加速的访问地址,通常为“您输入的加速域名+'/'+'文件名'”的格式;
  • 逐一完成图片文件的上传。

8a3fd0a5acc0cac4a556ed2972779032692526f7

3242e97446c1f8860acc6d20aa62b791d51bc516

06a46abdb1cc9152c46d98aeaf655abc5351f58f

第四步:按照前三步的示意,把其他两个文件也通过“CDN加速OSS”的方式上传,分别建立“acar-js-bucket”和"acar-csimages-bucket"两个使用CDN加速的OSSbucket。

第五步:在原本ECS系统中,找到原本访问静态文件的代码,把访问URL修改为加速访问的地址。

大功告成,以后用户访问您的网站的静态文件就全部通过OSS+CDN的方式访问,不再占用您ECS的资源。

需要注意的是,如果您想把用户上传的文件自动同步到“acar-csimages-bucket”中,您可以参考OSS相关SDK和API的PutObjcet部分,实现代码级别自动上传。

注意事项

  •  OSS是以Bucket为单位设置CDN加速,您最好为每个Bucket指定一个二级域名,方便管理;
  •  您可以通过OSS一键加速配置,静态文件的OSS和CDN的相关配置(CDN加速OSS点击这里);
  •  用户第一次访问静态资源,会先回源OSS获取资源再推送到CDN,需要大概5分钟左右的生效时间。您可以在更新资源后,通过刷新的方式,让CDN主动回源,让用户访问时不再等待。

相关资料

各区域的OSS访问地址

OSS客户端工具Windwos版本

客户端工具,支持文件夹上传,支持大文件自动分片多线程上传、支持批量删除、支持批量设置。

OSS客户端工具Mac版本

客户端工具,支持文件夹上传,支持大文件自动分片多线程上传、支持批量删除、支持批量设置。

CDN管理控制台

网页版本控制台,方便您进行管理设置和简单的文件管理。

 

相关文章
|
存储 Prometheus Cloud Native
Thanos 工作原理及组件简介
Thanos 工作原理及组件简介
|
存储 安全 对象存储
如何简单快速搭建自己的云对象存储服务(OSS)
简单来说,其实我们只需要有一台服务器,利用服务器的各种资源,搭配其它厂商开发的软件,就能很轻易拥有自己的云对象存储服务。不需要在阿里云上花钱买什么服务,甚至还能自己给别人提供服务,真的是太爽了。
|
7月前
|
人工智能 机器人 API
搭建全自动新闻推送 AI 机器人|OpenClaw阿里云/本地部署+API配置+联网+邮箱+定时全流程
2026年,信息爆炸已经成为所有人的痛点,尤其是AI、科技领域每天都有大量新动态,手动刷新闻既浪费时间又容易遗漏。借助OpenClaw(Clawdbot)这一开源智能体框架,我们可以轻松搭建一个**完全自动化的新闻推送机器人**:每天定时抓取指定领域新闻、自动总结核心内容、排版成美观格式,并准时发送到你的邮箱,实现“醒来即收早报”的自由。
1345 2
|
8月前
|
人工智能 算法 安全
AI应用软件的开发费用
2026年AI应用开发成本受功能复杂度、技术选型与团队构成影响。MVP版约15–40万元;自建团队月均10–15万;外包报价25–60万。大模型API成本下降,但ASR/TTS、合规备案(3–8万)、内容审核及持续运维成新支出重点。建议“核心自研+UI外包”,20万起跑内测。(239字)
|
Web App开发 数据安全/隐私保护 Python
万能ck提取登录软件,京东贴吧淘宝拼多多cookie提取工具,python框架分享
这个框架使用了Selenium进行浏览器自动化操作,包含了京东和淘宝的登录示例。代码展示了如
|
缓存 负载均衡 应用服务中间件
uWSGI的配置及使用
uWSGI是一个功能强大的Web服务器和应用服务器,主要用于实现Python Web应用与Web服务器之间的通信。它遵循WSGI(Web Server Gateway Interface)规范,作为桥梁连接Web服务器(如Nginx)与Python应用(如Django、Flask)。相比开发环境中的简易服务器(如Django的runserver或Flask的Werkzeug),uWSGI在生产环境中具备更强的并发处理能力和更多高级特性,例如负载均衡、缓存等。通过支持多种启动方式(命令行或配置文件)及丰富参数配置,uWSGI可灵活部署于实际项目中,满足高性能需求。
2145 4
|
8月前
|
人工智能 自然语言处理 安全
免费的BI产品推荐(2026年最新版)
2026年,瓴羊Quick BI成免费BI首选:永久免费基础版+30天高级试用;零代码操作,支持Excel/MySQL等多源接入;内置“智能小Q”AI助手,自然语言秒出图表与归因分析;国产安全合规,适配中小企、创业者及一线业务人员。让数据决策真正零门槛。
|
10月前
|
存储 缓存 前端开发
对象存储OSS入门到精通:数据存储最佳实践
本文系统讲解对象存储OSS从入门到精通的核心知识,涵盖Bucket、Object、存储类型、生命周期管理、安全权限、性能优化及实战方案,助您掌握高效、安全、低成本的数据存储最佳实践。
778 0
|
JavaScript 网络协议 前端开发
【Nodejs】WebSocket 全面解析+实战演练——(Nodejs实现简易聊天室)
【Nodejs】WebSocket 全面解析+实战演练——(Nodejs实现简易聊天室)
1232 0