您当前的位置:首页 > 电脑百科 > 程序开发 > 程序员

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

时间:2020-04-27 13:55:33  来源:  作者:

学习目标

1)了解分布式文件系统的概念及应用场景

2)理解fastDFS的工作原理

3)掌握fastDFS存取文件方法

4)基于SpringBoot+fastDSf+vue.js实现图片服务

1 什么是分布式文件系统

1.1 技术应用场景

传智播客拥有大量优质的视频教程,并且免费提供给用户去下载,文件太多如何高效存储?用户访问量大如何保证下载速度?今天讲解的分布式文件系统将解决这些问题。

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

1.2 什么是分布式文件系统

1.2.1什么是文件系统

引用"百度百科"中的描述:

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

总结:文件系统是负责管理和存储文件的系统软件,它是操作系统和硬件驱动之间的桥梁,操作系统通过文件系统提供的接口去存取文件,用户通过操作系统访问磁盘上的文件。如下图:

 

常见的文件系统:FAT16/FAT32、NTFS、HFS、UFS、APFS、XFS、Ext4等 。

思考:如果没有文件系统我们该怎么管理自己的文件?

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

1.2.2什么是分布式文件系统

引用"百度百科"中的描述:

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

为什么会有分布文件系统呢?

分布式文件系统是面对互联网的需求而产生,互联网时代对海量数据如何存储?靠简单的增加硬盘的个数已经满足不了我们的要求,因为硬盘传输速度有限但是数据在急剧增长,另外我们还要要做好数据备份、数据安全等。

采用分布式文件系统可以将多个地点的文件系统通过网络连接起来,组成一个文件系统网络,结点之间通过网络进行通信,一台文件系统的存储和传输能力有限,我们让文件在多台计算机上存储,通过多台计算共同传输。如下图:

 

好处:

1、一台计算机的文件系统处理能力扩充到多台计算机同时处理。

2、一台计算机挂了还有另外副本计算机提供数据。

3、每台计算机可以放在不同的地域,这样用户就可以就近访问,提高访问速度。

1.3 主流的分布式文件系统

1、NFS

 

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

 

1)在客户端上映射NFS服务器的驱动器。

2)客户端通过网络访问NFS服务器的硬盘完全透明。

 

 

2、GFS

1)GFS采用主从结构,一个GFS集群由一个master和大量的chunkserver组成。

 

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

 

2)master存储了数据文件的元数据,一个文件被分成了若干块存储在多个chunkserver中。

3)用户从master中获取数据元信息,从chunkserver存储数据。

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

3、HDSF

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

 

 

1)HDFS采用主从结构,一个HDFS集群由一个名称结点和若干数据结点组成。

名称结点存储数据的元信息,一个完整的数据文件分成若干块存储在数据结点。

2)客户端从名称结点获取数据的元信息及数据分块的信息,得到信息客户端即可从数据块来存取数据。

1.4分布式文件服务提供商

1)阿里的OSS

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

2)七牛云存储

3)百度云存储

2 什么是fastDFS

2.1 fastDSF介绍

FastDFS是用C语言编写的一款开源的分布式文件系统,它是由淘宝资深架构师余庆编写并开源。FastDFS专为互联网量身定制,充分考虑了冗余备份、负载均衡、线性扩容等机制,并注重高可用、高性能等指标,使用FastDFS很容易搭建一套高性能的文件服务器集群提供文件上传、下载等服务。

为什么要使用fastDFS呢?

上边介绍的NFS、GFS都是通用的分布式文件系统,通用的分布式文件系统的优点的是开发体验好,但是系统复杂性高、性能一般,而专用的分布式文件系统虽然开发体验性差,但是系统复杂性低并且性能高。fastDFS非常适合存储图片等那些小文件,fastDFS不对文件进行分块,所以它就没有分块合并的开销,fastDFS网络通信采用socket,通信速度很快。

2.2 fastDSF工作原理

2.2.1 fastDSF架构

FastDFS架构包括 Tracker server和Storageserver。客户端请求Tracker server进行文件上传、下载,通过Trackerserver调度最终由Storage server完成文件上传和下载。

如下图:

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

1)Tracker

Tracker Server作用是负载均衡和调度,通过Tracker server在文件上传时可以根据一些策略找到Storage server提供文件上传服务。可以将tracker称为追踪服务器或调度服务器。

FastDFS集群中的Tracker server可以有多台,Tracker server之间是相互平等关系同时提供服务,Tracker server不存在单点故障。客户端请求Tracker server采用轮询方式,如果请求的tracker无法提供服务则换另一个tracker。

2)Storage

Storage Server作用是文件存储,客户端上传的文件最终存储在Storage服务器上,Storage server没有实现自己的文件系统而是使用操作系统的文件系统来管理文件。可以将storage称为存储服务器。

Storage集群采用了分组存储方式。storage集群由一个或多个组构成,集群存储总容量为集群中所有组的存储容量之和。一个组由一台或多台存储服务器组成,组内的Storage server之间是平等关系,不同组的Storage server之间不会相互通信,同组内的Storage server之间会相互连接进行文件同步,从而保证同组内每个storage上的文件完全一致的。一个组的存储容量为该组内存储服务器容量最小的那个,由此可见组内存储服务器的软硬件配置最好是一致的。

采用分组存储方式的好处是灵活、可控性较强。比如上传文件时,可以由客户端直接指定上传到的组也可以由tracker进行调度选择。一个分组的存储服务器访问压力较大时,可以在该组增加存储服务器来扩充服务能力(纵向扩容)。当系统容量不足时,可以增加组来扩充存储容量(横向扩容)。

3)Storage状态收集

Storage server会连接集群中所有的Tracker server,定时向他们报告自己的状态,包括磁盘剩余空间、文件同步状况、文件上传下载次数等统计信息。

2.2.2文件上传流程

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

客户端上传文件后存储服务器将文件ID返回给客户端,此文件ID用于以后访问该文件的索引信息。文件索引信息包括:组名,虚拟磁盘路径,数据两级目录,文件名。

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

  • 组名:文件上传后所在的storage组名称,在文件上传成功后有storage服务器返回,需要客户端自行保存。
  • 虚拟磁盘路径:storage配置的虚拟路径,与磁盘选项store_path*对应。如果配置了store_path0则是M00,如果配置了store_path1则是M01,以此类推。
  • 数据两级目录:storage服务器在每个虚拟磁盘路径下创建的两级目录,用于存储数据文件。
  • 文件名:与文件上传时不同。是由存储服务器根据特定信息生成,文件名包含:源存储服务器IP地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。

2.2.3%20文件下载流程

 

tracker根据请求的文件路径即文件ID 来快速定义文件。

比如请求下边的文件:

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

1.通过组名tracker能够很快的定位到客户端需要访问的存储服务器组是group1,并选择合适的存储服务器提供客户端访问。

2.存储服务器根据"文件存储虚拟磁盘路径"和"数据文件两级目录"可以很快定位到文件所在目录,并根据文件名找到客户端需要访问的文件。

3 fastDFS入门

3.1fastDFS安装与配置

3.1.1fastDFS安装

tracker和storage使用相同的安装包,fastDFS的下载地址在github.com/hAppyfish100/FastDFS

本教程下载:FastDFS_v5.05.tar.gz

FastDFS是C语言开发,建议在linux上运行,本教程使用centos7作为安装环境。

安装细节请参考 "fastDFS安装教程.doc"。

3.1.2Tracker配置

fastDFS的配置文件目录 :/etc/fdfs

主要的配置文件:/etc/fdfs/tracker.conf (tracker配置文件 );storage.conf(storage配置文件)

 

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

tracker.conf配置内容如下:

端口:port=22122

tracker 基础目录:base_path=/home/fastdfs,tracker在运行时会向此目录存储storage的管理数据。

3.1.3storage配置

storage.conf配置 内容如下:

组名:group_name=group1

端口:port=23000

向tracker心跳间隔(秒):heart_beat_interval=30

storage基础目录:base_path=/home/fastdfs

磁盘存储目录:

store_path0=/home/fastdfs/fdfs_storage 此目录下存储上传的文件,在/home/fastdfs/fdfs_storage/data下

store_path1=...

...

有多个磁盘就定义多个store_path

上报tracker的地址:tracker_server=192.168.101.64:22122

如果有多个tracker则配置多个tracker,比如:

tracker_server=192.168.101.64:22122

tracker_server=192.168.101.65:22122

....

3.1.4启动停止

fastDFS启动/停止脚本目录:

fdfs_trackerd:tracker脚本,通过此脚本对 tracker进行启动和停止

/usr/bin/fdfs_trackerd /etc/fdfs/tracker.conf restart

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

fdfs_storaged:storage脚本,通过此脚本对 storage进行启动和停止

/usr/bin/fdfs_storaged /etc/fdfs/storage.conf restart

3.2 文件上传下载测试

3.2.1搭建环境

这里我们使用JAVAApi测试文件的上传。

java版本的fastdfs-client地址在:github.com/happyfish100/fastdfs-client-java,参考此工程编写测试用例。

1)创建maven工程

2)添加依赖

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

3) 配置 文件

在classpath:config下创建fastdfs-client.properties文件

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

3.2.2 文件上传

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

3.2.3 文件查询

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

 

3.2.4 文件下载

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

4 文件服务案例

4.1 目标

通过文件服务案例达到以下目标:

1、理解fastDFS在实际项目中的使用方法。

2、能够使用fastDSF实现图片服务器。

4.2需求分析

 

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

说明如下:

1、管理员在管理系统中上传图片到fastDFS文件系统。

1)管理员进入管理系统,点击上传图片,选择本地图片

2)选择本地图片后,进行上传,前端浏览器会通过http调用文件管理服务的文件上传接口进行上传

3)文件管理服务通过socket请求fastDFS文件系统的上传图片,最终图片保存在fastDFS文件系统中的storageserver中。

2、网友浏览免费视频的课程图片

1)网友输入www.itcast.cn进入视频下载页面

2)前端浏览器通过图片地址请求图片服务器代理(Nginx

3)图片服务器代理根据负载情况将图片浏览请求转发到一台storage server

4)storage server找到图片后通过nginx将图片响应给网友

4.3 功能开发

4.3.1 搭建fastDFS文件服务器

1)安装fastDFS tracker和storage略

2)在storage server上安装nginx

在storage server上安装nginx的目的是对外通过http访问storage server上的文件。

使用nginx的模块FastDFS-nginx-module,它的作用是通过http方式访问storage中的文件,当storage本机没有要找的文件时向源storage主机代理请求文件。

详细参见 fastDFS安装教程

3)在安装图片服务代理

图片服务代理的作用是负载均衡,根据storage server的负载情况将图片浏览请求均匀的转发到storage server上。

4.3.2 搭建文件管理服务

文件管理服务提供通过http方式上传文件,删除文件、查询文件的功能,管理员通过文件管理服务对文件服务器上的文件进行管理。

文件管理服务采用Spring Boot开发,文件管理服务通过与fastDFS交互最终将用户上传的文件存储到fastDFS上。

在fastDFS入门程序上继续开发:

1)创建模型

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 


程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

2)创建controller

 

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

3)创建application.yml

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

4)创建spring boot启动类

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

4.3.3 管理系统前端

管理员通过管理系统前端上传文件、查询文件、删除文件等操作。

管理系统前端与文件管理服务器通过http交互,这当前流行的前后端分离的架构。

管理系统前端采用当前浏览器的vue.js前端框架实现。

1、创建前端工程

使用webstorm创建前端工程

工程需要导入vue.js及element-ui

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

2、创建upload.html

该文件实现文件上传及预览

1)导入js及 css

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

2)创建vue实例

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

3)添加element-ui的文件上传组件

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

定义数据对象及方法 :

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 


程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

4)配置 nginx虚拟目录

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

5)测试

程序员必看:Spring Boot+Vue.js+FastDFS实现分布式图片服务器!

 

4.3.4 课程图片浏览

网友(学习者)输入www.itcast.cn网址进入免费视频下载页面,浏览器根据页面上的图片地址请求图片服务代理,由代理将请求转发到fastDFS storage server上,最终在浏览器看到图片。

上章节实现图片上传后已经实现图片的预览,本功能实现略。

5 总结 通过本次课程的学习您要达到以下目标:

1)了解分布式文件系统的概念及应用场景

分布式文件系统是通过网络将单机上的文件系统组成一个网络文件系统。

分布式文件系统主要应用在大型互联网项目中,实现图片存储、音视频存储等服务。

分布式文件系统的优点:可以快速扩容存储,提高文件访问速度。

2)理解fastDFS的工作原理

fastDFS由tracker和storage组成,它们都可以部署集群。

tracker负责调度,storage负责存储。

3)掌握fastDFS存取文件方法

客户端与fastDFS采用socket协议通信,可以采用官方提供的java版本的fastDSF-client快速开发。

4)能够动手搭建一个fastDSF文件服务器

 



Tags:程序员   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
我 2010 年开始在 Github 上开源自己的代码。在 push 代码之前我根本没想过为什么。只是因为我当时学了 git,而且我又觉得 Github 很方便,可以用来备份自己的代码。而后我就参...【详细内容】
2021-12-28  Tags: 程序员  点击:(2)  评论:(0)  加入收藏
JAVA开发工程师(北京)本科 3-5年经验 面议 (招1人)岗位职责:1.负责我行应用系统的设计,完成软件编码工作,负责管理代码设计规范等工作;2.根据应用需求分析说明书,评估需求研发的可行...【详细内容】
2021-12-27  Tags: 程序员  点击:(2)  评论:(0)  加入收藏
今天聊聊编程的本质。程序就是数据结构+控制+逻辑,程序员编程工作的本质是翻译,翻译机要来了,程序员怎么办?黑客帝国中的程序黑客帝国4就要上映了,不知道前三部你看懂了么?值得多...【详细内容】
2021-12-17  Tags: 程序员  点击:(9)  评论:(0)  加入收藏
什么是shellshell是c语言编写的程序,它在用户和操作系统之间架起了一座桥梁,用户可以通过这个桥梁访问操作系统内核服务。 它既是一种命令语言,同时也是一种程序设计语言,你可以...【详细内容】
2021-12-16  Tags: 程序员  点击:(18)  评论:(0)  加入收藏
我是一名程序员关注我们吧,我们会多多分享技术和资源。进来的朋友,可以多了解下青锋的产品,已开源多个产品的架构版本。Thymeleaf版(开源)1、采用技术: springboot、layui、Thymel...【详细内容】
2021-12-14  Tags: 程序员  点击:(21)  评论:(0)  加入收藏
梦醒之后,每个人对于这份职业的未来、互联网行业的未来,以及更重要的,自己的未来都有了更现实的判断 文 | 祝颖丽编辑 | 黄俊杰一个生于 1986 年的人,他所走过的前半生:从出生起,...【详细内容】
2021-12-03  Tags: 程序员  点击:(16)  评论:(0)  加入收藏
前些天在头条看到一个八二年的哥们,述说自己找工作屡次被拒的问题,在网上引起了广泛的讨论,这件事给我留下了很深的印象,因为这哥们和我同是程序员,都人到中年,上有老下有小。唯一...【详细内容】
2021-12-01  Tags: 程序员  点击:(20)  评论:(0)  加入收藏
很多读者都问过一个问题:程序员如何实现高速成长?之前也写过相关的文章,强调的主要是夯实计算机体系基础知识。 再说另一个诀窍:多看经典开源项目,这些项目大多是众多顶尖程序员...【详细内容】
2021-11-30  Tags: 程序员  点击:(15)  评论:(0)  加入收藏
序言:前段时间织梦因为版权的问题在网上闹得沸沸扬扬,也提醒了众多开发者选择cms上应该谨慎使用,今天给大家展示一款自己搭建的内容管理系统,不用担心版权的问题,而且非常容易维...【详细内容】
2021-11-30  Tags: 程序员  点击:(34)  评论:(0)  加入收藏
近日,一位45岁的网民在中国政府网留言求职,引发关注。该网民自称是一名软件开发人员,今年45岁,精通各种技术体系,“而我辞职回家半年后再回来寻找工作机会的时候,却发现连个面试...【详细内容】
2021-11-17  Tags: 程序员  点击:(42)  评论:(0)  加入收藏
▌简易百科推荐
我 2010 年开始在 Github 上开源自己的代码。在 push 代码之前我根本没想过为什么。只是因为我当时学了 git,而且我又觉得 Github 很方便,可以用来备份自己的代码。而后我就参...【详细内容】
2021-12-28  程序员的喵    Tags:Github   点击:(2)  评论:(0)  加入收藏
JAVA开发工程师(北京)本科 3-5年经验 面议 (招1人)岗位职责:1.负责我行应用系统的设计,完成软件编码工作,负责管理代码设计规范等工作;2.根据应用需求分析说明书,评估需求研发的可行...【详细内容】
2021-12-27  just do丶IT公众号    Tags:国企   点击:(2)  评论:(0)  加入收藏
今天聊聊编程的本质。程序就是数据结构+控制+逻辑,程序员编程工作的本质是翻译,翻译机要来了,程序员怎么办?黑客帝国中的程序黑客帝国4就要上映了,不知道前三部你看懂了么?值得多...【详细内容】
2021-12-17  博士聊IT    Tags:程序员   点击:(9)  评论:(0)  加入收藏
梦醒之后,每个人对于这份职业的未来、互联网行业的未来,以及更重要的,自己的未来都有了更现实的判断 文 | 祝颖丽编辑 | 黄俊杰一个生于 1986 年的人,他所走过的前半生:从出生起,...【详细内容】
2021-12-03    财经杂志  Tags:程序员   点击:(16)  评论:(0)  加入收藏
前些天在头条看到一个八二年的哥们,述说自己找工作屡次被拒的问题,在网上引起了广泛的讨论,这件事给我留下了很深的印象,因为这哥们和我同是程序员,都人到中年,上有老下有小。唯一...【详细内容】
2021-12-01  云南贤哥在深圳    Tags:程序员   点击:(20)  评论:(0)  加入收藏
很多读者都问过一个问题:程序员如何实现高速成长?之前也写过相关的文章,强调的主要是夯实计算机体系基础知识。 再说另一个诀窍:多看经典开源项目,这些项目大多是众多顶尖程序员...【详细内容】
2021-11-30  findyi    Tags:程序员   点击:(15)  评论:(0)  加入收藏
近日,一位45岁的网民在中国政府网留言求职,引发关注。该网民自称是一名软件开发人员,今年45岁,精通各种技术体系,“而我辞职回家半年后再回来寻找工作机会的时候,却发现连个面试...【详细内容】
2021-11-17  郭主任    Tags:程序员   点击:(42)  评论:(0)  加入收藏
即使在安全技术取得进步之后,网络犯罪仍在不断增加。据统计,网络犯罪每分钟给企业造成约 290 万美元的损失。主要是因为新技术不断涌现,难以维护安全。随着网络威胁的增加,网络...【详细内容】
2021-11-04  章大千    Tags:编程语言   点击:(40)  评论:(0)  加入收藏
北漂小伙李强(化名),在北京互联网大厂工作7年,月薪3万,离职回老家开摄影店,亏了200万。李强出生于山西一座名不经传的小城市,互联网专业大学毕业的他,没有听父母的劝言回到家乡考公...【详细内容】
2021-10-29  霸王课  今日头条  Tags:程序员   点击:(53)  评论:(0)  加入收藏
程序员是青春饭,这在国内似乎是公认的。所以很多公司不愿招大龄程序员,很多程序员也“知趣”地及早转型。有的做管理,有的做架构,我还见过改行卖保险的。总之,年龄大了不想敲代码...【详细内容】
2021-10-27  编程的艺术    Tags:   点击:(30)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条