Vercel 與 Cloudflare 整合的核心概念
Vercel + Cloudflare 靜態網站最佳化配置的核心答案是：透過 Cloudflare 作為 DNS 與 CDN 層，配合 Vercel 的部署功能，可實現全球快速存取、強化資安與自動化 HTTPS。Vercel 負責建置與部署靜態網站，Cloudflare 則提供 DNS 解析、 DDoS 防護、邊緣快取與 SSL/TLS 加密。這種架構結合了 Vercel 的開發者體驗與 Cloudflare 的網路基礎設施，是現代靜態網站部署的推薦方案。
整合兩者的主要優勢包括：減少 DNS 查詢延遲、啟用 Brotli 壓縮、利用 Cloudflare Page Rules 設定快取規則，以及透過 Always Online 功能確保網站可用性。以下章節將逐步說明具體配置方法。
第一步：Vercel 專案部署設定
在開始 Cloudflare 整合前，需先完成 Vercel 上的專案部署。登入 Vercel Dashboard，選擇「Add New...」並點擊「Project」，匯入你的 GitHub/GitLab/Bitbucket 儲存庫。Vercel 會自動偵測框架（如 Next.js、React、Gatsby 等）並給出建議的建置命令。
確保你的專案設定正確，特別是 Build Output Directory（建置輸出目錄）。對於靜態網站，常見設定如下：
// vercel.json 範例
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"framework": "react",
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}部署完成後，Vercel 會提供一個類似 `your-project.vercel.app` 的網域。此時網站已可透過 Vercel 全球 CDN 存取，但我們將加入 Cloudflare 來進一步優化。
第二步：Cloudflare DNS 設定
登入 Cloudflare Dashboard，選擇「Add a site」並輸入你的網域。Cloudflare 會掃描現有 DNS 記錄並匯入。接下來需要設定正確的 DNS 記錄類型：
- A 記錄：指向 Vercel 的 IP 位址或 CNAME
- CNAME：指向你的 Vercel 網域（如 `cname.vercel-dns.com`）
- AAAA 記錄：若支援 IPv6，可設定對應的 IP 位址
重要提醒：將 Proxy status 設為「Proxied」（橙色雲朵），如此 DNS 查詢會經過 Cloudflare 而非直接解析到源伺服器，這能啟用 Cloudflare 的所有優化功能。
第三步：快取與效能優化策略
Cloudflare 提供了強大的快取機制，可大幅提升靜態網站的載入速度。進入 Cloudflare Dashboard 的「Caching」設定頁面，進行以下配置：
- 快取層級（Cache Level）：設定為「Cache Everything」，讓所有檔案都被快取
- 瀏覽器快取時間（Browser Cache TTL）：建議設為「4 hours」或「1 day」
- 邊緣快取時間（Edge Cache TTL）：靜態資源可設為「1 week」或更長
針對特定檔案類型，可使用 Page Rules 進行進階設定。以下規則可確保 CSS、JS 與圖片獲得最優化的快取：
// Cloudflare Page Rules 範例
URL: *yourdomain.com/*.css
Cache Level: Cache Everything
Edge Cache TTL: 1 week
Browser Cache TTL: 1 day
URL: *yourdomain.com/*.js
Cache Level: Cache Everything
Edge Cache TTL: 1 week
Browser Cache TTL: 1 day
URL: *yourdomain.com/*.png
Cache Level: Cache Everything
Edge Cache TTL: 1 month
Browser Cache TTL: 1 week此外，記得在「Speed」設定中啟用「Auto Minify」功能，可自動壓縮 JavaScript、CSS 與 HTML 檔案，進一步減少傳輸大小。
第四步：SSL/TLS 加密與資安設定
Cloudflare 提供免費的 SSL 憑證，並支援多種加密模式。建議將「SSL/TLS 加密模式」設為「Full (strict)」，確保用戶端與 Cloudflare、Cloudflare 與源伺服器之間都使用 HTTPS 加密連線。
若要強制所有訪客使用 HTTPS，可在「Edge Certificates」中啟用「Always Use HTTPS」功能。另有以下推薦設定：
- HTTP Strict Transport Security (HSTS)：啟用並設為「Enable」
- Minimum TLS Version：設為「TLS 1.2」
- Automatic HTTPS Rewrites：啟用以避免混合內容問題
針對 WordPress 或其他動態內容網站，可在「Firewall」設定中啟用「Bot Fight Mode」或「I’m Under Attack Mode」來防禦惡意流量。
第五步：進階功能與監控
完成基本設定後，可進一步利用 Cloudflare 的進階功能提升網站表現：
Cloudflare Images：若你的網站有大量圖片，可使用 Cloudflare Images 服務進行圖片優化與自動格式轉換（WebP、AVIF）。配合 Vercel 的圖片優化功能，形成雙重防護。
Workers：Cloudflare Workers 可在邊緣執行 JavaScript 程式碼，實現自定義的請求處理邏輯，例如 A/B 測試、地理定位內容或請求重寫。
Analytics：定期查看 Cloudflare Analytics 監控流量模式、快取命中率和潛在問題。良好的監控習慣有助於持續優化網站效能。
透過以上五個步驟，你的 Vercel 部署網站將擁有全球快速存取、強化資安與高效能快取的完整配置。