從零開始製作一個ip查詢網站-第五章 專案部署到 Cloudflare Pages
Cloudflare Pages部署,React 部署,前端網站部署
Chris-
12 月 28,2025

功能寫完後,最後一步就是把整個網站丟到正式環境。這次我選擇的部署方式非常簡單、速度又快: Cloudflare Pages。它不用自己架伺服器、不用設定 Nginx,只要把前端打包後丟上去, Cloudflare 就會自動幫我處理 CDN 與 HTTPS,非常有效率。

為什麼用 Cloudflare Pages?

原因很簡單:

  • 部署快,通常 10 秒內就跑完
  • 自動產生 HTTPS
  • 全球 CDN 加速
  • 不用自己維護伺服器
  • 完全免費

對這種「純前端的 IP 查詢工具」來說,Cloudflare Pages 幾乎就是最佳選擇。

上傳到 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、廣告到部署的流程,也是很有成就感。

Tags:
Cloudflare Pages專案部署React教學


相關文章
用 Gmail 寄信自動化:教你申請應用程式專用密碼
ricky - 2025-11-28T14:09:23Z
完整教學 Google『應用程式專用密碼』設定流程:說明為何需要 App Password、如何啟用兩步驟驗證、申請 16 位專用密碼,以及使用情境(如系統寄信、Blog 通知信)。圖文步驟詳解,確保...
創業起點|開公司不是寫表單,而是做選擇
ricky - 2025-05-19T14:08:01Z
開公司不只是填寫申請書!這篇文章分享了創業者在設立公司過程中,從公司命名、類型選擇(行號 vs. 有限公司 vs. 股份有限公司)、到稅務考量的實戰經驗與建議。如果你正準備創業,這篇避坑指南絕對值得一...
從零開始製作一個ip查詢網站-第三章 透過IP取得地理位置
chris - 2025-11-29T06:05:00Z
從使用者 IP 取得地理資訊不是難事,但要完整呈現城市、國家、緯度/經度就需要好用的 API 與前端實作。這篇文章示範如何使用 ipapi.co 取得位置資料,並在 React 裡動態顯示使用者所在位...
訂閱電子報
隨時掌握最新的創業故事與設計開發過程
內容包含來自麒航團隊的日常分享、專業知識與工具推薦,助你了解更多創業背後的思維與技術。
麒航私房推薦
Clelereve Blog LogoClelereve Blog LogoClelereve Blog Logo
廣告區
Clelereve Blog Logo
聯絡我們
任何合作或問題請洽:
clelereve@gmail.com
Follow us
Copyright © 2025 blog.clelereve.com - All Rights Reserved
Frontend Version: -- | Backend Version: --