之前看到有人推荐了cloudpaste这个项目,主要作用是能够提供简单的文本及文件分享服务,前后端部分使用GitHub Action+Cloudflare Worker,存储桶部分使用Cloudflare R2等免费服务,即可实现免费使用。除了在国内因为众所周知的原因Worker域名无法访问,需要自行配置域名。
前后端配置基本可以直接参照项目内文档:
GitHub 仓库fork和后端配置
受限要将仓库fork下来,然后为fork的仓库添加变量,具体路径为仓库的Settings-Secrets and variables-Actions-New repository secrets
。添加的secrets为:
- CLOUDFLARE_API_TOKEN
- CLOUDFLARE_ACCOUNT_ID
- ENCRYPTION_SECRET
前面两个参数在后面获取到,后面的ENCRYPTION_SECRET可以选填,如果没有会自动生成。
CloudFlare TOKEN配置
登录CloudFlare后访问API令牌管理界面,创建一个新的API令牌,模版选择"Cloudflare Workers",并编辑内容添加D1数据库编辑权限,记录下TOKEN,即为后面要用到的CLOUDFLARE_API_TOKEN
。
CLOUDFLARE_ACCOUNT_ID
位于Cloudflare主界面的右侧。
开通D1和R2,并配置Pages
D1位于左侧的存储和数据库下,的D1 SQL数据库;R2位于左侧的R2对象存储。两者都是需要点进去开通即可,其他不需要动。 D1和R2都有免费额度,可以大胆使用。
GitHub 配置Actions前端自动部署
返回到GitHub仓库页,找到Actions,运行deploy-front-cloudflare.yml
这个工作流,初次运行会进行D1数据库和Pages的创建。
配置CloudFlare Workers
Pages现在已经移动到计算(Workers)
下,找到Workers和Pages
,此时应该会看到刚才工作流创建的Pages,我的前端名称是cloudpaste-frontend
,后端为cloudpaste-backend
。
先配置cloudpaste-backend
,在项目内的设置-变量和机密
,添加一个文本类型的变量,变量名是ENCRYPTION_SECRET
,值即之前我们自己填的或者自动生成的。然后要配置域和路由
,添加一个自定义域,这里最好设置一个自己的域名(例如https://backend.tama.guru),因为默认分配的workers.dev这个域名无法直接访问,使用部分功能时会受限。
然后到配置cloudpaste-frontend
这边,也是进到设置
,找到变量和机密
,添加一个文本类型的变量,变量名是VITE_BACKEND_URL
,对应的值是刚才在cloudpaste-backend
中的workers.dev
域名或自定义的域名,注意填写末尾不带"/"。同样的,还需要在cloudpaste-frontend
的自定义域配置一个自己的域名(例如https://frontend.tama.guru),并配置好解析。
重新运行前端工作流
返回到GitHub仓库页,找到Actions,再次运行deploy-front-cloudflare.yml
这个工作流。运行完成之后之前的配置才回生效,此时可以通过https://frontend.tama.guru访问前端,而对应的后端则是https://backend.tama.guru。
完成初步配置工作
访问前端地址登录后台,默认的管理员信息是:用户名: admin, 密码: admin123,登录后请马上修改。
挂载S3存储
完成以上工作后仅能实现文本分享和编辑的功能,如果需要实现文件分享还需要配置S3存储,目前建议使用的包括R2、B2、七牛云三个,三个都有免费额度,且经过一段时间的试用相关功能都是正常的。
挂载R2存储桶
打开CloudFlare R2对象存储页面,新建一个存储桶,比如我命名为cloudpaste-r2
,并添加一个API令牌。令牌权限为读和写,制定存储桶为cloudpaste-r2
,其他不用动,保存并记录API令牌,然后点进cloudpaste-r2
存储桶,在设置下找到CORS策略
,点击编辑,内容为:
[
{
"AllowedOrigins": ["http://localhost:3000", "https://根据自己的前端域名来替代,比如我的https://frontend.tama.guru"],
"AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
"AllowedHeaders": ["*"],
"ExposeHeaders": ["ETag"],
"MaxAgeSeconds": 3600
}
]
然后回到前端页面的后台,在S3存储配置下添加一个新配置,配置名称
任意,为了区分我起名和r2存储桶一样的名字cloudpaste-r2
,提供商
为Cloudflare R2
,存储桶名称
即cloudpaste-r2
,存储容量
最好就保留10G,好像就免费10G?端点URL
按要求的格式填写https://<accountid>.r2.cloudflarestorage.com
,accountid
在cloudflare页面下可以找到,也就是前面所说的CLOUDFLARE_ACCOUNT_ID
。区域
根据建桶时所选的位置,我选的亚太,这里就填apac,默认填auto也可以。访问密钥 ID
和秘密访问密钥
即上面申请到的API令牌信息
,其他可以保持默认不变,保存即可。此时点击测试连接
,应该会提示:
配置完全可用
✓ 读权限正常 ✓ 写权限正常 ✓ CORS 配置正确 ✓ 前端上传模拟成功
如果没有配置CORS,这里会提示CORS配置不正确,上传文件时也会报错。
最后到挂载管理
处,选择新建挂载点
,挂载点名称
也是任意的,为保持一致我使用cloudpaste-r2
,存储类型
为S3存储,S3存储配置
选择刚才创建的cloudpaste-r2(Cloudflare R2)
,挂载路径
我填写的是/r2
,根据个人情况填写即可,最后勾选启用状态
,选择创建即可。 此时在文件上传页面和挂载浏览页面都可以看到这个r2
挂载点了,可以尝试上传文件,如果提示大小超限需要到后台的系统设置
中调整最大上传文件大小
,并更新设置,该选项默认为100MB。
挂载七牛云对象存储kodo
我以七牛云作为兼容S3标准的代表,在七牛云的对象存储中选择空间管理-新建空间,存储空间名称和R2中存储桶名称意义一致,我填写的是cloudpaste-qiniu
,存储区域选择国外任意地点(选择国内需要实名),我选择北美-洛杉矶,访问控制选择为私有。还需要配置CORS规则,点进cloudpaste-qiniu
这个桶的空间设置
,跨域设置
内新增规则
,来源
填写我们的前端域名https://frontend.tama.guru
,允许 Methods
我全勾选了,然后保存。
七牛云并没有针对存储桶有单独的API密钥,需要到个人中心
中的密钥管理
,打开密钥访问权限
,并新增一组AccessKey/SecretKey,保存好这组AK和SK。
回到网站后台,操作和前面一样,只不过提供商类型要选择其他S3兼容服务,端点URL为:http://存储空间名称.s3.存储区域名称.qiniucs.com
,根据上述配置我这里对应的是http://cloudpaste-qiniu.s3.us-north-1.qiniucs.com
,访问密钥即前面的AK,秘密访问密钥即SK,保存即可,其他参照R2的添加步骤即可。
需要注意的是,七牛云的免费套餐只支持http。