從零開始製作一個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教學


相關文章
同一個測驗,我隔三年重寫了一次
同一個測驗,我隔三年重寫了一次
ricky - 2026-08-23T02:50:34.654532Z
2023 年寫的三個線上測驗,2026 年整個重寫。同一份題目、同一個作者,差別不在技術:當初沒問過「他們在什麼情況下用」,而課堂上一群人拿手機填,在程式碼裡留下了一頁到底、id 重複、把觸控目標縮小...
把流程寫進工具,而不是寫進腦袋
把流程寫進工具,而不是寫進腦袋
ricky - 2026-07-09T02:05:00Z
版本號手改的日子裡,我踩過三種坑,而它們都不是技術問題,是知識存放位置的問題。從自動化、預設值到「移除選項」,談談一人工作室為什麼也需要工程文化,以及工具擋不住的那一類錯。
退訂連結不該把 email 放進網址
退訂連結不該把 email 放進網址
ricky - 2026-08-22T09:12:12.915412Z
退訂連結的資安:用不帶 email 的隨機 token,加 GET 確認 / POST 執行的兩段式,防止任意退訂別人與掃描器誤觸。
訂閱電子報
隨時掌握最新的創業故事與設計開發過程
內容包含來自麒航團隊的日常分享、專業知識與工具推薦,助你了解更多創業背後的思維與技術。
麒航私房推薦
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: --
創業實驗筆記 - Clelereve Blog | 從零開始製作一個ip查詢網站-第五章 專案部署到 Cloudflare Pages | Clelereve Blog