把我的Vue靜態網頁上雲Cloudflare

linnil1
7 min readFeb 28, 2021

--

故事是這樣的,我原本有個用 Vue 寫的靜態網站架在學校的某個個人網頁上,但是一畢業就會消失了(所以這個網站不見很久了),最近突然想把他撿回來,不然很可惜。

於是就直接上雲吧。

Serverless

這裡先提一個有趣的技術叫 server-less,就是你不用花心思 買 server, 管 server, 或者是 維持你的 nginx 的 container 一直在運作,CDN 商會幫你解決。

CDN 是 content delivery network,就是把你的網頁 resource 丟到全世界各地的 server,

第一個優點是 loading 速度會變快(server 跟你的距離變短)

第二個優點是即使其中一個 server 死亡,別人還是可以存取

Copied from https://www.cloudflare.com/zh-tw/learning/cdn/what-is-a-cdn/

當然像 database, ftp 之類的有順序性,有 state 就要自己開 server 自己放。不過我的網頁沒有用到後端,所以沒關係。

首先 Vue build

拿到 code 的第一件事,就是把他跑起來,跑不起來的話。好的,總之我把原本我寫的 code 全部升級到 Vue3.0 。(話說 vue3.0 setting 我使用起來比之前簡單很多) 最後 yarn build 可以跑出資料夾 dist/,裡面的 SPA 可以用 firefox 開起來。

SPA (Single Page Application) 是個靜態網頁,當點進去後會一口氣把所有資源 loaded 進來,跳頁 = 執行 javascript 把頁面內容 render 出來。可以看這個介紹 https://ithelp.ithome.com.tw/articles/10160709

第二 決定你要什麼網域

網域是什麼,有哪些可以選,請看這篇 https://affnotes.com/buy-domain-how-to/

總之看到想要的就信用卡刷下去就對了

godaddy 介面

CDN 初始化

然後把 goDaddy 的網域託管到 CDN 下,這次我選擇 Cloudflare

設定上是 goDaddy > DNS > Manage Zone > Search xxx.tw(最左圖) > 把自己網域的 Nameservers 修改成 Cloudflare 的 Nameserver(中圖)

然後 cloudflare > login > Add site > xxx.tw> 過一兩分鐘 > 就可以看到設定成功圖(最右邊的)

goDaddy 跟 Cloudflare 介面

Cloudflare 只要流量沒有到,就會是免費額度,盡量用沒關係。至於其他設定,其實可以看到什麼東西就 on 下去 反正還沒綁信用卡,https, compression 有開就好了

有關 Cloudflare 的設定,這篇寫得不錯 https://weblai.co/cloudflare-tutorial/

設定 Cloudflare Workers

Workers 是 Cloudflare 的執行 code 核心所在,對靜態網頁說沒差。但是如果 你有 nodejs 的 code ,他會把每個 function 包成 V8 isolates 。在 request 很多的情況下,使用這一個個 isolates 會比起動 node process 還要快上許多,memory 也使用更少。(官方文件)

Copied from https://developers.cloudflare.com/workers/learning/how-workers-works

先開好 worker 跟他的 token

首頁 > Workers > Manage Worker > Get your API token > Create Token > Edit Cloudflare Workers Template > Yes

這個 API token 會在 wrangler config 的時候使用

Cloudflare Workers 設定檔

接下來原本的教學應該就會動了 https://developers.cloudflare.com/workers/learning/getting-started

事實上真正要設定的就是 wrangler.toml 這不到10行的設定而已

name = "your_project_name"      # Project 的名字
type = "javascript"
route = "project_name.xxx.tw/*" # 你的網站 URL
account_id = "" # account_id
zone_id = "" # zone_id 這兩個都會在 dash 首頁下方
[site]
bucket = "dist" # Vue 的 靜態資源
entry-point = "worker" # Backend code

這裡 Backend code 我用來做 Vue SPA 的 redirection 。SPA 只放在 xxx.tw,當 request xxx.tw/test1/test2 這樣會 404 ,Vue-router 文件中有示範要怎麼修正 https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

而在 Cloudflare 中,我們可以定義 FetchEvent 讓 query 往 root 打,最簡單的修正方式就是 wrangler generate worker之後 把 index.js 用這個覆蓋過去 https://gist.github.com/simevidas/d8ec51a51b05d4fabee6ddbe90c938ce

Deploy

先 preview 看看有沒有問題

wrangler preview

最後就直接 publish

wrangler publish

就可以在剛剛的 router 設定的 URL 看到了

我發現 DNS 還要再手動多增加一個 A record ,他的 name 是 project_name.xxx.twproject_name,IP 是可以 call 你 backend API 的 address,因為我沒有後端,所以隨便設,反正我剛剛 FetchEvent 裡面並沒有把 request 往這裡送

就這麼簡單

Conclusion

總結剛剛做的事

買 domain > 託管到 Cloudflare > 設定 Workers 跟 DNS record > 寫好 wrangler.toml > Publish

code 在這裡 https://github.com/linnil1/NTUMU_web (如果你需要的話,不過我之前 Vue 寫得很爛)

接下來可以串 github 的 CI/CD ,只要你 push ,Pipeline 就會幫你 build 好並 publish,不過我沒有要常常更新他,所以先放著,你可以先參考這個 github action 教學(中文)https://github.com/cloudflare/wrangler-action

最後也感謝 Dcard,我很久很久以前跟他們申請過台大武術.大平台.tw ,跟他們聯絡後,他們工程師也很快的把這個網址 Redirect 到我現在 URL https://ntu-martial-art.linnil1.me/

看完請 Clap 支持作者

謝謝大家

--

--

linnil1

目前做生物資訊與演算法,過去做過 Machine Vision(Deep learning),維護伺服器(k8s, docker),部分IOT(rpi, arduino)