oss php sdk+laravel搭建图片处理静态网站

news/2024/5/14 1:44:04/文章来源:https://blog.csdn.net/qq_36510261/article/details/78676137

背景和目标

接着上两篇继续写oss php sdk+laravel搭建静态网站。 主要说下静态网站的重要部分图片服务,现在很多的网站上都会用到大量的图片, 图片在网页传输中占据很大的数据量, 图片处理也是影响网站性能的重要因素。
这篇文章主要结合oss的图片处理功能介绍如何利用oss + laravel搭建一个低成本高性能的静态服务器。

我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。

静态网站图片服务架构简单回顾

静态网站图片服务器架构可能经历了如下几个阶段:

  1. 网站初期可能我们业务和图片服务都在一台服务器, 图片访问也不多, 要访问的图片个数也有限, 我们可以把所有要用到的图片放到服务器某个images/目录下, 然后根据图片名来匹配就可以满足需求。
  2. 随着网站的发展, 图片服务和其他应用访问量和数据量也越来越大, 一个网站一台服务器早已满足不了需求,我们需要把图片服务拆分成单独的图片处理服务器甚至图片处理集群。
  3. 有了图片处理服务器或着图片处理集群, 我们可以为图片服务配置更高端的硬件,并为图片服务增加独立访问域名增加浏览器加载图片速度。这些都突破了IO瓶颈,大大提升了网站性能。
  4. 收之桑榆失之东隅,当图片服务是一个服务器集群时,我们再也不可能拥有原来那么简单的图片服务架构了。现在我们至少要考虑图片服务的负载均衡、数据同步、扩容、容灾和数据迁移。

总之, 性能和功能巨大提升的同时,系统复杂度也巨大的增加了。对中小型网站来说,受限于开发运维能力和成本,图片服务上云可能是个很不错的选择。

oss图片服务

很多中小网站后端使用php写的,图片处理的框架很可能是nginx+php+fastcgi+imagick, 使用imagick做图片处理,这种框架对少量的图片处理可以work,但大量图片下对服务器的IO、cpu、网络带宽都有很大压力。而使用oss的图片服务可以完全把这些压力剥离出去。
先看一个不使用和使用oss图片服务的静态网站框图的对比,然后我们再以laravel+oss php sdk做后端,写一个最简单的可以work的图片处理服务的demo。

oss图片服务版本的静态网站

framework

  1. 蓝色的路径为不使用oss图片服务的静态网站框架,用户的一个图片请求例如简单的把某张图片旋转90度并加水印后在浏览器展示,这样大量的请求会对静态网站的图片服务器带来IO和CPU的压力,同时会对路径6带宽带来压力。
  2. 而使用oss图片服务后服务器只需要向用户回复一个静态页面,静态页面中填入oss图片服务的url,然后由浏览器加载,即可完成上面的效果。因此,改进后的静态网站完全可以不需要图片服务器或服务集群,图片服务器完全可以由oss胜任,静态网站只需要保留普通业务服务器。

demo

我们通过一个demo来展示上面的说明,为了简单起见我们继续使用上两篇文章中搭建的oss php sdk+laravel+php-fpm+nginx的环境,不同的是向用户展示的图片不落本地服务器,对图片的旋转、模糊处理、打水印也全都不经过本地服务器。
同样,我们这里只说明过程先不考虑代码的异常分支,严谨的代码可以放到下篇文章中。
步骤如下:

  1. vim routes/web.php, 修改为:
    pic1
  2. 增加resources/views/gitshow.blade.php文件, 内容为:
    pic2

url : 'http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/rotate,90/blur,r_10,s_10/watermark,type_d3F5LXplbmhlaQ,size_30,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'
这实际上是一个oss相关的url。

3.浏览器访问http://www.test_laravel.com:8080/(环境问题可以翻看前面两篇文章)效果如下:

pic

就是这么简洁的几行代码。概括下上面的过程,静态网站的开发人员把所有需要的原图都存储在oss上,本地服务器只处理业务相关的逻辑。当用户需要访问图片时,服务器不需要返回给用户实际的图片内容,而只是把图片在oss上的存储的位置返给用户,浏览器拿到这个资源后,再访问oss加载图片,蓝色路径6完全不需要大的带宽,实际图片内容传输由oss保证。像上面的demo一样,图片业务不需要返回给用户处理后的图片内容,只需要把图片变换的参数加到url后面返回给用户, 例如旋转90度就在url后加[rotate,90], 这个url请求到oss后,oss会做相关的图片处理。这样本地"图片服务器"就彻底变成了对url的"拼写"操作, 所有图片变换oss都帮你自动完成。更丰富复杂的oss图片服务参考https://help.aliyun.com/document_detail/44686.html?spm=5176.doc48884.6.944.vbQcYs 
前面提到图片服务器要考虑的负载均衡、数据同步、扩容、容灾和数据迁移,这些对oss来说都不是问题或者直接有完整的云上解决方案。

总结

通过一个最简单的例子来介绍静态网站如果使用oss的图片服务,实际上oss现成的解决方案能满足你想到的大多数场景,例如权限管理、数据安全、web或者移动端直传、cdn加速,上云让你更关注核心业务本身。有兴趣参见https://help.aliyun.com/document_detail/31920.html?spm=5176.doc31920.6.626.mxhEwk

阅读原文

http://click.aliyun.com/m/35845/

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

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

相关文章

学习编程有疑问?七个网站助你菜鸟变大牛

很多同学在学习编程时候会遇到各种各样的问题,这些问题需要自己去想办法解决,那么这些网站平台将会给你很大的帮助。 1、W3school 这是一个免费学习编程语言的在线学习网站,里面的知识浅显易懂,非常适合初学者。如果你对编程还不…

前端学习的几个网站

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!1.菜鸟教程:http://www.runoob.c…

【云计算的1024种玩法】10分钟轻松设置出 A+ 评分的 HTTP/2 网站

前言 其实 HTTP/2 应该是 2015 年的老话题了(2015 年 5 月 14 日 HTTP/2 协议正式版的发布),但是 2018 年都到了很多网站依旧没有使用,作为新一代互联网协议,HTTP/2 不仅速度比目前常见的 HTTP/1.1 更快,而…

如何优化网站,网站推广优化一般流程

理论上针对不同类型的网站,优化网站的策略是不完全相对,但基于搜索引擎网站排名的原理,对于任何一个网站优化流程,都可以参考如下方法: 1、网站架构设计 在做网站信息架构的时候,我们并不单纯的只是简单的罗…

引路蜂Android技术网站开通了

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow之前在引路蜂技术博客我们花了大量的篇幅介绍了Android开发的相关…

【面试精选】关于大型网站系统架构你不得不懂的10个问题

该文已加入笔主的开源项目——JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目),地址:https://github.com/Snailclimb/JavaGuide 。觉得不错的话,记得点个Star。下面这些问题都是一线大厂的真实面试问题,不论是对你面试…

网站高并发及高并发架构详解

高并发是指在同一个时间点,有很多用户同时的访问URL地址,比如:淘宝的双11,双12,就会产生高并发,如贴吧的爆吧,就是恶意的高并发请求,也就是DDOS攻击,再屌丝点的说法就像玩撸啊撸被AD…

大型网站技术架构(二)架构模式

2019独角兽企业重金招聘Python工程师标准>>> 每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方案的核心。这样,你就能一次又一次地使用该方案而不必做重复工作。 所谓网站架构模式即为了解决大型网站面临的高并发访问、海量数据、高可靠…

大型网站技术架构(五)网站高可用架构

2019独角兽企业重金招聘Python工程师标准>>> 网站的可用性(Avaliability)描述网站可有效访问的特性。 1、网站可用性的度量与考核 网站不可用时间(故障时间)故障修复时间点-故障发现(报告)时间点…

大型网站技术架构(一)大型网站架构演化

2019独角兽企业重金招聘Python工程师标准>>> 看完了有一本书,就应该有所收获,有所总结,最近把《大型网站技术架构》一书给看完了,给人的印象实在深刻,再加上之前也搞过书本上讲的反向代理和负载均衡以及ses…

linux 查看机器硬件配置,在linux下如何查看机器硬件配置?_网站服务器运行维护...

在windows中用鼠标选定多个不连续文件的操作是什么_网站服务器运行维护在windows中用鼠标选定多个不连续文件的操作是:首先打开需要选定的文件;然后按住【Ctril】键不放,单击需要的文件;最后出现选中状态即可。在linux下如何查看机…

开源网站分析软件Piwik的数据库表结构

文章引用:【http://www.biaodianfu.com/piwik-database-schema.html】 Piwik是一套基于PhpMySQL技术构建,能够与Google Analytics相媲美的开源网站访问统计系统,前身是phpMyVisites。Piwik可以给你详细的统计信息,比如网页浏览人…

使用最新 solr4.10 快速开发团购网站等垂直搜索网站

说明: solr 是一个非常完善的开源项目,非常优秀,他不紧紧是做个索引这么简单,而是可以做成一个垂直的网站,比如团购网站,快速搭建页面。而且solr带了一个非常优秀的管理后台。可以查看管理,导入…

发现一个国外的学习网站

一个国外的学习网站 udacity.com 优达学成。 免费课程 https://cn.udacity.com/courses/all 全部的课程 里面有不少有意思的课程。 课程是英文的带中文翻译。 还有一个机器学习的课程,感觉好高大上啊。 总结 使用上有点不太方便。 本地化做的还不是很…

javascript ,从mozilla 官方网站学习语法,非常不错

本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/81153733 博主地址是:http://blog.csdn.net/freewebsys 1,关于mozilla 开发者 https://developer.mozilla.org/zh-CN/ 还有这么一个开发者中心呢,上面搜索写JavaScri…

pagespeed insights 上线了,可以通过web进行网站性能分析了

地址: https://developers.google.cn/speed/pagespeed/insights/ 分析下csdn网站: 功能挺多的,还不错。 可以进行参考,然后优化。提高访问速度。

中国大学MOOC(慕课) 一个不错的学习网站

https://www.icourse163.org/category/all 中国大学MOOC是由网易与高教社携手推出的在线教育平台,承接教育部国家精品开放课程任务,向大众提供中国知名高校的MOOC课程。在这里,每一个有意愿提升自己的人都可以免费获得更优质的高等教育。 央…

flutter(4):在linux 下安装flutter 环境,sdk,Android Studio ,从中文镜像网站下载,速度快,安装插件,调整bios使用x86镜像,写个hello world。

目录前言1,关于 flutter2,使用3,启动5,学习视频6,总结前言 相关arduino 全部分类: https://blog.csdn.net/freewebsys/category_8957746.html 本文的原文连接是: https://blog.csdn.net/freewebsys/articl…

图片切换onmouseover 事件

http://www.w3school.com.cn/htmldom/event_onmouseover.asp 定义和用法 onmouseover 时间会在鼠标指针移动到指定的对象上时发生。 语法 οnmοuseοver"SomeJavaScriptCode" 参数描述SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。支持该事件的 HTM…

kotlin学习(2):android开发股票APP开发。先上github交友网站进行搜索,参考相关开源项目。然后进行二次开发、修改,不从零进行项目开发。

目录前言1,关于股票APP2,使用下载代码运行3,总结前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/108718819 未经博主允许不得转载。 博主地址是:http://blog.csdn.net/freewebsys 1,关于…