功能寫完後,最後一步就是把整個網站丟到正式環境。這次我選擇的部署方式非常簡單、速度又快: Cloudflare Pages。它不用自己架伺服器、不用設定 Nginx,只要把前端打包後丟上去, Cloudflare 就會自動幫我處理 CDN 與 HTTPS,非常有效率。
原因很簡單:
對這種「純前端的 IP 查詢工具」來說,Cloudflare Pages 幾乎就是最佳選擇。
登入 Cloudflare → Pages → Create application → 選擇 Continue with GitHub。
接著選擇專案的 github 地址,Cloudflare 就會開始部署。
幾秒後你就會看到建置成功,並且獲得一個臨時網址。
之後只要去設定裡面把 Build command 改成 npm run build,
Output directory 改成 build,就能自動打包 React 專案。之後上傳就可以自動打包並部署了。
一開始 Cloudflare Pages 會給你一個類似 xxx.pages.dev 的網址, 但我希望網站看起來更專業,所以我把自己的網域綁上去。
點進你 Pages 專案 → Custom Domains → Add Domain → 輸入自己的網域。
Cloudflare 會自動幫你設定 DNS,只要按確認就完成了。
最後我打開自己的網域,看到整個 IP 查詢網站順利跑起來,速度快、延遲低, 而且還自動套 HTTPS,整個質感直接提升。
這一章的重點就是:Cloudflare Pages 超級省事,對這種工具型網站完全剛好。 不用伺服器、不用設定反向代理、不用管憑證,一鍵就能讓作品上線。
至此,這個「從零開始做一個 IP 查詢網站」的系列正式完結。 雖然只是一個小作品,但完整走了一輪從環境、功能、API、廣告到部署的流程,也是很有成就感。



