科技/創新

Lovable 部署教學:網站發布、自訂網域與 Cloudflare 設定

資料查核:2026 年 10 月 23 日|適合初次發布網站、管理自訂網域與規劃外部部署的讀者。

在 Lovable 裡完成網頁後,接下來要處理的是發布版本、訪客權限、網域與功能驗收。這篇依官方文件整理操作順序,說明每一步要確認什麼,以及遇到問題時應先查哪一層。文中的網域均為格式示例;請使用自己有管理權限的測試網域。

快速答案:Lovable 做好的網站如何上線?

最簡單的方式,是開啟 Lovable 專案,點選編輯器右上方的 Publish,確認網址、存取權限及安全掃描後,再按 Publish。Lovable 會部署一份目前版本的快照,提供 你的專案.lovable.app 網址與 HTTPS。之後修改專案不會自動更新正式網站,需重新點選 Publish changes。如果要使用企業自己的網域,可在付費方案連接自訂網域。這兩個工作其實是不同層次:發布是把網站放到可連線的託管環境;網域設定是決定訪客如何找到它。

建議操作順序

Preview 檢查 → Publish 發布 → 自訂網域 → DNS 與 HTTPS → 功能、權限及 SEO 驗收。首次發布可先完成 Lovable 預設網址,再處理自訂網域。

完成標準: 公開網站應能由未登入工作區的瀏覽器開啟;限制存取的網站則應拒絕未獲授權者。兩者都要檢查首頁、內頁直連、手機版及實際提供的功能。若處理客戶資料,還必須另驗證資料授權。

部署選擇:先決定你要上線什麼

路線 網址 適合對象 重要限制
A.Lovable 直接發布 專案.lovable.app 作業展示、MVP、首次發布 網址由 Lovable 託管;預設訪問權限要確認
B.Lovable+自訂網域 launch.example.com 商業作品、企業活動網站 自訂網域需要付費方案與 DNS 設定權限
C.Lovable+Cloudflare DNS launch.example.com 既有 Cloudflare 網域 分清 DNS only 與代理兩種設定
D.Git 同步+外部託管 自選網域 專業團隊、需 CI/CD 必須先辨識 TanStack Start 或 React+Vite

初學者建議先完成 A;已有公司主網域者,再於獨立子網域完成 C。若沒有合規、主機控制或既有 CI/CD 等要求,不必一開始就搬離 Lovable。

事前準備:4 個必要條件

1.有一個可預覽的 Lovable 專案,至少包含首頁與可測試的功能。

2.有專案編輯者以上權限。部分企業工作區可能對正式發布另有限制。

3.如果要綁定網域,須有 Lovable 支援自訂網域的付費方案,並能管理該網域的 DNS。

4.準備不含個資的合成測試資料,例如任務名稱「整理示範清單」、優先順序「一般」、備註「僅供測試」。記錄本次要發布的頁面、功能及復原方法。

發布前先檢查資料與金鑰

公開網站的文字、圖片、下載檔案及前端程式都可能被訪客取得。示範時應使用獨立專案與合成資料,檢查頁面、瀏覽器標題、錯誤訊息及下載檔案,避免帶入客戶名單、公司內部網址、未公開業務資料或私人聯絡方式。若要製作操作圖片與影片,也要檢查帳號資訊、其他專案名稱、網址參數及通知內容。

API 私密金鑰應由後端安全保存及使用,不應寫入前端程式。以 VITE_ 開頭的變數會嵌入瀏覽器端建置結果,不能因為放在環境變數裡就視為保密。公開用的 publishable key 與具有高權限的 service-role/secret key 也不能混用。實際配置請依服務的權限模型逐項確認。參考 Lovable Secrets 說明。

步驟 01|檢查預覽,界定正式上線範圍

在 Lovable 開啟專案,使用 Preview 測試桌機與手機版。打開導覽連結,試填一份模擬資料。若有會員登入、付款或資料儲存,必須另外測試這些功能。先記下預計發布的網頁與功能清單。

預期畫面: 預覽頁能正常切換版型,使用者操作後有明確回饋。

驗收方式: 至少完成首頁、1 個內頁、1 項核心操作的測試,並記錄測試結果。

問題排除: 若預覽已經出錯,應先修正程式,不要以正式部署試運氣。若只有元件畫面、後端尚未設定,應將其定義為「靜態展示版」,不要宣稱有真實儲存或會員功能。

步驟 02|發布到 Lovable 預設網址

1.在專案編輯器右上方點擊 Publish。

2.確認 Website URL 建議的 .lovable.app 網址;需要時調整子網域名稱。

3.查看網站訪客設定。Public 代表任何持有網址的人都可開啟。依查核日官方文件,Free/Pro 也提供 Invite only,每個專案最多邀請 10 人;Business/Enterprise 另有 Workspace 與 Custom 等選項。實際可用權限還受工作區政策影響。網站訪客權限與專案編輯權限是不同設定。

4.閱讀 Quick scan 結果,優先處理重大風險。Quick scan 與較深入的 Deep scan 並非同一次檢查;若網站涉及資料庫或敏感流程,應另外檢查資料授權與應用程式安全。掃描結果不能代替完整安全審查。

5.確認後按 Publish,使用畫面提供的連結開啟網站。

預期結果: 看見 Your website is live 類似提示,獲得 .lovable.app 可連線網址,網頁採 HTTPS。

驗收方式: 使用無痕視窗或沒有登入工作區的裝置,確認存取權限符合需求;重新整理一個內頁,檢查圖片與按鈕正常。

問題排除: 顯示 Build errors need fixing 時,依提示修正建置錯誤;若按鈕無法按,檢查專案角色與工作區政策。修改後要使用 Publish changes,不能只停在 Preview。從 Publish 對話框發佈本身不消耗建置 credits;透過聊天要求發布可能計入一般建置用量。

按鈕名稱、角色與發布權限可對照 Lovable Publish 官方說明;安全掃描範圍可對照 Security overview。

步驟 03|接上自己的網域

在 Lovable 專案進入 Project → Settings → Domains,選擇 Connect existing domain,輸入示範子網域 launch.example.com。使用 Subdomain 模式,確認主機名稱無誤。系統可能提供 Entri 自動設定或手動設定;本教學選擇手動設定,便於確認 DNS 權限與風險。

變更前先記錄這個主機名稱原有的 DNS 設定及 TTL,確認記錄由哪一家 DNS 服務商管理。新增測試子網域通常不需要轉移註冊商或更換整個網域的名稱伺服器,也不要順便修改與本次網站無關的 MX、郵件驗證或其他服務記錄。

一般 DNS only 模式的欄位對照:

類型 名稱 值
A launch Lovable 當次 Domains 畫面提供的 A 記錄值
TXT _lovable.launch lovable_verify=...(必須複製當次完整驗證值)

請複製專案當次提供的完整記錄,不能把表格中的 lovable_verify=... 當成可用驗證值。Cloudflare 的 A 記錄採 DNS only(灰雲);TXT 本來就不經 HTTP 代理。只針對要連接的同一主機名稱處理衝突記錄,並依 Lovable 提示檢查舊 A、AAAA 或 CNAME。根網域與 www 若同時連接,須逐一完成各自的設定,再確認主要網域與轉址。

預期結果: Lovable Domains 狀態逐步從需要操作、驗證中轉為 Live,由 Lovable 配置 HTTPS 憑證。大多數 DNS 變更在數小時內生效,官方提醒可能至多 72 小時。

驗收方式: 確認 DNS 指向正確,使用 https://launch.example.com 開啟網站,檢查憑證、內頁與主網址設定。

問題排除: 域名仍指向舊站,檢查該主機的舊 DNS 記錄。SSL 無法核發時,檢查 CAA 限制與 Lovable Domain 狀態。不要直接更改正在營運的公司主網域根記錄,尤其是 WordPress 與其他服務共用的網域。若瀏覽器出現憑證警告,應先等候或修復憑證,不能略過警告作為驗收通過。

設定路徑、網域狀態與當次記錄格式,以 Lovable 自訂網域文件及專案 Domains 畫面為準。

步驟 04|需要 Cloudflare 代理時,改走進階 CNAME 路線

若打算使用 Cloudflare 代理,在 Lovable 連接網域時展開 Advanced,啟用 Uses Cloudflare or similar proxy,完成連接。Lovable 將提供指向此專案 .lovable.app 網址的 CNAME。到 Cloudflare DNS 建立介面要求的 CNAME,並核對 Lovable Domains 顯示 Live。

這是 Lovable 提供的另一條連接路線:依官方文件,代理模式的 CNAME 取代一般模式的 A 記錄,且不要求一般模式的 _lovable 驗證 TXT。這不表示可以刪除網域裡其他用途的 TXT。請完成 Lovable 的進階設定,再依該模式配置 Cloudflare;不要只把一般模式的 A 記錄切成橘雲就當作完成。

Cloudflare 設為 Proxied(橘雲)時,HTTP/HTTPS 流量才會經過它的代理。若是 DNS only,Cloudflare 只提供 DNS 解析。兩種模式的流量路徑及可使用的保護、快取功能不同,詳見 Cloudflare Proxy status。Lovable 不會替你配置或監測外部代理,維護責任仍在管理者。

代理模式還要確認訪客到 Cloudflare、Cloudflare 到來源站兩段 TLS。來源站具備有效且符合主機名稱的憑證時,Cloudflare 建議使用 Full (strict);若憑證尚未就緒,先修復來源與設定。不要以關閉憑證驗證或降低保護來取得表面上的成功。共享 Zone 的設定可能影響其他服務,應先檢查套用範圍。Full (strict) 官方條件。

驗收方式: 測試 HTTPS、內頁、登入/回呼、快取與 API 行為。若代理有異常,先與直接發布的 .lovable.app 網址比較,區分 CDN 與應用程式故障。

問題排除: DNS 記錄名稱或目標錯誤、與舊記錄衝突、進階設定漏選,均可能導致無法驗證或訪客看到非預期的站點。

步驟 05|正式發布驗收與持續更新

逐項檢查:

檢查層面 必須通過的條件
可用性 首頁、1 個內頁直連與重新整理都正常
手機體驗 375px 手機視窗與 1440px 桌機視窗不橫向溢出,主要 CTA 可操作
功能 只有本機提示的示範表單:確認必填錯誤與成功提示,不應宣稱資料已送出;有後端的正式表單:另查實際寫入、錯誤回饋與授權
權限 未登入者不能讀取私人資料,不同帳號間不能跨戶讀取
憑證與網域 使用 HTTPS,域名 DNS 為預期的目標,主網址一致
搜尋與分享 Title、Description、OG、Canonical、robots、sitemap 符合實際網站
監控與復原 知道如何重新發布、回滾、查看錯誤與成本用量

SEO 後續: 在 Lovable 的 More → Analytics → SEO & AI 執行檢查;使用自訂網域者再到 Google Search Console 完成擁有權驗證。只有公開可檢索的網站才有機會進入一般搜尋結果,發布本身不代表立刻被收錄,更不保證排序。

在目前的 SEO & AI 官方文件中,檢查入口為 More → Analytics → SEO & AI。網站更新後需要重新掃描;修正提示不等於新版已發布,也不等於搜尋引擎已收錄。

DNS、TLS 與功能應分開驗證

熟悉終端機的讀者可用下列唯讀指令輔助檢查。先將 launch.example.com 換成有權測試的實際網域;這些是操作範例,不是本站已執行的驗收紀錄。

dig +short A launch.example.com
dig +short TXT _lovable.launch.example.com
curl -sS -L -D - -o /dev/null https://launch.example.com/
curl -sS -L -D - -o /dev/null https://launch.example.com/about

A/TXT 查詢適用於核對一般模式;代理模式應回到 Cloudflare 核對 CNAME 目標與代理狀態。公開查詢可能回傳 Cloudflare IP;啟用 CNAME flattening 時,也可能直接回傳 IP,不能僅因查不到 CNAME 就判定設定失敗。參考 CNAME flattening 說明。TXT 查詢結果可能包含網域驗證值,分享終端畫面前應遮蔽。

curl 未使用略過憑證驗證的參數;若出現 TLS 錯誤,應查憑證與主機名稱。即使 HTTP 回傳 200,也還要用瀏覽器確認內容是預期頁面,而非錯誤頁或首頁替代畫面,並實際操作導覽、表單及登入。只有這些層次都符合需求,才適合判定上線可用。

保留更新與復原路徑

每次發布記錄版本、時間與變更範圍,保留上一個可用版本及相關 DNS 設定。遇到問題先分辨是程式版本、DNS、憑證、代理快取還是後端失效,再處理對應項目。若涉及資料外洩,優先限制存取或下線,並檢查已暴露的憑證是否需要撤銷或輪替;只刪掉畫面文字不足以處理已外流的金鑰。

進階補充|GitHub 部署到 Cloudflare Pages/Vercel

若需要自己的部署管線,可從 Lovable 的 Git 同步把程式碼接到 GitHub(一般方案可用),再由外部託管平台從 Git 儲存庫部署。但第一步不是複製設定,而是確認技術架構。

如何辨識: 先查看 package.json 與實際建置設定。官方文件以是否包含 @tanstack/react-start 作為辨識 TanStack Start 的線索,仍須核對專案使用的伺服器功能與輸出。不要只根據建立日期,或看到 dist 資料夾,就判斷是純靜態網站。

有伺服器端渲染或 API 功能的專案: 應選擇支援相應伺服器執行環境的平台,而不能假定只上傳 dist 靜態資源即可運作。官方外部部署範例包含 Vercel、Netlify、Cloudflare Pages 等管理式平台,示例建置指令是 npm run build,但輸出目錄與部署方式應以專案實際框架、Adapter 和建置結果為準。包含認證或資料庫時,須另外檢查環境變數、伺服器端金鑰與 OAuth Redirect URL。

舊款 React+Vite: 多數可以使用靜態託管方式,建置 npm run build、輸出目錄 dist;若重新整理巢狀路徑得到 404,檢查單頁應用的 fallback 規則。留意外部託管只搬動前端,不代表資料庫、使用者或儲存檔案一起搬走。

上線前必要檢查: GitHub 是否包含程式與鎖定檔、CI 權限與回滾策略、Node.js 版本、後端金鑰、OAuth Redirect、伺服器路由與資料安全規則。一般用戶沒必要為了使用 Lovable 而先建 GitHub、Vercel 與額外主機。

先用自己的環境完成建置,再按照對應平台設定部署。完整架構差異及遷移步驟請參考 Lovable 外部部署文件;GitHub 授權與同步方式可參考 GitHub 整合文件。

常見問題 FAQ

1.Lovable 免費方案能部署嗎?

可以發布到 *.lovable.app,自訂網域需付費方案。不過,免費發布網址不代表所有後端、AI 或第三方服務都免費;這些功能可能依實際用量收費,網域也有註冊與續費成本。上線前應檢查方案、額度與用量提醒。參考官方託管與用量說明。

2.Lovable 部署一定要 GitHub 嗎?

不需要。內建 Publish 已包含託管;只有需要代碼版本控制或自行託管時,才考慮 Git 同步。

3.Publish 後,修改網站會立即生效嗎?

不會。應使用 Publish changes 將新版更新到正式站。

4.設定自訂網域一定要轉移註冊商嗎?

不需要。只要持續管理原註冊商與 DNS 設定,即可連接既有網域。

5.使用 Cloudflare 時 A、TXT、CNAME 要全設嗎?

不是。DNS only 一般模式採 Lovable 提供的 A+TXT;進階 Cloudflare 代理模式採 Lovable 提供的 CNAME。這是兩條不同路線。

6.網站可以開啟,就代表會員資料安全嗎?

不代表。需另行驗證登入、授權、RLS、檔案存取與 API 金鑰管理。不能只依賴預設安全掃描。

7.部署後為什麼 Google 找不到?

搜尋引擎仍需發現與索引,且公開存取、Canonical、robots、sitemap 與內容品質都會影響能否收錄。用 Search Console 檢查,不能保證排名。

8.可以把 Lovable 網站直接放到原本的 WordPress 主網域嗎?

技術上可利用不同子網域區分服務,但將根網域的 DNS 指向 Lovable 會改變該主機的流量目的地。若原站使用 WordPress,應先用測試子網域,並另行規劃同主網域路徑的反向代理架構,不能直接混為一談。

9.外部部署需要同步搬資料庫嗎?

不一定。可以先把前端搬到外部主機,仍使用 Lovable 內建後端;若完全離開 Lovable,資料庫資料、儲存物件、驗證設定與金鑰都必須分開規劃遷移。

10.使用 Lovable 就能直接部署原生 iOS、Android 應用程式嗎?

本文講的是網站與 Web App 發布,不能與 App Store/Google Play 原生 App 上架流程混同。

給 Lovable 的可複用提示詞

請將目前專案當作準備正式上線的 Web App 進行檢查。先辨識技術架構為 TanStack Start 或 React+Vite,列出前端頁面、後端服務、資料存取權限、環境變數與第三方登入回呼。請先給我一份發布前風險清單及可驗收測試案例,不要替我變更 DNS、購買網域或執行正式發布。確認問題修復後,我會再人工決定上線。

官方資料來源與適用範圍

本文於 2026 年 10 月 23 日核對下列官方文件,整理為部署操作指南。介面、方案及限制可能調整,執行時請以當次專案與官方文件為準。本文未宣稱已完成獨立 Demo 的 DNS/TLS 實測,也不包含實機操作截圖或錄影。

1.Publish your Lovable project

2.Set up a custom domain

3.Launch your site on a custom domain

4.Deploying and hosting outside Lovable

5.Sync your Lovable project with GitHub

6.Security overview

7.Optimize your app for SEO and AI search

8.Secrets

9.Cloudflare Pages:Build configuration

10.Cloudflare:Proxy status

11.Cloudflare:Full (strict)

12.Cloudflare:CNAME flattening

13.Lovable:How Lovable hosts your app