Cloudflare Redirect Rules 教學:設定 301/302 網址重新導向

Cloudflare Redirect Rules 能在請求抵達網站之前,直接把舊網址導向新網址,不必寫程式。這篇文章從帳戶首頁開始,用贊贊小屋舊課程網址轉到新平台的實際設定,示範建立規則、選擇 301 或 302,以及部署後怎麼確認。

Cloudflare Redirect Rules 301/302 網址重新導向特色圖:舊網址 zanzan.tw/lesson 經過條件判斷,以 301 或 302 導向新網址 app.zanzan.tw

一、Cloudflare Redirect Rules 是什麼?從帳戶首頁開始

Cloudflare Redirect Rules 是 Cloudflare 提供的網址重新導向功能,介面中文名稱是「重新導向轉接規則」。它的做法是先設定一組比對條件,只要訪客要求的網址符合條件,Cloudflare 就直接回覆一個重新導向的狀態碼與新網址,讓瀏覽器自己跳到新的位置。這個動作發生在請求到達原本的網站主機之前,所以舊網址背後的網站不需要跟著修改。Cloudflare 官方文件把這項功能稱為 Single Redirects,可以建立靜態或動態的網址重新導向;要使用它,該網域或子網域的 DNS 記錄必須經過 Cloudflare 代理(網域怎麼加入 Cloudflare,可以參考Cloudflare DNS設定教學)。

贊贊小屋會用到它,是因為網站搬遷期間,舊的課程網址需要轉到新的學習平台。舊網址仍然散落在過去的文章、連結與書籤裡,如果直接停用,點進來的人只會看到錯誤頁面;用 Redirect Rules 設定轉址,就能讓這些舊入口繼續把人帶到正確的地方。

操作從 Cloudflare 的帳戶首頁開始。登入後,左側選單最上方是「帳戶首頁」,往下依序有「最近造訪」「網域」,再往下是「運算」「AI」「儲存空間和資料庫」等分類。首頁中間的「Domains」區塊,也會直接列出這個帳戶底下的網域。要設定重新導向,可以點左側的「網域」,也可以直接點「Domains」區塊裡的網域名稱。

重新導向規則是設定在單一網域底下,而不是整個帳戶共用,所以第一步一定是先決定要替哪個網域設定。

Cloudflare 帳戶首頁:左側選單有「網域」,中間的 Domains 區塊列出帳戶底下的網域,其中包含 zanzan.tw 知識卡:網址重新導向如何運作,瀏覽器請求舊網址,Cloudflare 比對 Redirect Rules,符合條件就回傳 302 與 Location,瀏覽器再前往新網址

二、選擇要設定重新導向的網域

點開左側的「網域」後,選單會展開「概覽」「註冊」「轉移」三個項目,右側主畫面顯示「網域」頁面,標題下方寫著「加速並保護您的網站與應用程式」。在「概覽」裡,帳戶底下的網域會以清單呈現,每個網域旁邊有「狀態」欄,顯示「使用中」代表這個網域已在 Cloudflare 啟用。

贊贊小屋的帳戶清單裡有兩個網域,這次要設定的是 zanzan.tw,所以直接點選清單中的「zanzan.tw」,進入這個網域的管理畫面。

這個選擇看起來單純,卻值得多看一眼。帳戶底下有多個網域時,規則只會作用在被選中的那一個,設定前先確認畫面左上方顯示的網域名稱,能避免把規則建在錯誤的網域上。

Cloudflare「網域」頁面:網域清單顯示 zanzan.tw 的狀態為使用中,左側展開概覽、註冊與轉移 判斷卡:Cloudflare 帳戶底下有多個網域,Redirect Rules 設定在選定的 zanzan.tw 之下,不是整個帳戶共用

三、進入網域的規則管理功能

進入 zanzan.tw 之後,畫面上方會顯示網域名稱「zanzan.tw」,旁邊的「free」標籤代表這個網域目前使用的 Cloudflare 方案。主畫面是網域的「概觀」,說明文字寫著「使用功能表中的服務,監視並設定 Cloudflare 如何處理您的網路流量」,下方則是流量統計圖表。

重新導向規則的入口在左側選單的「規則」。選單項目很長,需要往下捲動才會看到「Workers 路由」下方的「規則」。點開它之後,會展開「概觀」「規則模擬器」(測試版)「Snippets」「雲端連接器」(測試版)「網頁規則」「設定」。

這些項目各有分工,重新導向與 URL 改寫等規則都列在「概觀」裡,所以接下來要點的是「規則」底下的「概觀」。這一步的重點是別和網域本身的「概觀」混淆:網域的「概觀」看流量,「規則」底下的「概觀」才是建立規則的地方。

zanzan.tw 網域管理畫面:左側「規則」展開後有概觀、規則模擬器、Snippets、雲端連接器、網頁規則與設定 知識卡:網域概觀用來查看網域狀態與流量,規則概觀才是管理 Redirect Rules 的入口

四、找到重新導向規則並建立新規則

「規則」底下的「概觀」頁面,頂端說明了這裡的用途:修改 HTTP 請求和回應、執行 URL 重新導向轉接、設定 Cloudflare 設定,並針對相符的要求觸發動作。頁面還特別提醒,規則會依由先至後的順序評估並執行。

往下是依規則類型分開的區塊。第一個是「URL 改寫規則」,贊贊小屋的帳戶裡目前沒有建立任何一條,區塊內顯示「沒有建立任何 URL 改寫規則」。第二個是「重新導向轉接規則」,標題旁的綠色標籤顯示「2 個啟用」,表示建立新規則之前,這個網域已經有兩條重新導向規則在運作。Cloudflare 官方文件列出的 Single Redirects 額度是以網域為單位計算,Free 方案最多 10 條規則,並支援萬用字元,但不支援正規表示式。

要新增的是重新導向規則,所以點的是「重新導向轉接規則」區塊右側的「建立規則」。頁面右上角另有一個藍色的「建立規則」按鈕,這是通用入口,點下去之後還要再選擇規則類型;從重新導向轉接規則區塊自己的按鈕進入,畫面就直接是建立重新導向規則。

規則概觀頁面:重新導向轉接規則區塊顯示 2 個啟用,區塊右側有建立規則按鈕 流程卡:建立 Redirect Rule 有區塊專用入口與頁面通用入口兩種,本例採用區塊專用入口

五、設定規則名稱與自訂篩選條件

進入建立畫面後,最上方是「規則名稱 (必填)」,欄位下方的提示是「指定規則的描述性名稱」。贊贊小屋這條規則取名為 course41-to-app-302。名稱裡包含三項資訊:來源是課程 41,目的地是新平台 app,使用的狀態碼是 302。規則累積到好幾條之後,只看名稱就能分辨每一條在做什麼,不必逐條點進去查。

名稱下方是「若傳入要求符合…」,提供三種比對方式:

- 「萬用字元模式」:僅將規則套用於與萬用字元模式相符的要求。
- 「自訂篩選條件運算式」:僅將規則套用於與自訂篩選條件運算式相符的要求。
- 「所有傳入要求」:將規則套用於所有要求。

贊贊小屋選的是「自訂篩選條件運算式」。這條規則需要同時判斷網域、路徑與網址上的查詢參數,萬用字元模式無法精確表達;而「所有傳入要求」會讓整個網域的每一個請求都被導走,只適合整站搬遷這類情境,一般情況下很容易誤傷其他頁面。

選擇自訂篩選條件後,畫面會出現「欄位」「運算子」「值」三個欄位,預設是「完整 URI」搭配「萬用字元」,值的範例是 https://*.example.com/files/*,旁邊有「及」與「或」兩個按鈕可以串接多個條件。這個介面適合條件簡單的情況;贊贊小屋的條件有三項,直接寫運算式比逐欄點選更清楚,所以點擊右下角的「編輯運算式」,切換成文字編輯模式。本文網址範例中的全形星號「*」僅供示意,實際設定 Cloudflare 時,應改用鍵盤輸入的半形星號。

建立規則畫面:規則名稱為 course41-to-app-302,比對方式選擇自訂篩選條件運算式,右下角有編輯運算式連結 比較卡:萬用字元模式、自訂篩選條件運算式與所有傳入要求三種比對方式,本例選擇自訂篩選條件運算式

六、設定網址條件、301/302 與目標網址

切換到編輯模式後,「當傳入要求符合…」下方就是一個文字方塊,可以直接輸入運算式。這一節是整條規則的核心,包含三件事:比對條件怎麼寫、狀態碼怎麼選、目標網址與查詢字串怎麼處理。

Host、Path 與 Query String 的比對條件

贊贊小屋實際使用的運算式如下:

(http.host eq "zanzan.tw" and http.request.uri.path in {"/lesson" "/lesson/"} and any(http.request.uri.args["course_id"][*] eq "76125"))

這段運算式由三個條件用 and 串在一起,三個條件必須同時成立,請求才會被導向。

第一個條件 http.host eq "zanzan.tw" 比對主機名稱,只有送往 zanzan.tw 的請求才會符合。

第二個條件 http.request.uri.path in {"/lesson" "/lesson/"} 比對路徑。這裡的路徑只包含網址中問號之前的部分,不含查詢字串。大括號裡列了兩個值,同時涵蓋結尾有斜線與沒有斜線的寫法,因為同一個頁面常常會被寫成這兩種樣子,只比對其中一種就會漏掉另一種。

第三個條件 any(http.request.uri.args["course_id"][*] eq "76125") 比對查詢字串裡的 course_id 參數。

同一個參數名稱在網址中可能重複出現,所以 http.request.uri.args["course_id"] 取得的是一組值,[*] 表示逐一檢查每個值,any() 則是只要其中任何一個等於 "76125" 就成立。

三個條件合起來,符合的網址就是 zanzan.tw 上帶有 course_id=76125 的 /lesson 或 /lesson/ 頁面。其他課程編號的 /lesson 網址不會被這條規則影響。

編輯器右下方會顯示字數統計,這條運算式是 136 字元,上限為 4000;旁邊出現綠色勾勾與「規則驗證通過」,表示運算式語法沒有錯誤。需要提醒的是,驗證通過只代表語法正確,不代表條件寫得符合預期,這部分仍要靠部署後的實際測試確認。

301、302、307、308 的差別

運算式下方是「則…」,這裡設定符合條件後要執行的動作。「URL 重新導向轉接」底下的「狀態代碼」下拉選單列出五個選項:

- 301 - Permanent Redirect:永久重新導向。
- 302 - Temporary Redirect:暫時重新導向。
- 303 - See Other:導向到另一個網址,並一律改用 GET 方法取得,常用在 POST 或 PUT 之後。
- 307 - Advanced: Temporary, HTTP method preserved:暫時重新導向,並保留 HTTP 方法。
- 308 - Advanced: Permanent, HTTP method preserved:永久重新導向,並保留 HTTP 方法。

一般網頁轉址最常用的是 301 與 302。301 告訴瀏覽器與搜尋引擎,這個網址已經永久搬家;302 則表示只是暫時導向,原本的網址之後可能還會用。301 屬於永久導向,回應有可能被瀏覽器快取,已經記住的瀏覽器即使規則調整,仍可能繼續跳往舊的目的地,所以目的地還有可能更動時,302 比較容易回頭修正;確定長期不變,才適合改用 301。搜尋引擎方面,兩者的意義也不同。依 Google Search Central 的說明,301 與 308 屬於永久重新導向,Google 的索引系統會把它視為目標網址應成為主要網址的訊號;302 屬於暫時重新導向,不會被當成這樣的訊號,但如果有其他判斷依據,目標頁仍可能被收錄。

307 與 308 分別是 302 與 301 的進階版,差別在於會保留原本請求的 HTTP 方法。依 Cloudflare 官方說明,收到 301 或 302 的 POST 請求,用戶端或瀏覽器可能會改用 GET 方法去追蹤導向;307 與 308 則要求必須保留原本的 HTTP 方法。選擇狀態碼時,畫面上也出現了一則提示:「重新導向 POST 請求?為防止請求方法被變更為 GET,請改用 307/308 重新導向。」課程頁面這類單純的網頁瀏覽請求都是 GET,不涉及這個問題,所以用不到 307 與 308。

贊贊小屋這條規則選的是 302 - Temporary Redirect。

目標網址與保留查詢字串

動作的設定有三項。「類型」選擇「靜態」,表示導向的目標是一個固定網址;「URL」欄位填入 https://app.zanzan.tw/,符合條件的請求都會被導向這個固定的位置。

「URL」欄位下方有一個「保留查詢字串」核取方塊,贊贊小屋沒有勾選。這個選項預設是不勾選。勾選的話,原網址問號後面的參數會一併帶到新網址;沒有勾選,導向後的網址就是乾淨的 https://app.zanzan.tw/,原本的 course_id=76125 不會跟過去。這條規則的目標是固定的新平台網址,所以不需要帶參數。如果新網址需要沿用舊網址的參數,才需要勾選這一項。

最下方的「放置於」選項設定這條規則在清單中的順序,贊贊小屋選擇「第一」,也就是排在所有既有規則之前。確認條件與動作都沒問題後,畫面右下角有紅色的「取消」、藍色外框的「儲存為草稿」,以及藍色實心的「部署」三個按鈕,旁邊同時顯示「規則驗證通過」。

編輯運算式與動作設定:Expression 比對 zanzan.tw、/lesson 與 course_id=76125,狀態代碼選擇 302,目標網址為 https://app.zanzan.tw/ 知識卡:Host、Path 與 course_id 三個條件同時成立,才會以 302 導向 https://app.zanzan.tw/

七、部署 Redirect Rules 並確認是否生效

「儲存為草稿」只會把設定存起來,規則不會開始作用;要讓規則正式生效,必須點「部署」。贊贊小屋點下「部署」之後,畫面回到規則「概觀」,篩選條件列顯示目前只看「重新導向轉接規則」,區塊標題旁的標籤也從建立前的「2 個啟用」變成「3 個啟用」。

清單的欄位有「順序」「名稱」「比對」「動作」「狀態」。新建立的 course41-to-app-302 排在順序 1,其後依序是 chatgpt-course-to-app-302 與 course20-to-app-302,三條規則的動作都是「302 重新導向轉接到 https://app.zanzan.tw/」,狀態都顯示綠色的「使用中」。

規則是依順序由上往下評估,這也是建立時要選「放置於」的原因。贊贊小屋這次建立的規則排在第一順位。Cloudflare 官方文件說明,重新導向是終止性的動作,一旦有規則符合就會停止評估,並採用第一條符合規則的導向。當多條規則的比對條件可能重疊時,排列順序就十分重要,因此新增規則之後,也應一併檢查既有規則的設定。

「使用中」只代表這條規則已經部署並啟用,並不等於每一個轉址請求都已經被驗證成功。要確認規則真的生效,最直接的方式是在部署後,用 curl 檢查舊網址的回應標頭:

curl -I "https://zanzan.tw/lesson?course_id=76125"

回應中應該看到狀態碼是 302,並且有一行 location 指向 https://app.zanzan.tw/。網址要用雙引號包起來,因為在 zsh 等命令列環境裡,問號可能被當成萬用字元,造成指令出錯。curl 的 -I 參數會送出 HEAD 請求,只取得回應標頭,不會自動跟著導向,所以能直接看到 302 與 location。也可以用瀏覽器的無痕視窗直接開啟舊網址,避免被先前快取的結果影響。條件有兩種寫法的網址,例如路徑結尾有沒有斜線,兩種都值得各測一次。

規則概觀:三條重新導向轉接規則皆為使用中,course41-to-app-302 排在順序 1,動作為 302 重新導向 流程卡:規則顯示使用中只代表已部署啟用,還需檢查 HTTP 302 與 Location 才能驗證實際轉址

單純的網址轉址,用 Redirect Rules 就能處理

轉址規則本身不複雜,花時間的是把條件寫得剛好:寫太寬,會誤導走不該動的頁面;寫太窄,又會漏掉部分舊網址。贊贊小屋這次用主機、路徑與課程編號三層條件限縮範圍,每條規則只負責一個舊課程入口,名稱也把來源與目的地直接寫出來,日後回頭檢查,不必重新解讀運算式就能知道每一條的用途。

網站搬遷時,舊網址不會一次全部消失。過去的文章、書籤與外部連結仍然會指向舊位置,Cloudflare Redirect Rules 提供的正是這段過渡期需要的緩衝:新平台上線之後,舊連結仍然有地方可以去。

如果需求只是把符合條件的舊網址導向新網址,在後台設定一條規則就能完成,不需要另外撰寫與維護程式碼。需要依內容動態判斷、改寫回應或串接其他服務時,才是考慮用 Cloudflare Workers 寫程式處理的時候;單純的網址轉址,把條件與目標寫清楚,往往就已經足夠。

總結卡:單純的條件式網址轉址可使用 Redirect Rules,需要程式化處理或串接服務時再考慮 Cloudflare Workers
發布日期:
分類:WordPress