Skip to main content

使用Cloudflare R2/Vercel建立图床管理网站

· 5 min read
beta
beta
Beta is a story man

Overall​

我使用Markdown格式的文件记录日常，常常向Markdown文件中插入图片。由于Markdown记录的图片链接是存储在本地的==相对链接==，导出/复制Markdown文件时，离开本机环境后，往往会出现无法加载图片的问题。这时就需要在Markdown中引用图片的==绝对链接==，确保文档导出后图片可以正常加载。 Cloudflare R2是一个Cloudflare兼容兼容Amazon S3 API协议的对象存储服务。根据Cloudflare的政策，在一定用量内，R2可以免费使用。我将在Vercel托管一个图床管理网站，用于管理R2中存储的图片，这样可以直接在Markdown文件中插入已保存在图床的图片==绝对链接==。

How to​

前置条件​

  • Cloudflare账号
  • 至少1个在Cloudflare管理的域名
  • GitHub账号
  • Vercel账号（关联Github账号）

1. 建立R2 bucket​

Cloudflare R2 登录cloudflare dash，在左侧导航找到“R2 Object storage”，然后点击“Create bucket”，填入Bucket Name，选择Location和default storage class。这次创建的图床应用，所以Bucket name是pics，Location和storage classs我选择的是默认设置。 Create Bucket 创建好bucket后，点击==pics==，然后进入settings页面。为了便于图床的访问，请为bucket指派一个自定义域名（costom domain）。

2. 创建API token​

创建好bucket后，在“create bucket”按钮的左侧，有"API🔽"入口，点击“manage API tokens“，进入R2 API设置界面。然后点击“Create API token”：

  • 设置Token name，我这里设置为“R2 pics token”；
  • Permissions选择“object read & write”；
  • specify bucket(s)选择“Apply to specific buckets only”，选中刚刚建立的bucket：pics；
  • “TTL”和“Client IP Address Filtering”默认。 信息填写好，点击“Create API Token”按钮，会弹出创建成功界面，保存好“Access Key Id”和“Secret Access Key”；

3. 部署至Vercel​

打开Github仓库：Github s3-image-port，点击Deploy，自动跳转至Vercel进入部署过程，部署过程会自动将Fork上面的仓库到您自己的Github仓库。 部署成功后，为解决Vercel无法在国内访问的问题，需要为新部署的网站配置自定义域名。完成后，点击自定义域名后，可正常访问。

4. 图床网站设置​

访问我们刚刚在Vercel部署的网站，进入Settings-->S3 settings, 具体设置如下

  • Endpoint find at API token，注意链接不带bucket name。
  • Bucket name pics
  • Region WNAM，来自R2 settings-->location, 填写4位缩写。
  • Access Key ID copy after API token created
  • Secret Access ID copy after API token created
  • Public URL: 示例https://pics.workapp.uk

5. 使用图床​

图床网站UI 图床管理网站分为3个部分，upload，gallery和setting，分别对应上传照片，管理照片和设置。

  • Upload/上传照片 照片上传成功后，可以复制照片链接，格式有http链接和markdown链接
  • Gallery/管理照片 在这里可以找到之前上传的图片，也可以删除图片。
  • Setting/设置 Profiles-->保存后，可以将setting参数保存在粘贴板，建议将参数粘贴到私有笔记中。后面在其它终端可以复制导入该配置。
{

  "s3": {

    "endpoint": "https://thisisasample.r2.cloudflarestorage.com/",

    "bucket": "pics",

    "accKeyId": "thisisasample",

    "secretAccKey": "thisisasample",

    "region": "WNAM",

    "pubUrl": "https://pics.workapp.uk",

    "forcePathStyle": true

  },

  "app": {

    "enableAutoRefresh": true,

    "enableFuzzySearch": true,

    "fuzzySearchThreshold": 0.6,

    "convertType": "none",

    "compressionMaxSize": 1,

    "compressionMaxWidthOrHeight": "",

    "keyTemplate": "",

    "noLongerShowRootPage": true

  }

}

References​