在當今數字化時代，網站性能和可用性是業務成功的關鍵。為了提供快速且可靠的訪問體驗，許多組織正在尋找有效的內容分發網絡（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.jpg5 通過 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
}6 參考
Oracle Cloud Infrastructure API Reference and Endpoints
🚀 炸雞物料庫 🚀
🔍 內容定位： IT技術領域，云計算、云原生、DevOps 和 AI 等相關的技術資訊、實踐和經驗分享。面向開發、系統和云計算，提供實用的技術內容。
🎯 目標受眾： 面向開發者、系統管理員和云計算從業者，提供實用的技術內容。
🗓? 更新頻率：每周更新，每次分享都為您帶來有價值的技術內容。
🤝 互動與反饋： 鼓勵讀者留言、評論，有問題隨時提問，我們將積極互動并提供幫助。
💌 訂閱方式： 掃描二維碼或搜索“炸雞物料庫”關注，不錯過每一篇精彩內容。
🌐 合作與分享： 如果您有技術分享或合作計劃，歡迎聯系我們，共同成長！
