上一篇文我們講到，透過架設NGINX並做反向代理，就能夠建立自己的LINE網頁版，而且都是只需要前端就能夠完成，不需要後端程式，這種服務就很適合放到靜態網站託管，一樣在前面再掛一層反向代理即可，剛好Cloudflare都有提供這些功能，我們可以用Cloudflare Workers來實作反向代理，並將HTML託管在Cloudflare Pages上。結構圖如下，可以比較看看跟上篇NGINX的差別。我們這邊需要一個在Cloudflare上託管的Domain，以下操作接使用Cloudflare免費方案。
使用本方法就能夠完全不用伺服器，就架設好LINE服務，而且完全免費！
本篇的Demo網址：https://line.twcanhelp.me/
將 HTML 放到 Cloudflare Pages
這一步是為了部署HTML靜態網站，若是Workers使用我已經部署好的https://line-web-client.pages.dev/，可以跳過此步驟。
Cloudflare Pages是一個靜態網站託管的服務，類似Github Pages的服務，不過比他還更強、功能更多，這邊就不多介紹，之後再寫教學。
- 先從Fork一份Github原始碼到自己的Github帳號下
- 到Cloudflare Dashboard新增Pages，選擇
連線至Git
3. 將你的Github帳號加入授權，選擇Fork回來的專案
4. 組建設定將輸出目錄改為html，就可以開始部署網站
5. 部署完，會產生一個連結，我這邊是https://line-web-client.pages.dev/
這時候會發現這個連結點進去沒辦法登入，QRcode也顯示不出來，因為我們還沒掛反向代理上去。
在 Cloudflare Workers 設定反向代理
- 在Workers這邊點選建立服務
2. 建立服務選擇 HTTP 路由器
3. 點選 Worker的快速編輯
4. 將我提供的Worker程式碼貼到左邊，並將程式碼中line-web-client.pages.dev，改成剛剛上面Cloudflare Pages的Domain，這時候右邊就可以即時預覽結果，這也能夠正常操作LINE
5. 再來我們為這個Worker加上Domain就完成了
除錯
- 520 Error
瀏覽Worker的正式服務網址（XXX.workers.dev），發現竟然一直轉圈，沒辦法使用，原來是我們的API會噴520，但是測試模式正常啊！？
會這樣出錯是因為LINE的後端也是使用Cloudflare CDN，HTTP2使用的header會衝突，所以要關閉Domain的HTTP2設定。
2. XHR Pending Error
在測試的時候發現，有時候會突然沒辦法再收到新的訊息，原因在於Worker資源有限，有時候API會失敗，我就在shim.js加上八秒的timeout時間，timeout後會重新抓取訊息。
3. Safari、Firefox不支援問題
上篇文提到過LINE使用了navigator.webkitTemporaryStorage語法，導致只有Chrome能夠使用，經過測試把相關語法刪除，並增加一些邏輯，就能夠在Safari、Firefox使用，已經修復該功能。
cloudflareworkers.com Demo
Cloudflare 很佛心的提供線上DEMO頁面cloudflareworkers.com，也可以把打好的worker javascript分享給別人，只要把上面提到的JS語法貼進去就好，這邊把我的連結分享給大家，可以上去使用LINE，也可以嘗試看看修改worker語法。
LINE DEMO on cloudflareworkers.com
另外在網址加上?hide_editor可以隱藏左邊編輯器
LINE DEMO on cloudflareworkers.com hide editor
結語
相較於上一篇需要自己架設VM，使用Cloudflare Workers + Cloudflare Pages就能夠完全免費的達到一樣的效果，差別在於把NGINX的功能搬到Workers上，不得不佩服Cloudflare真是間佛心公司。
補更：由於被LINE查水表了，Repo就不公開了