Cloudflare 教學

【圖文攻略】Cloudflare教學:免費提升網站速度與安全性

前陣子網站一直被惡意登入的我,每天總是為我的網站安全性感到擔憂…

直到我遇見了 Cloudflare,它不但為我的網站增加了多道保護、避免遭受惡意攻擊,還可以讓我的網站速度提升。

重點是,它居然還是免費的!!!d(`・∀・)b

因此,本篇小豆將要來與你分享 Cloudflare 的使用教學,以及我的實際心得與評價。

Cloudflare 教學

推薦 Cloudflare 的三個原因:

  1. 免費提供 CDN 服務,提升網站的載入速度與使用者體驗
  2. 提供 DDoS 保護、SSL、防火牆等多項服務,免費為網站添增安全防護
  3. 東京大學Sony MusicTrustbank 等知名個案皆愛使用

Cloudflare 是什麼?

Cloudflare
Cloudflare

Cloudflare 成立於 2009 年,它是一家位於美國的雲端運算服務商,提供許多可以提升網站安全性與速度的服務,比如:

  • 隱藏網站伺服器的真實 IP 位址,避免被惡意攻擊
  • 提供 CDN 服務,加快網站的速度、降低主機負載
  • 提供 DDoS 防護, 為網站的安全性增加一道保護

而這些功能,免費版的 Cloudflare 都做得到!

所以小豆現在架站時,一定都會搭配使用 Cloudflare,不但可以讓我更安心地寫文章,不用再提心吊膽地擔心網站一直被惡意登入,更可以提升網站速度,讓讀者可以更輕鬆地連線到我的網站。

Cloudflare 特色與服務

Cloudflare 特色與服務
Cloudflare 特色與服務

Cloudflare 針對網站安全性,提供很許多服務,比如:

  • Bot Management 機器人管理:阻止有害或惡意的網際網路機器人流量
  • WAF 防火牆:即時偵測並封鎖網路攻擊,且不影響你的網站效能
  • DDoS 保護:不論攻擊的規模或複雜程度如何,都能確保你的網站保持連線狀態
  • SSL:使用 SSL 加密來保護連線,並保護客戶資料免受監控和篡改

除此之外,他們還提供多種功能與服務以加強網站速度,如果你有興趣的話,可以點我查看更多

Cloudflare CDN 如何運作?

Cloudflare CDN
Cloudflare CDN

CDN 也就是「內容傳遞網路」,全名為 Content Delivery Network。

透過雲端運算的技術,它可以事先將網站中的靜態檔案儲存起來,並將這些檔案分送到全球遍布於 100 多個國家的  Cloudflare 服務據點中。

當有人想要查看你的網站時,CDN 就能夠自動將「最靠近使用者的資料」傳送給他,不但可以大幅地提升網站速度,又能夠提升使用者體驗。比如:

  • 你的網站主機位於美國,而網站主要是服務台灣人
  • 在沒用 CDN 的情況下,台灣人若要瀏覽你的網站,則必須要連線到你位於美國的主機,讀取資料的過程中,很容易浪費許多流量與時間
  • 在使用 CDN 的狀況下,由於網站中的檔案已經事先儲存於 Cloudflare 的「台北資料管理中心」,因此台灣訪客就可以直接取得台北的資料,進而提升網站速度

Cloudflare 基本教學

首先,小豆將先與你分享 Cloudflare 的基本教學,分別一步步帶你一起註冊 Cloudflare 註冊、代管 DNS。

當你都設定完時,如果想申請 Cloudflare 二次驗證、免費 SSL等,以提升網站的安全性與速度,可以再接續往下看 Cloudflare 的進階教學

如何註冊 Cloudflare?

step 1

進入 Cloudflare 網站
進入 Cloudflare 網站

首先,點選下面的按鈕,進入到 Cloudflare 的頁面後,按下「註冊」。

step 2

創建 Cloudflare 帳戶
創建 Cloudflare 帳戶

點選「Create Account」,準備開始創建 Cloudflare 帳戶。

step 3

設定個人資料
設定個人資料

輸入 Email 與密碼後,再點擊按鈕。

step 4

輸入網域
輸入網域

接著輸入你想透過 Cloudflare 保護的網域名稱。

step 5

選擇 Cloudflare 零元方案
選擇 Cloudflare 零元方案

在這裡,你會看到 Cloudflare 有四種方案。

但因為目前為止,Cloudflare 免費版本其實已經很夠用了,所以這邊可以直接選擇「零元方案」。

如果最終確定真的有升級的需求,再自行選擇。

step 6

選擇繼續設定
選擇繼續設定

這邊的 DNS 設定可以先維持預設,直接按下按鈕即可。

step 7

複製 Cloudflare 名稱伺服器
複製 Cloudflare 名稱伺服器

分別複製 Cloudflare 的兩個名稱伺服器,再另開分頁,進入你的網域註冊平台畫面。

step 8

設定名稱伺服器
設定名稱伺服器

小豆以 NameCheap 為例,在你的網域註冊平台中,找到 Name Servers 設定,並分別貼上剛剛在 Cloudflare 複製的名稱伺服器。

延伸閱讀:【真實評價】NameCheap教學:網域購買、DNS設定、搬家一次搞定

step 9

成功更新名稱伺服器
成功更新名稱伺服器

名稱伺服器設定完後,NameCheap 就會跳出「成功更新」的畫面,接著等待它生效、通知即可,最長可能須等 48 小時。

step 10

準備開始檢查名稱伺服器
準備開始檢查名稱伺服器

接著點選按鈕。

step 11

點選稍後設定
點選稍後設定

點選「Finish later」,稍後再設定 Cloudflare 安全性等其他功能。

step 12

檢查名稱伺服器
檢查名稱伺服器

按下「Check nameservers」,請求 Cloudflare 檢查名稱伺服器的變更。

step 13

名稱伺服器檢查中
名稱伺服器檢查中

出現上述的藍色訊息視窗後,接著等待 Cloudflare 通知吧。

step 14

驗證信箱
驗證信箱

到你的信箱查看是否有收到 Cloudflare 的通知,如果有,請點擊連結,並驗證信箱。

step 15

Cloudflare 成功設定通知
Cloudflare 成功設定通知

過一陣子,你的信箱就會出現 Cloudflare 設定成功的通知。

step 16

Cloudflare 設定完成
Cloudflare 設定完成

回到 Cloudflare 網站,如果你有看到你的網域出現在上面,並打勾顯示 Active,這樣就代表 Cloudflare 設定完成啦!

Cloudflare 代管 DNS 教學

也許有些人會很好奇,為什麼要大費周章的將 DNS 改用 Cloudflare 代管呢?

原因是因為,一般在設定 DNS 時,都需要 24 ~ 48 小時才會生效,但若透過 Cloudflare 只要 10 ~ 15 分鐘就好,所以當主機出問題,或是想更換主機時,就能夠快速地進行維護,而不會讓網站出現長時間斷電的問題。

因此,接下來小豆將會以 Cloudways 主機作為示範,與你分享該如何透過 Cloudflare 代管 DNS。

step 1

查看 IP 位址
查看 IP 位址

首先,進入到 Cloudways,找到你的主機 IP 位址後,將它複製起來。

step 2

Cloudflare 代管 DNS 設定
Cloudflare 代管 DNS 設定

接著進入到 Cloudflare,點選「DNS」後,依據將網域名稱、IP 位址貼上,儲存後就設置完畢啦!

Cloudflare 進階教學

成功將網站與 Cloudflare 連線後,接著我要與你分享該如何申請 Cloudflare 的免費 SSL、設定速度最佳化、二次驗證登入等。

如此不但可以確保網站的安全性,也可以進而再讓網站的速度提升。

如何設定二次驗證登入 Cloudflare?

step 1

首先,請先在手機下載「兩步驟驗證碼」的 APP。

小豆目前是使用 Microsoft 的 Authenticator 作為登入 Cloudflare 的第二層防護,如果你不知道要下載哪一款 APP,也可以點選下方按鈕,並安裝微軟的 Authenticator,跟著小豆一步步操作。

step 2

設定 Authenticator
設定 Authenticator

下載並登入 Authenticator 後,點選右上角的「+」,準備開始設定。

step 3

點選其他
點選其他

接著你會在這裡看到三個帳戶選項,我們選擇第三個「其他」。

step 4

選擇繼續
選擇繼續

你可以選擇「繼續」,準備掃描等等 Cloudflare 產生的 QRcode。

step 5

設定 Cloudflare 二次驗證
設定 Cloudflare 二次驗證

重新登入到 Cloudflare 後,依序根據上圖操作,準備開始設定 Cloudflare 的二次驗證。

step 6

Cloudflare 行動應用程式認證
Cloudflare 行動應用程式認證

選擇第二個「行動應用程式認證」。

PS:如果你有需求,Cloudflare 的「安全金鑰認證」與「備用碼」認證,也可以在這裡試看看。

step 7

Authenticator 綁定 Cloudflare
Authenticator 綁定 Cloudflare

接著你會在 Cloudflare 看到上述畫面,請開啟 Authenticator APP 掃描 QR 代碼後,再依序填入代碼、密碼。

step 8

已啟用 Cloudflare 行動應用程式認證
已啟用 Cloudflare 行動應用程式認證

如此就成功啟用 Cloudflare 的手機二次認證啦!

step 9

登入 Cloudflare 需要二次驗證
登入 Cloudflare 需要二次驗證

這樣以後只要你登入 Cloudflare,除了需要輸入密碼外,還要再開啟 Authenticator APP,並輸入二次驗證代碼,不但讓網站再多了一層防護,也會讓小豆我更加安心~(≧∀≦)ゞ

如何申請免費 SSL 憑證?

申請免費 SSL 憑證
申請免費 SSL 憑證

Cloudflare 提供免費的 SSL 憑證,不但可以提升網站的安全性,也可以讓瀏覽者更放心地進入到我們的網站,進而提升使用者體驗。

由於小豆目前的是使用 Cloudways,它已經附有的免費 SSL 憑證,所以我就沒有使用 Cloudflare 的 SSL。

但如果你有需求,也不想額外付費購買 SSL,可以進入到 Cloudflare 後台,找到「SSL / TLS」,並將其設定為「彈性」,如此就可以為網域輕鬆申請 SSL。

如何讓網站的速度最佳化?

網站速度最佳化
網站速度最佳化

如果你想再提升網站的速度,可以切換到「Speed」功能,並將 JavaScript、CSS、HTML 開啟,如此會自動壓縮你的檔案,將檔案變小後,網站載入的速度就會變得更快!

如何讓 Cloudflare 讀取到網站的最新內容?

一、刪除快取

清除快取
清除快取

如同上述小豆分享的,Cloudflare CDN 之所以可以提升網站的速度,是因為它會將網站的靜態檔案事先儲存於遍布全球的 Cloudflare 資料中心,而這樣的概念也稱為「快取」。

也因為是預先儲存檔案,所以可能會發生「你修改了網站內容,卻無法顯示」的問題。

這時候,你就需要到 Cloudflare 的後台進行「刪除快取」,讓 Cloudflare 可以重新抓取網站的資料。

二、Always Online

Always Online
Always Online

此外,你會在「Caching」功能頁面中,看到「Always Online」的預設是呈現開啟的。

這是因為 Cloudflare 會像搜尋引擎爬蟲一樣,將你的網站檔案、頁面一一備份,往後當你的網站出現問題,卻無法連線時,Cloudflare 就會把儲存好的頁面提供給瀏覽者查閱,就好像你的網站永遠在線上(Always Online)。

這個功能看似實用,但其實會有一個缺點,如果開啟,Cloudflare 會因為需要不斷地抓取你的頁面資料,而加重網站的負載。

不過,小豆認為在這部分,你可以根據你在意的狀況,來選擇要不要開啟這個功能。

  • 建議開啟:擔心未來網站出現問題時,瀏覽者無法順利連線到你的網站
  • 建議不開:不太擔心網站的後續維護,更注重於網站的速度

三、安裝 Cloudflare 快取外掛

如果你覺得每次需要重新登入 Cloudflare 才能設定快取很麻煩,那麼你可以直接在 WordPress 安裝官方外掛,往後若要清除快取,就可以直接在 WordPress 後台管理!

step 1

安裝 Cloudflare 外掛
安裝 Cloudflare 外掛

首先,到 WordPress 後台的外掛安裝頁面中,搜尋並啟用 Cloudflare 官方外掛

step 2

登入 Cloudflare
登入 Cloudflare

接著點選「Sign in here」,並登入至 Cloudflare。

step 3

查看 Cloudflare API 金鑰
查看 Cloudflare API 金鑰

進入到 Cloudflare 後,找到並點選你的「Global API Key」。

step 4

複製 API
複製 API

將你的 API 金鑰複製起來,並回到 WordPress 後台。

PS:需要特別注意的是,API 請務必保管好,不要洩漏出去喔!

step 5

貼上 API
貼上 API

在 WordPress 後台中,輸入你的 Email 以及剛複製好的 API。

step 6

在 WordPress 後台清除快取
在 WordPress 後台清除快取

設定完後,未來你若想要清除 Cloudflare 快取,就可以直接在 WordPress 後台操作啦!

如何查看網站流量、網路安全等資訊?

查看網站流量、威脅等資訊
查看網站流量、威脅等資訊

你可以直接至「Analytics」功能,查看網站的流量、網路安全等資訊。

不過針對「網站流量」的部分,小豆以 Google Analytics 的數據為主會比較準確,Cloudflare 可以參考就好。

使用 Cloudflare 的契機與評價

曾經網站一直被惡意登入
曾經網站一直被惡意登入

小豆之所以會開始使用 Cloudflare,是因為前陣子我的網站一直被他人「惡意登入」,每次收到通知,就會覺得提心吊膽,很不舒服…

所以我開始爬文,試圖想要了解有什麼方法可以提升網站的安全性,最終發現了 Cloudflare 這個好東西!

免費的 Cloudflare 不但就很夠用,而且功能還很強大:

  • 隱藏網站伺服器的真實 IP 位址,避免網站被惡意攻擊
  • 提供 DDoS 防護、SSL、防火牆等服務, 為網站的安全性增加多道保護
  • 提供 CDN 服務,加快我的網站速度 15%,並降低主機的負載

現在的我,只要架設網站都會再搭配 Cloudflare,幫助我在經營網站的過程中,不再為他人惡意的攻擊緊張兮兮,更能專心、安心地寫文章。

Cloudflare 常見問題

有多少人使用 Cloudflare?

Cloudflare 客戶人數成長
Cloudflare 客戶人數成長

根據 Backlinko 統計,2021 年全球共有 759 萬個網站使用 Cloudflare,並且共有‎410 萬個客戶,其中包括‎將近 12 萬‎名個付費客戶,客戶人數從 2016 年至今,足足成長了 3.4 倍。

使用 Cloudflare 的知名個案包括東京大學Sony MusicTrustbank愛料理等,產業不但跨足教育、金融、電子商務、娛樂、遊戲、公部門等,使用者更有來自台灣、歐洲、北美、拉丁美洲等。

免費的 Cloudflare 夠用嗎?

免費的 Cloudflare 已經提供了最重要的 CDN 與抗 DDoS 攻擊的功能,因此如果你跟我一樣是部落客,或是個人使用者、一人公司,那麼建議直接使用免費版即可。

但如果你是要將公司的網站與 Cloudflare 串接,那則可以根據需求,升級成不同的方案與服務。

Cloudflare 會影響 SEO 嗎?

由於 Clouflare 是透過 CDN 將網站進行快取,並將各資料儲存於遍布於全球的資料管理,所以有些人可能會擔心「伺服器的位置會影響到網站排名」。

但根據 Clouflare 官方指出,Google 表示,伺服器所處的國家、地區並不重要,也不會因為將名稱伺服器更改為 Cloudflare 而影響到搜尋引擎結果頁(Search Engine Results Page,SERP)。

由此可見,Cloudflare 並不會造成網站 SEO 的負面影響,反之,若能善加利用 Cloudflare 所提供的 SSL、提高網站速度等服務,則能有機會提高 SEO 排名喔!

WordPress 可以使用 Cloudflare 嗎?

WordPress 不但可以使用 Cloudflare 提升網站安全性、速度,更可以直接在 WordPress 後台安裝 Cloudflare 官方外掛,如此非常方便。

結論

以上就是小豆使用 Cloudflare 的實際經驗與詳細介紹啦。

雖然 Cloudflare 所使用的技術,對我而言是很新穎,也是第一次接觸的,比如 CDN、雲端運算等,但仔細研究後,小豆認為這些科技真的很酷,若能運用得當,不但能提升生活的便利性,也能讓網路世界變得更安全。

因此,如果你準備要架設網站,或是已經擁有網站,那麼絕對不要錯過 Cloudflare 唷!


喜歡自學如何利用科技讓生活變得更美好...

我是站長小豆 Jane Hsieh,雖然現在就讀社會系所、沒有資訊背景、不會寫任何程式,但我對科技很有興趣。

喜歡利用課餘時間自學研究如何利用網路工具讓生活變得更美好的工作方法!

  • 被動收入:如何架設網站,並利用聯盟行銷以建立被動收入
  • 生活管理:如何利用網路工具管理時間與專案
  • 自我成長:如何利用網路平台自學課業以外的知識 ( 我上過的線上課程評價 )

因此希望可以透過「小豆說故事」,分享我所學到的內容,以及我實際操作的經驗。

如果資訊有誤或有任何問題,歡迎在底下留言,我很樂意跟大家一起互相交流。

如果你喜歡我的文章,歡迎分享給需要的人,讓更多人看到我的文章。

如果你對時間管理的內容有興趣,下方有我利用 Evernote 的 11 個筆記大全,歡迎免費索取

本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明

文章引用請來信詢問,否則將保留法律追訴權。


6 thoughts on “【圖文攻略】Cloudflare教學:免費提升網站速度與安全性”

  1. 謝謝版主分享,網路資源強大又方便,但也造成了很多惡意程式的出現,之前還沒有想過寫文章也會被惡意登入Q口Q
    不知道除了自架網站以外,痞客邦之類的是不是也適用Cloudflare呢?

    1. Miley 您好 🙂

      據我所知,如果你是使用免費的部落格,比如痞客邦、Blogger 等,是無法使用 Cloudflare CDN 的喔!

      因為 CDN 服務主要是透過 DNS 的功能,把網站內容分配到全球的 Cloudflare CDN 服務節點中,等有需要時,CDN 則會再把事先儲存的靜態檔案返回給用戶,如此便能提高網站的速度。

      所以如果想要使用 CDN 服務,先決條件是你必須要先擁有自己的網域名稱。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

小豆 Jane

小豆 Jane

I will be back soon

小豆 Jane
Hi 我是小豆 👋

若有任何問題,歡迎直接與我聊聊,我會盡快回復你!
Messenger