故事是這樣的，我原本有個用 Vue 寫的靜態網站架在學校的某個個人網頁上，但是一畢業就會消失了(所以這個網站不見很久了)，最近突然想把他撿回來，不然很可惜。
於是就直接上雲吧。
Serverless
這裡先提一個有趣的技術叫 server-less，就是你不用花心思 買 server, 管 server, 或者是 維持你的 nginx 的 container 一直在運作，CDN 商會幫你解決。
CDN 是 content delivery network，就是把你的網頁 resource 丟到全世界各地的 server，
第一個優點是 loading 速度會變快(server 跟你的距離變短)
第二個優點是即使其中一個 server 死亡，別人還是可以存取
當然像 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/
總之看到想要的就信用卡刷下去就對了
CDN 初始化
然後把 goDaddy 的網域託管到 CDN 下，這次我選擇 Cloudflare
設定上是 goDaddy > DNS > Manage Zone > Search xxx.tw(最左圖) > 把自己網域的 Nameservers 修改成 Cloudflare 的 Nameserver(中圖)
然後 cloudflare > login > Add site > xxx.tw> 過一兩分鐘 > 就可以看到設定成功圖(最右邊的)
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 也使用更少。(官方文件)
先開好 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.tw 的 project_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 支持作者
謝謝大家
