CDN CloudFlare 接入 OCI 对象存储

在当今数字化时代，网站性能和可用性是业务成功的关键。为了提供快速且可靠的访问体验，许多组织正在寻找有效的内容分发网络（CDN）解决方案。CloudFlare作为业界领先的CDN提供商，其强大的全球网络基础设施能够加速网站内容传输，降低延迟，提高安全性。与此同时，Oracle Cloud Infrastructure（OCI）的对象存储服务为用户提供了可扩展的、安全的云存储解决方案。

本文将介绍如何将CDN CloudFlare与OCI对象存储集成，以进一步优化网站性能和可用性。我们将讨论集成的步骤，以及这种集成如何帮助您的网站提供更快速、更可靠的内容交付服务。

1 OCI 中创建对象存储

1.1 创建对象存储(示例中为默认配置)

1.2 CDN 接入对象存储访问类型

CDN 厂商接入的两种方式：

在普通访问模式下，OCI 对象存储需要配置为公共访问类型才能被CDN访问，默认创建的对象存储是私有的
在私有模式下，配置 Pre-Authenticated 的访问方式，允许 CDN 接入 OCI 对象存储

修改为公共访问，允许其他CDN厂商链接

2 OCI对象存储上传测试图片

在对象存储页面中点击 upload，进行文件的上传

上传文件

3 配置cloudflare 加入 OCI 对象存储

3.1 登录已注册站点

cloudflare增加别名
配置workers路由规则
配置缓存规则
为站点添加路由规则

3.2 配置DNS CNAME 解析到 OCI 对象存储

法兰克福 endpoint ： objectstorage.eu-frankfurt-1.oraclecloud.com

其他参考region参考：Oracle Cloud Infrastructure API Reference and Endpoints

3.3 添加 Workers 服务

选用HTTP处理程序

3.4 编写处理请求服务代码

addEventListener('fetch', event => {event.respondWith(handleRequest(event.request))
})async function handleRequest(request) {const url = new URL(request.url)// url.host = 'YOUR_OBJECT_STORAGE_BUCKET_ENDPOINT' // OCI 对象存储 endpointurl.host = 'objectstorage.eu-frankfurt-1.oraclecloud.com'  // 使用法兰克福节点const newRequest = new Request(url, request)return fetch(newRequest)
}

3.5 配置站点缓存页面规则

示例中规则是对s3.xxx-xxx.com域名下的所有内容进行缓存

3.6 配置站点的路由规则

配置当前CDN域名到指定的路由规则

4 通过CDN域名访问对象存储

格式：
https://<域名>/n/<namespace>/b/<bucket>/o/<文件名>示例 - 普通模式：
https://s3.xxx-xxx.com/n/<对象存储namespace>/b/bucket-20230418-1654/o/achicken.jpg示例 - Pre-Authenticated模式：
https://s3.xxx-xxx.com/p/b5B0q4auDc_g8u-Bk9taoLGZox94GsUfAnz-CSe9dCKRxAW8H5IkpRWoDRlSOUze/n/<对象存储namespace>/b/bucket-20230419-1036/o/chicken.jpg

5 通过 CloudFlare worker 替换 content-type 类型

5.1 背景

通过 SDK ( upload_obj ) 上传至对象存储的文件，如果不指定 content-type 默认会被指定为 octet-stream；目前已知此 content-type 类型会导致前端矢量图(.svg后缀)的展示失效，并且 oci 对象存储不支持自适应。

5.2 解决方式

客户目前正在使用cloudFlare进行缓存，通过 CloudFlare worker 实现对 svg 后缀文件的 content-type 进行替换，统一替换为image/svg+xml。

5.3 替换

addEventListener('fetch', event => {event.respondWith(handleRequest(event.request))
})async function handleRequest(request) {// const response = await fetch(request)const url = new URL(request.url)  url.host = '<对象存储namespace>.compat.objectstorage.eu-frankfurt-1.oraclecloud.com'const newRequest = new Request(url, request)// 发起实际请求const response = await fetch(newRequest)// 获取请求路径const path = url.pathname// 检查文件后缀是否为 '.svg'if (path.endsWith('.svg')) {// 修改内容类型为 'image/svg+xml'const modifiedHeaders = new Headers(response.headers)modifiedHeaders.set('Content-Type', 'image/svg+xml')// 返回经过修改的响应return new Response(response.body, {status: response.status,statusText: response.statusText,headers: modifiedHeaders})}// 直接返回原始响应return response
}