如何搭建图床

郭顺发2023-06-282025-03-13

Q：为什么要使用图床呢？什么是图床？

A：写博客文章时，图片的上传和存放是一个问题，有的朋友可能会把图片放到和博客同一个仓库当中，使用相对路径来引用，这样后期维护起来会比较麻烦。还有的朋友会在不同的平台发布同一篇文章，这样一来每个平台都要上传图片，为了解决这些问题，比较推荐的做法是把图片统一上传到一个在线的第三方静态资源库中，我们把这个资源库称为图床，其返回一个图片的URL，使用markdown+图片url的方式写作文章，一次编写，到处使用~

Q：搭建图床的方式

A：推荐使用GitHub作为图床，特点是免费、稳定，有一个小缺点是国内访问速度慢，不过没关系，可以使用jsDelivr免费CDN加速。jsDelivr是国外的一家优秀的公共 CDN 服务提供商，该平台是首个「打通中国大陆与海外的免费CDN服务」，无须担心中国防火墙问题而影响使用。官网：http://www.jsdelivr.com/(opens new window),

B：Gitee+PicX。

B：OSS存储，特点是稳定、容量大，缺点就是存储付费+流量付费（大），可以使用ECS内网访问躲避流量费用。

Q：如何统一管理

A：使用域名进行解析。

方案一：GitHub + jsDelivr + PicGo

Evan’s blog

新建GitHub仓库，注意仓库要设置成公开。
参照官方文档生成一个token密钥。
在这里下载PicGo，安装完成后打开，图床设置 选 GitHub图床，并填写相应的信息
- 仓库名：前面新建的仓库，格式：<用户名>/<仓库名>
- 分支名：填写主分支master即可
- Token：前面生成的token密钥
- 存储路径：按你自己的需求填写
- 自定义域名：图片上传后，PicGo 会按照 自定义域名+上传的图片名 的方式生成访问链接，此处我们填写jsDelivr的CDN加速地址，格式：https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>

image-20210912132734188

方案二：OSS + ECS +PicGo

手里有一个准备好的OSS，一般购买的都是只是存储，而外网访问会产生流量，流量费用见下图。内网访问免费，可以使用ECS云服务器做代理转发。

image-20210912132509318

ECS云服务器使用nginx做转发。

server {
listen 80 default_server;
listen [::]:80 default_server;
server_name 47.**.**.43;
root /usr/share/nginx/html;

# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

location / {
proxy_pass https://bucketname.oss-cn-beijing-internal.aliyuncs.com;
proxy_set_header Host $host;
}
}

server_name：对外提供反向代理服务的IP，即ECS实例的外网地址。
proxy_pass

：填写跳转的域名。
- 当ECS实例与Bucket在同一地域时，填写目标Bucket的内网访问域名。访问域名介绍请参见OSS访问域名使用规则。
- 当ECS实例与Bucket不在同一地域时，填写目标Bucket的外网访问域名。
- 因OSS的安全设置，当使用默认域名通过浏览器访问OSS中的图片或网页文件时，会直接下载。所以，若您的用户需通过浏览器预览Bucket中的图片或网页文件，需为Bucket绑定自定义域名，并在此项中添加已绑定的域名。绑定自定义域名操作请参见绑定自定义域名。
proxy_set_header Host $host

：添加此项时，Nginx会在向OSS请求的时候，将host替换为ECS的访问地址。遇到以下情况时，您需要添加此项。
- 遇到签名错误问题。
- 如果您的域名已解析到ECS实例的外网上，且您的用户需要通过浏览器预览Bucket中的图片或网页文件。您可以将您的域名绑定到ECS实例代理的Bucket上，不配置CNAME。这种情况下，proxy_pass项可直接配置Bucket的内网或外网访问地址。绑定自定义域名操作请参见绑定自定义域名。