BlockCoder
部署运维··约 12 分钟

Vercel部署完整指南：从零到上线

详细介绍如何使用Vercel部署前端项目，包括GitHub集成、自定义域名配置、环境变量设置等实用技巧。

#Vercel#部署#前端#CI/CD#域名

Vercel是一个专为前端框架优化的云平台，提供了极其简单的部署体验。本文将详细介绍如何使用Vercel部署你的前端项目。

什么是Vercel

Vercel是由Next.js团队开发的云平台，专门为前端应用提供部署和托管服务。它支持多种前端框架，包括React、Vue、Angular、Svelte等。

Vercel的主要优势

  • 零配置部署：支持多种框架的自动检测和配置
  • 全球CDN：自动分发到全球边缘节点
  • Git集成：与GitHub、GitLab、Bitbucket无缝集成
  • 自动HTTPS：免费SSL证书
  • 预览部署：每个Pull Request自动生成预览链接
  • 无服务器函数：支持API Routes和Serverless Functions

准备工作

1. 注册Vercel账号

访问 vercel.com 并使用GitHub账号注册，这样可以直接关联你的代码仓库。

2. 准备项目

确保你的项目已经推送到GitHub仓库，并且包含以下文件：

text
1your-project/
2├── package.json
3├── src/
4└── public/

部署步骤

方法一：通过Vercel Dashboard部署

  1. 登录Vercel控制台

  2. 导入Git仓库

    • 选择你要部署的GitHub仓库
    • 点击Import按钮

  3. 配置项目设置

    bash
    1# 项目名称
2Project Name: my-awesome-app
3
4# 框架预设（自动检测）
5Framework Preset: Next.js / React / Vue.js
6
7# 根目录
8Root Directory: ./
9
10# 构建命令
11Build Command: npm run build
12
13# 输出目录
14Output Directory: dist / build / .next

  4. 部署

    • 点击Deploy按钮
    • 等待构建完成（通常1-3分钟）

方法二：通过Vercel CLI部署

  1. 安装Vercel CLI

    bash
    1npm install -g vercel

  2. 登录账号

    bash
    1vercel login

  3. 部署项目

    bash
    1# 在项目根目录执行
2vercel
3
4# 首次部署会询问配置
5? Set up and deploy "~/my-project"? [Y/n] y
6? Which scope do you want to deploy to? Your Name
7? Link to existing project? [y/N] n
8? What's your project's name? my-awesome-app
9? In which directory is your code located? ./

  4. 生产环境部署

    bash
    1vercel --prod

高级配置

1. 环境变量设置

在Vercel Dashboard中设置环境变量：

  1. 进入项目设置页面
  2. 点击Environment Variables
  3. 添加变量：
bash
1# 示例环境变量
2NEXT_PUBLIC_API_URL=https://api.example.com
3DATABASE_URL=postgresql://...
4STRIPE_SECRET_KEY=sk_test_...

2. 自定义域名配置

  1. 添加域名

    • 在项目设置中点击Domains
    • 输入你的域名：example.com

  2. 配置DNS

    bash
    1# A记录
2Type: A
3Name: @
4Value: 76.76.19.61
5
6# CNAME记录
7Type: CNAME
8Name: www
9Value: cname.vercel-dns.com

  3. SSL证书

    • Vercel会自动为你的域名申请Let's Encrypt证书
    • 通常在几分钟内完成

3. 重定向和重写规则

创建vercel.json配置文件：

json
1{
2  "redirects": [
3    {
4      "source": "/old-page",
5      "destination": "/new-page",
6      "permanent": true
7    }
8  ],
9  "rewrites": [
10    {
11      "source": "/api/:path*",
12      "destination": "https://api.example.com/:path*"
13    }
14  ],
15  "headers": [
16    {
17      "source": "/(.*)",
18      "headers": [
19        {
20          "key": "X-Frame-Options",
21          "value": "DENY"
22        }
23      ]
24    }
25  ]
26}

不同框架的部署配置

Next.js项目

json
1// package.json
2{
3  "scripts": {
4    "build": "next build",
5    "start": "next start"
6  }
7}

React项目

json
1// package.json
2{
3  "scripts": {
4    "build": "react-scripts build"
5  }
6}

Vue.js项目

json
1// package.json
2{
3  "scripts": {
4    "build": "vue-cli-service build"
5  }
6}

Vite项目

json
1// package.json
2{
3  "scripts": {
4    "build": "vite build"
5  }
6}

持续集成和部署

自动部署设置

  1. Git集成

    • 每次推送到main分支自动部署到生产环境
    • 每个Pull Request自动生成预览环境

  2. 分支策略

    bash
    1# 生产分支
2main → Production Deployment
3
4# 开发分支
5develop → Preview Deployment
6
7# 功能分支
8feature/* → Preview Deployment

GitHub Actions集成

yaml
1# .github/workflows/deploy.yml
2name: Deploy to Vercel
3on:
4  push:
5    branches: [main]
6  pull_request:
7    branches: [main]
8
9jobs:
10  deploy:
11    runs-on: ubuntu-latest
12    steps:
13      - uses: actions/checkout@v2
14      - name: Install Vercel CLI
15        run: npm install --global vercel@latest
16      - name: Pull Vercel Environment Information
17        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
18      - name: Build Project Artifacts
19        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
20      - name: Deploy Project Artifacts to Vercel
21        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

性能优化

1. 构建优化

javascript
1// next.config.js
2module.exports = {
3  // 启用压缩
4  compress: true,
5  
6  // 图片优化
7  images: {
8    domains: ['example.com'],
9    formats: ['image/webp', 'image/avif'],
10  },
11  
12  // 静态导出（如果需要）
13  output: 'export',
14  trailingSlash: true,
15}

2. 缓存策略

json
1// vercel.json
2{
3  "headers": [
4    {
5      "source": "/static/(.*)",
6      "headers": [
7        {
8          "key": "Cache-Control",
9          "value": "public, max-age=31536000, immutable"
10        }
11      ]
12    }
13  ]
14}

监控和分析

1. Vercel Analytics

javascript
1// pages/_app.js 或 app/layout.js
2import { Analytics } from '@vercel/analytics/react';
3
4export default function App({ Component, pageProps }) {
5  return (
6    <>
7      <Component {...pageProps} />
8      <Analytics />
9    </>
10  );
11}

2. 性能监控

在Vercel Dashboard中查看：

  • 部署历史
  • 构建日志
  • 性能指标
  • 访问统计

常见问题解决

1. 构建失败

bash
1# 检查Node.js版本
2"engines": {
3  "node": "18.x"
4}
5
6# 检查构建命令
7"scripts": {
8  "build": "next build"
9}

2. 环境变量问题

bash
1# 确保变量名正确
2NEXT_PUBLIC_API_URL  # 客户端变量需要前缀
3API_SECRET_KEY       # 服务端变量

3. 域名解析问题

bash
1# 检查DNS配置
2dig example.com
3nslookup example.com
4
5# 清除DNS缓存
6sudo dscacheutil -flushcache

最佳实践

  1. 使用环境变量管理敏感信息
  2. 设置适当的缓存策略提升性能
  3. 配置自定义404页面提升用户体验
  4. 启用分析工具监控网站性能
  5. 使用预览部署测试功能
  6. 定期更新依赖保持安全性

总结

Vercel提供了现代化的部署体验，特别适合前端项目。通过本文的介绍，你应该能够：

  • 理解Vercel的核心概念和优势
  • 掌握多种部署方法
  • 配置高级功能如自定义域名、环境变量
  • 优化项目性能和监控
  • 解决常见部署问题

开始使用Vercel，让你的项目快速上线吧！

相关文章推荐：

评论讨论

使用 GitHub 账号登录即可参与讨论