作者:Mintimate
Mintimate's Blog,只为与你分享
图床??
有些人可能对图床这个没什么概念,所谓图床,英文叫法应该叫:ImageHost,也就是储存图片的中枢,可以理解为:用户存储图片后,系统提供改图片的直接链接,用来通过网络访问显示该图片。
使用图床,更好地管理图片,方便打包备份图片;配合CDN,还能更好优化网站加载。
使用场景??
Markdown、HTML就是很好的图床使用场景点:Markdown和HTML插入图片,使用标记展示一个图片:
# Markdown ![图片描述](图片地址) # HTML <img src="图片地址"/>
其中,图片地址
可以使用图片的绝对或者相对路径,比如:
/img/Mintimate_Logo.png
:到网站根目录下img文件夹找Mintimate_Logo.png图片来展示。../Mintimate_logo.png
:到上级目录找Mintimate_Logo.png图片来展示。
而在一些网站上进行操作,没有明确绝对路径和相对路径时,就需要用到网络地址图片这个时候就可以用图床提供的直接链接,比如:评论回复
当然,更多用与文本创作。比如我在写这篇文章时,就用到腾讯云的图床:
实现思路??
图床的实现很简单,归根结底,就是上次图片到服务器,服务器提供图片链接地址,一般会使用:
- OSS(对象存储):存储图片,并提供公开图片地址。
- CDN(内容分发网络):加速绑定图床的域名,使OSS里的图片加载更快、更安全。
来实现图床功能。
但是,考虑到成本和后期便于管理,我们使用:
- Lighthouse(轻量应用服务器):服务器存储图片,相对于OSS存储,用服务器存储可以存储文件地址结构(如:IMG/banner/Logo.png)。
- CDN(内容分发网络):加速绑定图床的域名,同时防止Lighthouse真实地址暴露,避免被DDOS攻击。
所以,大题上我们搭建的图床过程:
Lighthouse上细节实现:
- 部署Git:在服务器上部署Git,用于快速上传本地图片到服务器;同时避免操作失误时,可以回滚操作,图片数据丢失。
- 部署Nginx:在服务器上部署Nginx,用于使服务器变为Web网站,提供图片的直链。
准备工具??
轻量应用服务器(Lighthouse)
首先,我们需要一台轻量应用服务器;因为要配合CDN,所以带宽无所谓。建议购买优惠产品:
建议使用Linux系统服务器,这次我使用Debian发行版本Linux来演示:
内容分发网络(CDN)
内容分发网络,需要备案域名。如果你没有域名或者域名没有备案,可以参考:
域名备案挺简单的,大概7-14天可以备案完成。具体可以参考备案文档。
之后需要内容分发:腾讯云内容分发网络
搭建Nginx
首先,我们需要SSH连接服务器,之后为了方便,我们使用宝塔快速搭建Nginx,使用我们先安装一下宝塔:
之后,复制到SSH控制台:
之后,安装好宝塔后,进入宝塔面板内,到软件商店
内下载:
这样Nginx就已经安装好了。
设置图床网站??
我们需要通过Nginx设置一个网站,用来展示我们的图片,因为我们刚刚已经通过宝塔安装Nginx,所以在这再设置一个网站:
我们这里设置的图床网站地址为:/www/wwwroot/imagehost.flyinbug.cn
:
现在,我们先放一下。先去配置Git。
配置Git
因为我们采用本地文件,同步至服务器Git仓库的方式,来上传图片的,所以服务器需要安装Git。
安装Git
首先,我们要安装Git,在SSH内输入:
# Ubuntu/Debian sudo apt-get install git # Centos sudo yum install git
因为,我是Debian发行版本Linux。所以使用sudo apt-get install git
来安装Git:
我以前安装过,所以并没有很多细节日志,小伙伴们第一次安装Git,输出的日志应该会比我多。
创建Git用户
首先,我们看看我们事先有没有创建Git用户,输入命令:
cat /etc/passwd|grep -v nologin|grep -v halt|grep -v shutdown|awk -F":" '{ print $1"|"$3"|"$4 }'|more
我们创建git
用户:
sudo adduser git
按提示设置密码和信息即可创建完成:
之后,我们到/home
目录下,即可看到新添加的git用户:
到此,配置Git已经完成。感兴趣的可以:
- 设置git用户不允许Shell登录
- 设置authorized_keys
创建图床仓库
切换用户
为了避免权限问题,我们切换为刚刚创建的git用户:
# 切换为git用户 sudo su git
创建仓库
进入git用户家目录内(/home/git
),创建一个mySource
文件夹,里面用来存git仓库:
# 切换环境为/home/git内 cd ~ # 创建mySource文件夹 mkdir mySource
之后,我们进入mySource
文件夹,并初始化一个叫imagehost.git
的git仓库:
cd mySource # 初始化叫imagehost.git的仓库 sudo git init --bare imagehost.git
之后会多一个项目文件夹:
进入项目文件夹查看初始化的内容:
这个时候,我们图床仓库
就创建好了。
设置hooks
我们设置一下hooks,用于每次本地仓库推送到云端时,自动用最新版本图床图片覆盖至Nginx网站下。我们刚刚Nginx创建的图床网站地址:/www/wwwroot/imagehost.flyinbug.cn
,所以:
# (当前在项目文件夹内)进入hooks文件夹内 cd hooks # 创建并编辑钩子 vim post-receive
其中:
--work-tree
:填Nginx网站地址。--git-dir
:填图床仓库地址。
之后提取按,赋予执行权:
chmod +x post-receive
本地同步仓库
刚刚我们已经创建了图床仓库
,本地也需要安装Git。这里不再赘述。在安装好后,以下方法二选一:
- 在
powershell
或terminal
内同步仓库到本地。 - 使用GitHub Desktop进行可视化同步仓库到本地。
本文演示在Terminal上操作:
git clone git@server-IP:/home/mySource/imagehost.git
其中,server-IP
为你服务器的IP或域名:
之后,本地就出现这个仓库了:
使用图床??
之后,我们对本地仓库加入图片:
之后,我们在终端内操作:
服务器:
chmod 777 /www/wwwroot/imagehost.flyinbug.cn
本地:
# 添加所有文件 git add # 创建commit git commit -m "init". # 推送到服务器主分支 git push origin HEAD
这个时候,我们的服务器上Nginx文件夹内就有文件(图片)了:
如果你域名直接解析到服务器IP,就可以直接用域名看到图片了:
但是,这样很危险??:
- 容易暴露服务器IP
- 加载缓慢
所以,我们需要套上CDN加速。
启动CDN加速??
我们进入CDN控制台,选择域名管理-添加域名
:
之后,填写信息:
即可开启CDN,并可以在CDN控制台看到效果:
检测一下域名对应IP,可以看到是CDN节点服务器IP,而不是我们轻量应用服务器的IP:
注意??:
- CDN可能会有延迟,最长需要72小时才可以全球缓存刷新
- 注意配置图片防盗链,避免流量被恶意脚本消耗殆尽
总结??
使用CDN配合服务器Git操作,搭建的小型化图床。适合个人或者小型团队使用。同时,利用Git,方便进行备份和回档。
但是一定要注意设置CDN域名的防盗链和IP响应限制。搭建有什么不清楚,可以文章下留言嗷~