作者：Mintimate

博客：https://www.mintimate.cn

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，所以带宽无所谓。建议购买优惠产品：

• 腾讯云秒杀活动
• 学生用户0.6折买轻量应用服务器

建议使用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响应限制。搭建有什么不清楚，可以文章下留言嗷～