[Cloud CICD] 全端應用程式 Azure 部署完整指南 Vue 3 + .NET 8 Web API + Azure SQL Database

Vue 3 + .NET 8 Web API + Azure SQL Database

從零開始，將現代化全端應用程式部署到 Microsoft Azure 雲端平台

📋 專案架構總覽

🎨

前端層

Vue 3 + Vite

Azure Static Web Apps

⚙️

後端層

.NET 8 Web API

Azure App Service

🗄️

資料層

SQL Server

Azure SQL Database

💡 為什麼選擇這個技術組合？

現代化開發：Vue 3 Composition API + .NET 8 提供最新的開發體驗
完整整合：Azure 全家桶服務無縫配合，部署簡單
自動化 CI/CD：GitHub Actions 自動建置部署，提高效率
成本優化：提供免費層級和彈性計費，適合各種規模專案
企業級安全：內建 SSL、防火牆、備份機制

🗺️ 部署流程總覽

準備階段：建立資料庫

• 建立 Azure SQL Server 邏輯伺服器
• 建立 SQL Database（選擇合適的定價層）
• 設定防火牆規則（本機 IP）
• 使用 SSMS 連線並匯入資料

⏱️ 預估時間：20-30 分鐘 | 💰 成本：Free or Basic 層約 NT$0 - 200/月

↓

後端部署：.NET 8 Web API

• 建立 Azure App Service
• 下載 Publish Profile 並設定 GitHub Secrets
• 建立 GitHub Actions Workflow（包含 Node.js 20 設定）
• 設定環境變數（連線字串、JWT、CORS）
• 將 App Service Outbound IP 加入資料庫防火牆

⏱️ 預估時間：30-40 分鐘 | 💰 成本：F1 免費層或 B1 約 NT$0 - 450/月

↓

前端部署：Vue 3 應用程式

• 建立 Azure Static Web Apps 並綁定 GitHub
• 設定 Workflow（Node.js 20、output_location: dist）
• 建立 staticwebapp.config.json 解決 SPA 路由問題
• 設定 CORS（允許前端網址）
• 設定 API 代理（可選）

⏱️ 預估時間：20-30 分鐘 | 💰 成本：免費（包含 100GB 流量）

↓

整合測試與優化

• 測試前後端連線（API 呼叫）
• 驗證 CORS 設定正確
• 測試資料庫 CRUD 操作
• 檢查 Log Stream 確認無錯誤
• 效能監控與成本優化

⏱️ 預估時間：30-60 分鐘 | 🎯 目標：確保系統穩定運行

🔑 關鍵設定要點

🎨 前端關鍵

Node.js 版本：必須設定 20 以支援 Vite 7
SPA 路由：staticwebapp.config.json 的 navigationFallback
輸出資料夾：output_location 設為 "dist"

⚙️ 後端關鍵

環境變數：使用 __ (雙底線) 區隔階層
CORS 設定：允許前端網址，禁用萬用字元
Publish Profile：儲存在 GitHub Secrets

🗄️ 資料庫關鍵

防火牆：本機 IP + App Service Outbound IP
連線字串：替換 {your_password} 佔位符
備份保留：Basic 7天，Standard 可達 35 天

⚠️ 常見問題與解決方案

❌ 前端 404 錯誤（重新整理或直接輸入 URL）

原因：SPA 路由未正確設定

解決：確保 staticwebapp.config.json 中有 navigationFallback 設定

❌ 後端無法連接資料庫

原因：App Service IP 未加入資料庫防火牆

解決：將所有 Outbound addresses 加入 SQL Database 防火牆規則

❌ CORS 錯誤（前端無法呼叫 API）

原因：後端未允許前端網址

解決：在程式碼或 Azure Portal 設定 CORS，加入前端完整網址

❌ GitHub Actions 建置失敗（Vite 7）

原因：Node.js 版本過舊

解決：在 Workflow 中使用 setup-node@v3 設定 Node.js 20

💰 成本估算（台幣/月）

服務	開發/測試環境	小型生產環境	備註
Azure Static Web Apps	免費	免費 - $300	Standard 版有更多功能
Azure App Service	F1: 免費 B1: $450	S1: $2,250	F1 有使用限制（60 分鐘/天）
Azure SQL Database	Free: 永久免費 Basic: $150 Serverless: $200-500	S0: $450 S1: $900	Free 方案：32GB 儲存，超過額度自動停止
每月總計	$0 - 650	$3,000 - 3,550	使用完全免費方案可達 $0/月

🎉 完全免費方案（永久免費！）

好消息！Azure 提供永久免費的服務組合，讓你可以零成本運行全端應用程式：

前端：Static Web Apps 免費版（100GB 流量/月）
後端：App Service F1 免費層（60 分鐘/天運作時間）
資料庫：SQL Database Free 方案（永久免費，32GB 儲存）

💰

$0 / 月

永久免費，沒有時間限制！

Free 方案限制：32GB 儲存空間，超過額度後會自動停止服務（不會產生費用），適合學習、開發測試或小型專案使用。

📊 SQL Database 方案比較

方案	儲存空間	月費	適合情境
Free	32 GB	$0	學習、開發測試、小型專案
Basic	2 GB	$150-200	簡單測試環境
Serverless	最大 1 TB	$200-500（依使用量）	不定期使用，閒置自動暫停
Standard S0	250 GB	$450	小型生產環境

💡 推薦選擇：開發測試選 Free；正式上線選 Serverless 或 S0

💡 省錢小技巧

優先使用 Free 方案：SQL Database Free 方案永久免費，32GB 對多數開發測試足夠
監控用量：Free 方案超過 32GB 會自動停止，設定 Azure Monitor 警示提前通知
開發環境用 Serverless：如果需要更大空間，Serverless 閒置時自動暫停幾乎免費
清理測試資料：定期清理不需要的測試資料，避免超過 Free 方案額度
學生方案：Azure 學生方案可獲得額外 $100 美金額度（約 $3,000 台幣）
保留執行個體：生產環境如果確定長期使用，購買 1-3 年保留方案可節省 30-50%

🎯 部署後檢查清單

✅ 前端網站可正常訪問

✅ 直接輸入 URL 不會 404

✅ API 端點正常回應

✅ 前端能成功呼叫後端 API

✅ 資料庫連線正常

✅ CRUD 操作都能執行

✅ CORS 設定正確

✅ HTTPS 憑證正常

✅ Log Stream 無錯誤訊息

✅ GitHub Actions 部署成功

✅ 環境變數設定完整

✅ 防火牆規則正確設定

📚 詳細教學文章

以上是全端應用程式部署的整體流程概覽。如果你需要更詳細的步驟說明、完整的程式碼範例，以及問題排解指南，請參考以下三篇深入教學：

🗄️

資料庫篇

Azure SQL Server + SQL Database 建立與設定完整指南，包含 SSMS 連線、資料匯入、防火牆設定等

閱讀完整教學 →

⚙️

後端篇

.NET 8 Web API + Azure App Service 部署實戰，包含 Publish Profile、環境變數、CORS 設定等

閱讀完整教學 →

🎨

前端篇

Vue 3 + GitHub Actions + Azure Static Web Apps 部署實戰，包含 Vite 7 設定、SPA 路由問題解決等

閱讀完整教學 →

🚀 開始你的雲端之旅

準備好部署你的全端應用了嗎？

按照這個指南，你可以在 2-3 小時內完成整個全端應用的部署
從資料庫到前端，一次搞定！

70-90

分鐘總耗時

$150-650

開發環境月成本

100%

自動化部署

💬 遇到問題？

• 檢查每篇詳細教學中的「常見問題排解」章節
• 使用 Azure Portal 的 Log Stream 查看詳細錯誤訊息
• 確認所有防火牆規則和環境變數設定正確
• 歡迎在文章下方留言討論，一起解決問題！

🎉 恭喜你完成全端應用的 Azure 部署！

如果這份指南對你有幫助，歡迎分享給更多需要的開發者
讓我們一起在雲端開發的道路上持續進步！