說明
Ruby on Rails 專案完成且部署到 Heroku 後，想要有一個專屬 Domain Name 網址並有 HTTPS 的話，本文以 Freenom 購買 Domain 網址，在 Cloudflare 進行 CDN 及 DNS 設定為例。
Heroku、Cloudflare、Freenom 是什麼？
Heroku
Heroku 是一個支援多種程式語言的雲平台即服務。Heroku 作為最元祖的雲平台之一，從 2007 年 6 月起開發，當時它僅支援 Ruby，但後來增加了對 Java、Node.js、Scala、Clojure、Python 以及（未記錄在正式檔案上）PHP 和 Perl 的支援。基礎作業系統是 Debian，在最新的技術堆疊則是基於 Debian 的 Ubuntu。更重要的是 Ruby 程式語言的發明之父松本行弘（日文：まつもとゆきひろ，網路上大家通常稱他 Matz）也在這上班。
出處：維基百科
Cloudflare
Cloudflare 是一間總部位於舊金山的美國跨國 IT 企業，以向客戶提供基於反向代理的內容傳遞網路（Content Delivery Network, CDN）及分布式域名解析服務（Distributed Domain Name Server）為主要業務。Cloudflare可以幫助受保護站點抵禦包拒絕服務攻擊等網路攻擊，確保該網站長期在線，同時提升網站的效能、載入速度以改善訪客體驗。
出處：維基百科
Freenom
Freenom 是世界上第一個也是唯一一個免費功能變數名稱的供應商，運用最近的網路建設和託管技術，打破了壁壘，整合了免費的功能變數名稱，這使得任何企業或個人不花一分錢就可以建立網站和目錄。
出處：公司介紹
開始前
你要有：
- Heroku 的帳號密碼 (上面要有已部署好的專案)
- Freenom 的帳號密碼
- Cloudflare 的帳號密碼
備註：以下說明，皆在登入 Heroku、Freenom、Cloudflare 狀態下操作
如何設定 Heroku、Freenom、Cloudflare
1. 先到 Freenom 挑一組喜歡的 Domain 購買
文章以「this-is-test.tk」為例
2. 在 Heroku 首頁點選該專案的 Settings，先確認部署的專案能正常執行，以下兩種方法將 Domain 加入(擇一即可)
3-1. 在 Heroku 網頁點選「Add domain」輸入「買的 domain」，例如：「this-is-test.tk」
3-2. 在專案目錄的終端機輸入如下
(已做 3-1. 可省略此步驟)
1
2
3
4
5
6
7
8# 記得先切換到該專案資料夾
$ heroku domains:add <你買的domain>
# 範例
$ heroku domains:add this-is-test.tk
# 接著回 Heroku 網頁確認是否已加入
4. Cloudflare 網頁點選「+Add a Site」
5. 輸入購買的 Domain
6. 選 Free 接著下一步
7. 輸入 DNS 設定 (後面說明)
8. 設定如下，確認無誤點「Continue」
| Type | Name | Value | TTL |
|---|---|---|---|
| CNAME | <你買的 Domain> | <原本 Heroku 網址> | Automatic |
| CNAME | www | <你買的 Domain> | Automatic |
範例如下：(此範例連結之後會失效)
| Type | Name | Value | TTL |
|---|---|---|---|
| CNAME | this-is-test.tk | test-freenom-and-cloudflare.herokuapp.com | Automatic |
| CNAME | www | this-is-test.tk | Automatic |
9. 確認無誤後點「Done, check nameservers」
10. 複製這 2 個 Nameserver，在 freenom 會用到
可能會與我的不同
| Nameserver 1 | Nameserver 2 |
|---|---|
| dara.ns.cloudflare.com | scott.ns.cloudflare.com |
11. 在 freenom 網頁設定 Nameserver
流程：
freenom → Services → My Domains → Manage Domain → Management Tools → Nameservers → User custom nameservers(enter below) → 輸入 cloudflare 的 Nameserver → 點「Change Nameservers」
12. 將 Cloudflare 的 Nameserver 貼在 freenom
可能會與我的不同
| Nameserver 1 | Nameserver 2 |
|---|---|
| dara.ns.cloudflare.com | scott.ns.cloudflare.com |
13. 設定成功畫面如下
14. 回 Cloudflare 點「Re-check now」
15. 在 Cloudflare 首頁會看到更新中，等待同時，先把 HTTPS 設定開啟
16. Cloudflare 之後若要改 DNS 可在此調整
17. 在 SSL/TLS 的 Edge Certificates 設定中，啟動「Always Use HTTPS」
18. 在 SSL/TLS 的 Overview 中，設定成「Full」
19. 回 SSL/TLS 的 Edge Certificates 中，Status 目前為「Pending Validation」
等它從黃燈變綠燈，所需時間短則 10-30 分鐘，長則 1 天左右
人品好壞就看這次了
20. 經過漫長等待，變綠燈時，網址就能瀏覽囉
測試下來約 2 小時左右才變綠燈
小結
寫這篇真的是漫長的等待，後面把 HTTPS 設定完成後，再來就是被動地等待，前面只要設定正確，時間會證明一切的~~