測驗：Cloudflare Pages 自訂網域與環境變數設定
共 5 題，點選答案後會立即顯示結果
1. 設定自訂網域時，需要在 DNS 新增哪種類型的記錄？
2. 在 Vite 專案中，環境變數必須使用什麼前綴才能在前端程式碼中讀取？
3. Cloudflare Pages 的 SSL 憑證需要如何處理？
4. 在 Cloudflare Pages 設定環境變數後，需要做什麼才會生效？
5. Cloudflare Pages 的 Production 和 Preview 環境有什麼差異？
一句話說明
部署完成後，你會想把 xxx.pages.dev 換成自己的網域，還要設定 API Key 等機密資料，這篇教你怎麼做。
這篇你會學到
- 將自己的網域綁定到 Cloudflare Pages
- 正確設定 DNS 記錄
- 用環境變數管理 API Key 等敏感資訊
前置知識
- 已完成系列第 2 篇：你的專案已經可以透過
xxx.pages.dev訪問 - 擁有自己的網域（自訂網域部分為選用）
自訂網域設定
為什麼需要自訂網域？
Cloudflare Pages 預設給你的網址是：
你的專案名.pages.dev
Code language: CSS (css)這個可以用，但如果你想要：
- 更專業的形象（
app.yourcompany.com） - 讓使用者更容易記住
- 保持網址一致性（換平台也不用改網址）
那就需要設定自訂網域。
設定步驟
步驟 1：進入專案設定
Cloudflare Dashboard → Pages → 你的專案 → Custom domains
步驟 2：新增網域
點擊「Set up a custom domain」，輸入你的網域：
app.example.com
Code language: CSS (css)建議用子網域（如
app.example.com），不要用根網域（example.com），設定比較簡單。
步驟 3：設定 DNS
Cloudflare 會告訴你需要加一筆 CNAME 記錄：
| Type | Name | Target |
|---|---|---|
| CNAME | app | 你的專案名.pages.dev |
DNS 設定詳解
什麼是 CNAME？
CNAME = 「這個網址其實是指向另一個網址」
白話說：
app.example.com → 你的專案名.pages.dev → Cloudflare 伺服器
Code language: CSS (css)當使用者訪問 app.example.com，DNS 會自動轉到 Cloudflare Pages。
網域在 Cloudflare 的情況
如果你的網域本來就在 Cloudflare 管理：
Cloudflare 會自動幫你加 DNS 記錄，點確認就好！
網域不在 Cloudflare 的情況
需要去你的 DNS 提供商（如 GoDaddy、Namecheap、Gandi）手動加記錄：
步驟：
- 登入 DNS 提供商
- 找到 DNS 管理
- 新增 CNAME 記錄
Type: CNAME
Name: app（或你要的子網域）
Value: 你的專案名.pages.dev
TTL: Auto 或 3600
Code language: HTTP (http)DNS 生效時間
一般：幾分鐘到幾小時
最長：24-48 小時（少見）
可以用這個指令檢查 DNS 是否生效：
# 查詢 CNAME 記錄
nslookup -type=CNAME app.example.com
# 或用 dig（Mac/Linux）
dig app.example.com CNAME
Code language: PHP (php)自動 SSL 憑證
什麼是 SSL？
SSL = 網址前面的那個鎖頭 = https://
Code language: JavaScript (javascript)沒有 SSL：
http://app.example.com ← 不安全，瀏覽器會警告
Code language: JavaScript (javascript)有 SSL：
https://app.example.com ← 安全，有鎖頭
Code language: JavaScript (javascript)Cloudflare 自動處理
好消息：你不用做任何事！
DNS 驗證通過 → Cloudflare 自動申請 SSL → 自動續期
大約 15 分鐘後，你的自訂網域就會有 HTTPS 了。
檢查 SSL 狀態
在 Cloudflare Dashboard 可以看到：
Custom domains → 你的網域 → Active（綠燈）
如果卡在 Pending，通常是 DNS 還沒生效，等一下就好。
環境變數設定
為什麼需要環境變數？
你的 React 專案可能會用到：
- API Key
- 後端 API 網址
- 第三方服務金鑰
這些東西不應該寫死在程式碼裡：
// 不好：API Key 寫死，會被看到
const API_KEY = "sk-1234567890abcdef";
// 好：從環境變數讀取
const API_KEY = import.meta.env.VITE_API_KEY;
Code language: JavaScript (javascript)Production vs Preview 環境
Cloudflare Pages 有兩種環境：
| 環境 | 說明 | 網址 |
|---|---|---|
| Production | 正式版，main branch 部署 | 你的專案.pages.dev |
| Preview | 預覽版，其他 branch 部署 | commit-hash.你的專案.pages.dev |
你可以針對不同環境設定不同的變數：
Production: VITE_API_URL = https://api.example.com
Preview: VITE_API_URL = https://staging-api.example.com
Code language: JavaScript (javascript)設定步驟
步驟 1：進入環境變數設定
Cloudflare Dashboard → Pages → 你的專案 → Settings → Environment variables
步驟 2：新增變數
點擊「Add variable」：
Variable name: VITE_API_KEY
Value: 你的 API Key
Environment: Production（或 Preview，或兩者都加）
步驟 3：重新部署
環境變數是在「build 時」注入的，所以加完要重新部署才會生效！
在 Deployments 頁面點「Retry deployment」即可。
React 中讀取環境變數
Vite 專案（最常見）
Vite 有個重要規則：
只有 VITE_ 開頭的變數，才能在前端程式碼中讀取！
設定：
VITE_API_KEY=sk-xxxxx ← 前端可以讀
API_KEY=sk-xxxxx ← 前端讀不到
讀取方式：
// Vite 專案用 import.meta.env
const apiKey = import.meta.env.VITE_API_KEY;
const apiUrl = import.meta.env.VITE_API_URL;
console.log(apiKey); // "sk-xxxxx"
Code language: JavaScript (javascript)Create React App 專案
如果你用的是 Create React App（CRA）：
只有 REACT_APP_ 開頭的變數，才能在前端讀取！
設定：
REACT_APP_API_KEY=sk-xxxxx
讀取：
// CRA 專案用 process.env
const apiKey = process.env.REACT_APP_API_KEY;
Code language: JavaScript (javascript)完整範例
假設你要呼叫一個天氣 API：
Cloudflare 環境變數設定：
VITE_WEATHER_API_KEY = abc123
VITE_WEATHER_API_URL = https://api.weather.com
Code language: JavaScript (javascript)React 程式碼：
// src/api/weather.js
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;
const API_URL = import.meta.env.VITE_WEATHER_API_URL;
export async function getWeather(city) {
const response = await fetch(
`${API_URL}/weather?city=${city}&key=${API_KEY}`
);
return response.json();
}
Code language: JavaScript (javascript)常見問題排解
問題 1：環境變數是 undefined
症狀：
console.log(import.meta.env.VITE_API_KEY); // undefined
Code language: JavaScript (javascript)檢查清單：
[ ] 變數名稱有沒有 VITE_ 前綴？
[ ] 設定後有沒有重新部署？
[ ] 是不是設在錯誤的環境（Production vs Preview）？
Code language: CSS (css)問題 2：自訂網域一直 Pending
可能原因：
- DNS 記錄設定錯誤
- DNS 還沒生效
檢查方式：
# 確認 CNAME 是否正確
nslookup -type=CNAME app.example.com
# 應該要看到
app.example.com canonical name = 你的專案.pages.dev
Code language: PHP (php)問題 3：SSL 憑證錯誤
症狀： 瀏覽器顯示「您的連線不是私人連線」
解法：
- 等待 15-30 分鐘（SSL 憑證申請需要時間）
- 確認 DNS 設定正確
- 嘗試清除瀏覽器快取
問題 4：Preview 環境看不到新的環境變數
原因： Preview 部署用的是 Preview 環境的變數，不是 Production 的。
解法： 確認你在兩個環境都設定了變數，或者選擇「All」套用到所有環境。
Vibe Coder 檢查點
看到 Cloudflare Pages 設定畫面時，確認以下幾點：
自訂網域：
[ ] CNAME 記錄指向正確的 .pages.dev 網址
[ ] SSL 狀態顯示 Active
[ ] 可以用 https:// 訪問
環境變數：
[ ] 敏感資料（API Key）放在環境變數，不是程式碼
[ ] 變數名稱有正確的前綴（VITE_ 或 REACT_APP_）
[ ] 設定後有重新部署
Code language: JavaScript (javascript)本篇小結
| 設定項目 | 重點 |
|---|---|
| 自訂網域 | 加 CNAME 記錄指向 .pages.dev |
| DNS 生效 | 幾分鐘到幾小時，用 nslookup 檢查 |
| SSL 憑證 | Cloudflare 自動處理，不用管 |
| 環境變數 | VITE_ 前綴才能在 Vite 專案讀取 |
| 生效方式 | 設定後要重新部署 |
下一篇預告
第 4 篇我們會介紹如何處理 React Router 的路由問題，以及部署後的常見錯誤排解。
進階測驗：Cloudflare Pages 自訂網域與環境變數設定
測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。
共 5 題，包含情境題與錯誤診斷題。
1. 你的網域是在 GoDaddy 購買的，現在要綁定到 Cloudflare Pages 專案。你應該怎麼做？ 情境題
2. 小明的 Vite 專案部署後，程式碼中讀取環境變數的結果是 undefined。他的設定如下： 錯誤診斷
// Cloudflare 環境變數設定
Variable name: API_KEY
Value: sk-xxxxx
// React 程式碼
const apiKey = import.meta.env.API_KEY;
console.log(apiKey); // undefined
3. 你正在開發一個需要呼叫後端 API 的 React 專案。正式版使用 api.example.com，測試版使用 staging-api.example.com。如何在 Cloudflare Pages 設定？ 情境題
4. 小華設定了自訂網域 app.mysite.com，但一直顯示 Pending 狀態。他執行以下指令檢查： 錯誤診斷
$ nslookup -type=CNAME app.mysite.com
Server: 8.8.8.8
Address: 8.8.8.8#53
*** Can’t find app.mysite.com: No answer