CDN CloudFlare 接入 OCI 对象存储

news2024/9/21 8:02:06

在当今数字化时代，网站性能和可用性是业务成功的关键。为了提供快速且可靠的访问体验，许多组织正在寻找有效的内容分发网络（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 对象存储 endpoint
  url.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
}