跳至主要內容

Vercel 快速部署

Jia-Yin2025年5月21日大约 3 分鐘coursefrontenddeploymentvercelvue

學習目標

  1. 了解 Vercel 平台的特點與優勢
  2. 學會將 Vue 應用部署到 Vercel
  3. 掌握環境變數配置與域名設定
  4. 理解自動化部署與 CI/CD 流程
  5. 學會監控應用效能與分析

核心概念解釋

什麼是 Vercel？

Vercel 是一個現代化的雲端平台，專為前端框架和靜態網站設計，提供：

  • 零配置部署：自動識別框架並優化建構
  • 全球 CDN：快速內容分發網路
  • 自動 HTTPS：免費 SSL 憑證
  • 無伺服器函數：Edge Functions 和 API Routes
  • 即時預覽：每個 Git 分支自動生成預覽連結

Vercel 的優勢

  1. 簡單易用：幾分鐘內完成部署
  2. 效能優化：自動優化圖片、字體和程式碼
  3. 可擴展性：自動處理流量尖峰
  4. 開發者友善：與 Git 工作流程完美整合
  5. 免費方案：個人專案可免費使用

程式碼範例及詳細註釋

1. 準備 Vue 專案

首先確保你的 Vue 專案已經配置好建構指令：

// package.json
{
  "name": "my-vue-app",
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",      // Vercel 會執行此指令建構專案
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}

2. 使用 Vercel 網站介面部署

通過 Vercel 網站介面部署你的 Vue 應用：

  1. 建立 Vercel 帳號：

    • 前往 Vercel 官網 註冊/登入帳號
    • 可使用 GitHub、GitLab 或 Bitbucket 帳號直接登入

  2. 匯入專案：

    • 點擊 "New Project" 或 "Import Project" 按鈕
    • 選擇你的 Git 提供者（GitHub、GitLab 或 Bitbucket）
    • 授權 Vercel 存取你的儲存庫
    • 從列表中選擇你的 Vue 專案儲存庫

  3. 配置部署設定：

    • Vercel 會自動檢測專案為 Vue/Vite 專案
    • 框架預設值：確認已選擇 "Vite" 作為框架預設
    • 建構命令：確認使用 npm run build 或 yarn build 或 pnpm build
    • 輸出目錄：確認為 dist
    • 環境變數：添加必要的環境變數（確保使用 VITE_ 前綴）

  4. 部署專案：

    • 點擊 "Deploy" 按鈕開始部署流程
    • 查看即時建構日誌和部署過程
    • 部署完成後，Vercel 將提供一個唯一的 URL（例如 my-vue-app.vercel.app）

  5. 查看部署結果：

    • 點擊提供的 URL 訪問你的應用
    • 在 Vercel 儀表板查看部署狀態和分析數據

  6. 自定義域名（選擇性）：

    • 在專案設定中點擊 "Domains" 標籤
    • 點擊 "Add" 按鈕添加自定義域名
    • 依照指示配置 DNS 設定
    • Vercel 會自動提供 SSL 證書

部署最佳實踐

Git 工作流程

# 建議的分支策略
main        # 生產環境自動部署
develop     # 開發環境預覽
feature/*   # 功能分支預覽

補充資源

總結

Vercel 提供了一個強大且易用的平台來部署 Vue 應用。通過適當的配置和最佳實踐，你可以：

  1. 實現快速、可靠的應用部署
  2. 利用全球 CDN 提升使用者體驗
  3. 使用無伺服器函數擴展應用功能
  4. 通過分析工具優化應用效能
  5. 建立專業的 CI/CD 工作流程

記住在部署前測試所有功能，並定期監控應用的效能指標！

Copyright © 2025 Jia-Yin