如何打造.大平台.tw

由於最近大平台很夯,單純出於有趣 Dcard 買下了 大平台.tw,但又覺得這麼好玩的 Domain,不讓大家發揮創意很可惜!於是希望花了一點時間的時間做出簡單的 Domain Redirect 系統開放 subdomain 給大眾玩。

可以到:http://加入.大平台.tw/ 體驗看看

以下來跟大家分享 大平台.tw 架構的思路跟發展,希望能帶來給大家一點收穫。

分為三個部分跟大家介紹:

  1. Subdomain register
  2. DNS record manipulation
  3. Redirect server

Subdomain register

首先需要讓大家登錄 subdomain 跟要轉去的 URL,第一個想到的是 Google form。Google form 有提供 JSON API 出來,有以下兩種方式取得:

  1. Publish to Public
    可以參考: https://ctrlq.org/code/20004-google-spreadsheets-json (感謝 ly 大大分享)
    但當時在試的時候一直試不出來,似乎新的 form 已經失效了?於是暫時放棄這個方法。(如果有人成功歡迎告訴我!)
  2. Google API
    過去操作過幾次,對流程熟悉,但由於需要註冊許多資料手續有點繁雜,這次為了快速開發暫時放棄。
    可以參考 MrOrz https://github.com/g0v/HackTimeline/blob/gh-pages/js/spreadsheet.js

後來想到最近發現很好用的 Airtable ,介面相當強大,又有很友善的 API,於是採用。

介面強大的 Airtable

DNS record manipulation

最初 Domain 是在 Godaddy 買的,而選用 DNS hosting 一開始思考希望能自帶 SSL 憑證跟有很好的 API 可以操作 DNS record,於是選了 CloudFlare

CloudFlare API 可以參考:https://api.cloudflare.com/

但最後發現有 wildcard subdomain,於是就將所有 subdomain 都指向同一台主機即可不需要增添。

不過使用 wildcard subdomain 的壞處是沒辦法依賴 CloudFlare 的 SSL 憑證跟 Hosting 功能。

CloudFlare wildcard 設定

另外 CloudFlare 發 SSL 憑證最長需要 24 hr,若有急需的人請特別注意。

要在自己 Server 使用免費的 SSL 憑證的話可參考:Let’s Encrypt

Redirect Server

這裡的 Server 主要功能是辨識透過 hostname (可以想像成別人用什麼 domain 拜訪我) 造訪主機對應要導向哪裡。這裡一開始先嘗試了 node.js 實踐,koa 跟 express 分別可以透過下列語法得到 hostname。

於是我們在 terminal 嘗試了一下

發現得到一堆亂碼心理感覺一陣慌,原來是 Node.js 原生在處理時在解析 hostname 處理得不夠好。

於是馬上用 Go 嘗試一遍取得 hostname,發現會得到正確的結果。

Go 的嘗試使用 iris,文件沒有很完整,翻了 source 找到下面的方法

正當要用 Go 繼續開發時緊接著又發現,其實 Command Line 下雖然會是亂碼,但透過瀏覽器拜訪時其實都會幫你進行 IDNA 轉換 。

而進行 IDNA 轉換後的 domain,Node.js 依然也可以處理好,考量到 Airtable 原生有 Node.js SDK,於是繼續使用 Node.js 開發。

接著將程式分成兩隻下去寫:

  1. cron.js 定時從 Airtable 更新資料
    要注意如果有重複 record 要先來先到 (Airtable 的 form data 不能設 unique field 真麻煩…)
  2. server.js 負責處理 Request
    特別檢查是否來的 hostname 有對應的資料,沒有的話都導回 http://加入.大平台.tw

接著只要用系統的 cron job 每十分鐘 fetch 一次資料重 load 就可以囉!

範例代碼請見:https://github.com/kytu800/bigplatform.tw

以上是這次跟大家分享 如何打造.大平台.tw 的心得,我們下次見!

— — —

備註:

  1. 歡迎加入 Dcard 一起打造大平台 : )
  2. 歡迎 Follow Dcard Lab 看更多有趣的經驗分享!