文章目錄
- Vercel是什么
- 概要
- Vercel部署分為兩種方案：
- 一、使用GitHub構建部署
- 二、通過 Vercel CLI 上傳本地構建資源
- 注意事項
- 轉發API到后端
- 小結
Vercel是什么
Vercel是一款專為前端開發者打造的云部署平臺，它支持一鍵部署靜態網站、AI工具和現代Web應用。Vercel的設計哲學是讓開發者能更專注于代碼本身，而不是繁瑣的服務器配置。無論你是構建個人博客、AI項目演示平臺，還是全棧Web應用，Vercel都能提供高效的部署體驗。
Vercel由Next.js的團隊開發，因此它對React生態尤其友好。平臺支持自動構建和部署，CI/CD流程一站集成，適用于開發者、AI項目團隊、產品經理等多個群體。目前，越來越多的AI工具也選擇通過Vercel部署前端頁面，實現快速訪問和分發。
Vercel非常適合開發者、AI創作者、自由職業者等人群部署博客、文檔站、教程類網站。
概要
本文介紹前端通過Vercel部署，后端服務在阿里云上，所以需要通過nginx來解決跨域和轉發等問題。
Vercel部署分為兩種方案：
- 已將代碼推送到 GitHub、GitLab 或 Bitbucket 倉庫
- 本地代碼不準備開源，在本地構建好通過Vercel Cli來上傳部署
一、使用GitHub構建部署
- 準備項目
確保你的 Next.js 項目中有正確的配置：- package.json 中包含 next 依賴
- 有正確的啟動腳本（通常 Next.js 項目默認已配置）
- 登錄 Vercel
訪問 Vercel 官網 并使用你的 GitHub 賬號登錄。 - 導入項目
點擊 dashboard 上的 “New Project” 按鈕
選擇你存放 Next.js 項目的 Git 倉庫
點擊 “Import” 導入項目 - 配置部署選項
Vercel 會自動檢測 Next.js 項目并配置默認設置，通常無需修改：- Framework Preset: 自動選擇 “Next.js”
- Build Command: 默認為 next build
- Output Directory: 自動配置
- 可以根據需要添加環境變量（如 API 密鑰等）
- 部署項目
點擊 “Deploy” 按鈕開始部署過程，Vercel 會：- 克隆你的代碼倉庫
- 安裝依賴
- 構建項目
- 部署應用
部署完成后，你會獲得一個自動生成的 URL（格式為 your-project-name.vercel.app），通過該 URL 可以訪問你的應用。
二、通過 Vercel CLI 上傳本地構建資源
- 安裝 Vercel CLI
npm install -g vercel
- 部署構建目錄
進入項目根目錄，直接部署構建好的文件夾（如 dist）：
vercel dist
注意事項
- 構建產物的兼容性
確保構建產物是靜態資源（HTML、CSS、JS、圖片等），且路徑引用正確（避免絕對路徑導致的 404 問題）。 - 緩存與更新
部署后，Vercel 會自動緩存靜態資源。若需強制更新，可通過 CLI 重新上傳部署。
轉發API到后端
部署到 Vercel 后，請求轉發由 vercel.json 配置文件控制，需同步更新后端地址和端口。
- 在根目錄下創建vercel.json文件。（與src同級）
{"rewrites": [{"source": "/api/:path*", // 匹配所有以 /api 開頭的請求// 替換為新的后端服務器地址和端口（需與開發環境保持一致的路徑規則）"destination": "http://新的IP地址:新的端口/:path*" // 例如: https://api.new-domain.com/:path*}]
}
- 重新部署到 Vercel（若用 CLI：vercel dist --prod；若用 Git：推送 vercel.json 變更）。
注意最后一行，將靜態資源轉發到入口文件index.html
小結
需要注意的是，vercel分配的域名，有可能國內正常訪問不了，需要通過科學上網等方案。通過綁定你自己的國內可正常解析的域名（如從阿里云、騰訊云等國內服務商購買的域名），繞開 Vercel 默認域名的訪問限制，這是目前最穩定的解決方式。
- 確保新的后端服務器允許公網訪問（需配置防火墻、端口映射，或使用域名）。
- 若后端有跨域限制，需在后端服務器（如 Nginx）的 CORS 配置中添加新的 Vercel 域名（例如 https://your-project.vercel.app）。
- 若需臨時切換后端地址（如測試環境 / 生產環境），可通過環境變量動態配置（推薦用于多環境管理）：
- 在 vite.config.js 中使用 process.env.VITE_API_TARGET 作為代理目標。
- 在 vercel.json 中通過 Vercel 控制臺的「環境變量」配置后端地址，再通過模板語法引用。
