Blog
/
Frontend
買了網域然後呢？ CloudFlare 串接 Framer 完整圖解
Framer 是強大的 No Code 網頁設計夥伴，但預設網址缺乏專業感。CloudFlare 除了作為網域販售商，同時也提供了企業級的安全防護，包含 SSL 加密、阻擋 DDoS 等。
Posted at
2026年1月19日
Posted on
Frontend
Framer 中設定網域
Framer 由 AWS CloudFront 提供解析服務，網域預設是 framersite.com，如果想要在 Framer 中連接客製化網域：
在 Framer 中進入 Site Settings > Domains
點擊 Connect a domain you own
輸入網域名稱，Framer 會引導你進入驗證流程，確認你是網域持有者
Why CloudFlare?
網域在哪裡買有差嗎？DNS 又是什麼？前者關係到長期荷苞，有的服務商第一年很便宜，但是養套殺後續給你漲價；後者則跟網域託管安全性有關。業界時不時就有某某服務商遭駭的新聞，甚至有網域商被美國政府提告， CloudFlare 作為龍頭，提供業界首屈一指的資安服務。
下表展示了 CloudFlare 相較於單純 DNS 提供商的優勢：
功能 | Cloudflare | 標準DNS服務 |
|---|---|---|
DNS解析 | ✓ | ✓ |
CDN加速 | ✓ | ✗ |
DDoS防護 | ✓ | ✗ |
Web應用防火牆 | ✓ | ✗ |
SSL/TLS管理 | ✓ | ✗ |
速率限制 | ✓ | ✗ |
機器人防護 | ✓ | ✗ |
地理位置封鎖 | ✓ | ✗ |
免費版＆Pro？嘟幾？
步驟 1：購買網域
國內外許多廠商都有提供網域販售的服務，包含中華電信、Godaddy … 等，CloudFlare 也有提供站內購買網域服務。 .com 網域約一年 10 USD，.io 近年來很夯要價 45 USD，也買得到一些酷酷的網域如：.xyz .ai，如果想購買 .com.tw 的網域，需洽台灣代理商，CloudFlare 無法直接購得，可以買了網域之後再將網域轉移轉至 CloudFlare。
帳戶首頁 (Cloudflare 儀表板) > 讓網域上線 > 輸入現有網域
如果在 GoDaddy 等其他網域商設定過 DNS，要先斷開 GoDaddy 的 DNS 設定，或著在GoDaddy 重新指向 CloudFlare。
步驟 2：核心！設定 DNS
DNS 的設定關係到 CloudFlare 提供的資安防護能否啟動，如果沒打開就是所有的流量都直接打到主機。設定的路徑在
CloudFlare 儀表板 - DNS - 紀錄：
基本上這邊設定 DNS 只有前三個比較重要，確保 A 紀錄和 CNAME 的 Proxy 狀態為「橘色」打開，TTL 為自動，其他非紅框的部分則是其他如個人網域信箱的服務。
A 記錄：指向 IPv4 地址，用於根域名 (apex domain)
CNAME 記錄：別名記錄，指向另一個網域名稱，用於子網域
打開橘色雲朵的同時，Framer 中如果原本有開 Auto Connect 也會被自動關閉，這個是正常的結果，不影響 SEO 或前端渲染。Framer 中 Auto Connect 不要打開，不然預設的 AWS Cloud Front 會和 CloudFlare 衝突
步驟3：AI Crawl Control
如果希望自己的文章能被搜尋引擎、AI 索引到，要將所有 AI 搜尋 Allow。這裏也可以看自己的網站是否有被 Google, ChatGPT, Meta 等搜尋引擎索引到，時間的尺度有 1 小時、24 小時。附帶一提，GPTBot 和 ChatGPT-User 雖然都是 OpenAI 的機器人，但前者是 GPT 自己主動爬取的，和 AEO 有關；後者是當你的網域出現在 ChatGPT 對話框的回答裡時會跑出來的。
同區在 Robots.txt 也可以看到被搜尋引擎爬取的概況
如果這邊一開始沒辦法選取開啟 AI Crawl Control，可以先去 網路安全 - 設定 - 機器人流量，將封鎖 AI 機器人範圍 選項改為請勿封鎖 (允許網路爬蟲)
第三部分：SSL/TLS 安全加密
CloudfFlare 和 Framer 都提供 SSL/TLS 加密，建議採用以下設定：
在 Cloudflare 中啟用 HTTPS 強制：進入 SSL/TLS > Overview，將加密模式設為 Full 或 Full (strict)，後者 Framer 已提供。
啟用 Always Use HTTPS：在SSL/TLS > Edge Certificates 中勾選設定
TLS 1.3
第四部分：網路安全、DDoS 防護
Cloudflare自動檢測和緩解 DDoS 攻擊，不需額外配置。其保護涵蓋 OSI 模型的多個層級：
3/4 層（網路層）：防禦 SYN 洪泛、UDP 反射攻擊
第 7 層（應用層）：防禦 HTTP / HTTPS DDoS 攻擊
DNS 層：防禦隨機前綴攻擊等複雜 DNS 攻擊
儀錶板 - 網路安全 - 設定
DDoS 攻擊：結構描述驗證 (API 濫用開這個)、網路層 DDoS 攻擊保護、瀏覽器完整性檢查、CloudFlare 受控規則集、HTTP DDoS 攻擊保護
如果打開機器人對抗模式，搜尋引擎有可能會索引不到，平常不用打開
用戶端濫用：持續的指令碼監視、Email Address Obfuscation
網域設定：取代不安全的 JavaScript 程式庫
第五部分：Zero Trust、WAF 防火牆
Zero Trust 和 WAF 是 CloudFlare 提供的進階防護功能，如果是單純展示靜態作品可以不需要使用，但如果牽涉到複雜項目如金流可以考慮應用。Zero Trust 在免費版有免費的 50 個應用額度，WAF 則是付費版才能解鎖，可防禦SQL注入、XSS、RFI 等攻擊。要啟用WAF：
在 Cloudflare 儀表板進入保護與連線 > 應用程式安全性 > WAF
Cloudflare 儀表板進入保護與連線 > Zero Trust
根據需求啟用其他規則集：
OWASP Modcore Rules：防禦常見攻擊
Bot Management：檢測和阻止惡意機器人
小結：透過 Proxy 取得完整 CloudFlare 防護
免費版 CloudFlare 網域託管提供：自動 SSL 加密、DDoS 緩解到 Zero Trust 等高規格資安防護，若有更複雜的防護需求，如：反制 SQL Injection、地域及 ip 限制、防止 spam 存取或註冊，建議諮詢專業工程師或資安單位。
