CDN – 記下來

使用 Cloudflare AddToAny Share Buttons 來分享你的網站

黃小蛙 — Sun, 10 Mar 2019 12:04:35 +0000

記下來這個部落格一直都沒有開啟分享的功能，是因為 Worpdress 的 AddToAny Share Buttons 套件在小蛙的 theme 會一直出問題，索性就不放了，不過今天在 Cloudflare 上看到一個功能，覺得有趣馬上試用看看，效果很好，這篇記錄一下給有需要的人參考。

Cloudflare 之前有介紹過是一套非常強大的免費 CDN，算起來也很佛心，免費版本已經提供非常多好用的功能了，今天小蛙要再來講它裡面有一個叫做 Apps 的功能。

登入 Cloudflare 之後，進入要管理的 Site 之後，上方選單中的最右邊的 Apps，進去之後搜尋 Share 就可以看到 AddToAny Share Buttons 的 App 可以安裝

小蛙安裝過了有點懶得刪掉再重新設定一次，下面拿另一個套件的畫面來放，點選 Preview on your site

進入下一個畫面之後會看到切割成左右兩邊，右邊是網站的預覽，左邊是一些設定

Buttons type 是設定你要浮動 Floating 或是固定在某處 Inline，Vertical bar 跟 Horizontal bar 分別是垂直的跟水平的，因為電腦版頁面比較寬，因此適合垂直放在最邊邊，當然還是要視每個人狀況而定，一般手機板左右比較窄，因此設計成分享按鈕為水平的，這邊小蛙的設定是電腦版的時候，在網站左側垂直浮動，在手機版的時候則變成底部中央浮動。

接著是按鈕設定，顏色可以選擇預設的或是自訂，下面分別是按鈕大小、圓角程度、按鈕間距、跟按鈕離底部的距離等設定，把下面的 Show sharing options 打勾進行按鈕類別的設定。

如果 Service 下拉沒有看到自己要的服務，可以點選 AddToAny service code 那行藍字，過去找自己要的服務，點進去之後可以看到 code 是什麼，照著填上來就可以了，像這邊小蛙去查了 Line 的 code 是 line，Service 選 Other … 然後 Service code 填入 line 就會出現 Line 的分享按鈕了。

最後下面留一個 Service: AddToAny 的話，就會出現一個 + 符號，目的是如果使用者沒有找到自己要的分享工具，可以透過這個 + 點進去找，最後一行如果留空白，會自動把當前頁面分享出去。

所有步驟完成之後，點選左下角的 Install on all pages，就會安裝在網站上每個頁面的左側。

什麼？你照著設定了還是沒有？那很有可能是你的網站只是透過 Cloudflare 代管，但是並沒有使用 Cloudflare 的 CDN 服務喔！來打開它吧！

最上方選單，點選 DNS 選單

點選紅框部份，變成橘色就表示目前該網址服務有通過 CDN，有通過 CDN 的服務 Cloudflare 才有辦法幫忙加上你所安裝上去的 Apps 喔！

不過還是有點小小的問題，小蛙還不知道怎麼處理，不過沒有什麼太大的影響，想說就先放著，就是 … 它連後台也加上了，變成這個分享按鈕會擋到自己的選單 …

Cloudflare 系列文章：

這篇文章使用 Cloudflare AddToAny Share Buttons 來分享你的網站最早出現於記下來。

使用 Cloudflare 代管你的域名

黃小蛙 — Sun, 25 Nov 2018 09:17:12 +0000

上一篇文章為自己申請一個域名 – HiNet 為例記錄怎麼申請一個自己的域名，而小蛙習慣將所有的域名都丟給 Cloudflare 代管，這樣不管小蛙在哪裡申請域名，管理的介面都是統一在 Cloudflare 比較方便。

域名代管設定

如果沒有 Cloudflare 帳號的話先去註冊一個吧！登入後點選右上角的 Add a Site。

填入要加入的域名，這邊不限於 HiNet 註冊的，如果你到 Godaddy 或是其他地方註冊的只要是屬於自己可管控的域名，都可以加入進來，之後統一由 Cloudflare 介面管理。

這個網域之前小蛙已經加過了，所以有些畫面可能不太一樣，要將 HiNet 域名交由 Cloudflare 代管，接著到 HiNet 頁面依自己的網域類型選單下進行設定（如果不是在 HiNet 申請的，就到申請的地方設定），這步驟可以後面再做，後面 Cloudflare 會有提示頁面教使用者怎麼設定

在 DNS Server Name 中填入may.ns.cloudflare.com、pete.ns.cloudflare.com

如果網域生效並且設定正確就可以看到這個畫面，有時候 HiNet DNS 沒有那麼快生效，如果沒辦法正常使用的話，就要再等一等了

選取方案，小蛙是選擇 FREE 免費方案

方案確認說明，沒選錯的話直接 Confirm 就好

看到下面這個畫面就完成了

繼續往下設定

如果下方一片空白的話，至少要加入一個 A record 並且指定到自己的主機位址(IP)，Status 的部份是否要開啟，橘色表示開啟，要透過 CDN 功能，點一下變成灰色代表不要通過 CDN 功能，僅僅需要使用 DNS 代管功能。

開啟 Windows 的 cmd 使用 ping 看看，如果可以 ping 到自己剛剛設定的 A record 表示設定完成了。當打開 CDN 就可以發現得到沒看過的 IP，當雲設定成灰色（關閉 CDN）再 ping 一次就會恢復成原本自己設定的主機 IP，這邊要注意的事情是，如果你的服務有需要拿到使用者真實 IP 的話，就不可以把橘色的雲打開，不然只會拿到一堆 CDN 的 IP，而不是真實的使用者位置。

[wbcr_html_snippet id="7903"]

網站架設系列文章：

這篇文章使用 Cloudflare 代管你的域名最早出現於記下來。

Cloudflare – 超強大的免費 CDN (?)

黃小蛙 — Sun, 16 Sep 2018 14:52:21 +0000

相信只要提到 CDN: Content Delivery Network，有自己架站的部落客應該都會知道大名鼎鼎的 Cloudflare。小蛙從知道 cloudflare 以來，也用好長一段時間了，最近遇到一些速度上面的問題，在這裡記錄一下。

Cloudflare 本身是 CDN 的功能加上一些優化，當然 CF 也很善意提供免費方案，小蛙一直以來都用免費方案，直到最近 … 小蛙發現部落格速度怎麼變的那麼慢，於是很習慣性的 ping 了一下 noter.tw，我的天啊 … 158ms，這 … 是 CDN 失效了嗎？仔細看 IP 是 CDN 沒錯，那怎麼會這樣呢？大驚之下，開始瘋狂 Google。

查了一段時間之後發現這篇如何透過 CloudFlare 網站主機節點變成 TPE 直連，原來是大企業間的恩怨導致的，看起來是無解了，但是小蛙遇到一個很奇特的狀況，在同樣的環境下 ping noter.tw 大約是 150 ~ 160ms，而 ping crazyall.net 卻是 20ms，換一個環境 ping 又變成兩個都是 150 ~ 160ms，完全丈二金剛摸不著頭緒。

看到上面那篇文章之後，小蛙一開始搞錯一件事情，誤會成「伺服器必須要有 IPv6」，因為小蛙之前的主機有 IPv6 現在的沒有，以為是這個原因造成的，於是花一些錢跟 VPS 申請搬遷到有 IPv6 的機房，過程中越想越不對 … CDN 跟我 VPS 有沒有 IPv6 的相關性是 … ?

小蛙回到住處後，想到之前 ping noter.tw 的時候會出現 IPv6 的位置，表示住處的網路有支援 IPv6，而 VPS 還沒有完成搬遷，想說先來試試看把 CF 裡面的 IPv6 打開，一開之後就確認自己真的是搞錯了，因為 CF 預設 IPv6 是開啟的狀態，當使用者在支援 IPv6 的環境下，就會走 IPv6 透過台北的機房，如同上述文章提到的，直接看下圖，在只有 IPv4 環境下就會走到美國的機房，比直接連去小蛙的主機還要慢，當有 IPv6 環境的時候，ping 值整個大幅降低！

這篇先到這邊，之後會記錄一篇怎麼使用 CF 來代管 DNS。

Cloudflare 系列文章：

網站架設系列文章：

這篇文章 Cloudflare – 超強大的免費 CDN (?) 最早出現於記下來。