上一篇說明了「網域從 Squarespace 轉移到 Cloudflare」流程需要注意的地方，同時另一篇「Blogger 網站由 Cloudflare 代管常用功能」也介紹了 DNS、網域轉址、郵件轉寄的操作方法。除此之外，Cloudflare 還有很多強大的免費功能，是其他網址代理商無法提供的。
本篇會介紹在免費額度下，這幾個對部落格網站而言非常實用的功能：
- 防火牆 WAF
- 第三方工具 Zaraz
- 後端平台 Workers
一、防火牆 WAF
1. 介紹+說明 WAF 是 Web Application Firewall 的縮寫，如果覺得網站有大量不明流量，或是常有機器人來爬資料，或是想阻絕特定 IP、國家、地區等等來源，那麼 Cloudflare 防火牆功能就非常實用。 此功能的詳細說明可參考這篇「Cloudflare WAF」，但當初的 Cloudflare 界面跟現在差很多，會找不到 WAF 在哪裡，所以這裡大致說明新版界面要如何操作。 2. 操作方法- 進入「Cloudflare 儀表板」→ 選擇網域
- 左側選單「網路安全」→「安全性規則」
- 進入到這裡的畫面，就差不多是以前 WAF 的畫面
如上圖，「建立規則」→「自訂規則」
這裡的範例是，假設發現網站有來自俄羅斯的數量龐大、不正常流量，可設定一個防火牆規則，針對俄羅斯的訪客進行 CAPTCHA 檢測，判斷是否為真人：
- 規則名稱：填入自訂說明
- 欄位：可選擇國家、主機、IP、網址..等，上圖範例會篩選來自俄羅斯的流量
- 選擇動作：可選擇受控的查問、封鎖、JS 查問等等，「受控的查問」會進行 CAPTCHA 檢測。
- 設定完畢按右下「佈署」即可
二、第三方工具 Zaraz
1. 介紹+說明 Cloudflare Zaraz 這個功能可以讓網站載入第三方工具，但不需要安裝在網站上，而是由 Cloudflare 伺服器執行。這麼做的好處是：- 不影響網頁速度，由後端直接執行
- 因為第三方程式碼沒有安裝在網頁上，可防止被嵌入惡意程式碼
- 同時第三方程式碼在伺服器端執行，代表將無法取得訪客 IP、cookie 等資訊，隱私較有保障
- 進入「Cloudflare 儀表板」→ 左側選單一直往下捲，找到「標籤管理」→「標籤設定」
- 如上圖紅框可看到功能介紹，從伺服器端可安裝許多知名的第三方工具，例如 GA、FB Pixel
畫面往下捲，能選擇許多現成的第三方工具安裝，紅框這幾個是常見的網站工具，左下角的「Instagram」小工具也很實用，很多網站會內嵌這個 IG 工具。
不過本篇要當作範例的，是也很實用的「Custom HTML」工具，可以在網站內嵌 HTML/Javascript，例如嵌入一段「Go Top」回到頂端的按鈕，方便訪客回到網頁上方。
選擇「Custom HTML」後，一路按「繼續」，修改自訂文字等等，直到最後一個步驟「Actions」：
- 填入「動作名稱」
- 發動觸發程序：請選擇「Pageview」，代表頁面一載入就執行這段 HTML/JS
- HTML Code：填入你要嵌入網頁的 code，圖中的測試用範例程式碼，是為了驗證此功能是否可正確執行
回到網站開啟 Chrome 開發人員工具後，看到上圖紅色底線的文字跑出來了，代表內嵌 JS 成功執行！
3. 使用限制
免費版所有第三方工具執行次數的總和，最多一個月執行一百萬次，可以想成一百萬個瀏覽數，對於一般部落格網站，相信不會超出免費使用額度。
三、後端平台 Workers
1. 介紹+說明 Workers 是 Cloudflare 最強大的功能，能做到類似 Google 這兩項強大的服務：- Google Apps Script：可參考「Google Apps Script」相關系列文章，能在後端執行各種網頁 APP
- Google 試算表：可參考「Google 試算表」相關系列文章，可把試算表當成免費資料庫使用
- 進入「Cloudflare 儀表板」→「計算(Workers)」→「Workers 和 Pages」
- 如上圖按「建立」，來建立一個 APP 頁面
- 選擇「Workers」分頁
- 點擊紅框「從 Hello Wolrd 開始」的「開始使用」
- 上方紅框可填入自訂字串，例如 "test-ip"，會自動產生這個字串的 APP 子網域
- 目前無法修改範本 js 內容，所以先按右下角「部署」
回到「Workers 和 Pages」頁面，會看到已建立「test-ip」這個項目，點進去後如上圖，按右上「程式碼圖示」可編輯 JS 內容。
- 左側紅框可輸入 JS
- 右邊可看到這個「test-ip」的 APP 網址，請紀錄自己的 APP 網址
- 寫完 code 後按右上角「佈署」即可
- 如果前往這個 APP 網址的話，可看到右下角區塊能預覽執行結果，顯示 IP 及國家
export default {
async fetch(request) {
const ip = request.headers.get("CF-Connecting-IP");
const country = request.headers.get("cf-ipcountry");
return new Response(JSON.stringify({
ip: ip,
country: country
}), {
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*"
}
});
}
}
前端也可使用以下範例程式碼，呼叫這個 APP 網址，取得訪客 IP 及國家進行運用：
fetch('https://填入 APP 網址/')
.then(res => res.json())
.then(data => {
console.log("國家: " + data.country + ", IP: " + data.ip);
});
4. 資料庫應用：網頁計數器
可作為資料庫應用的範例相當多，最簡單的是網頁計數器，剛好有人寫了完整的 Cloudflare Workers 網頁瀏覽數範例，請參考這篇實作「Cloudflare Workers D1 實作適合純前端網頁的計數器」。
5. 使用限制
Workers 免費版限制可參考官方文件「Workers Free」，主要限制有這些：
- 每日 10 萬次請求
- 鍵值每日 10 萬次讀取，1000 次寫入、刪除
- 1 GB 儲存空間
更多 Cloudflare 相關文章：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。