Web前端部署之Vercel-CSDN博客

本文链接：https://blog.csdn.net/qq_42691309/article/details/139330821

官方文档

简介

Vercel 是一个用于部署和托管 Web 应用程序的平台。它提供了以下主要功能:

部署:

Vercel 支持多种编程语言和框架,如 React、Next.js、Vue.js、Nuxt.js、Angular 等,可以自动部署和托管这些应用程序。

自动构建和部署:

Vercel 会自动检测您的代码仓库(如 GitHub、GitLab 或 Bitbucket)中的变更,并自动构建和部署您的应用程序。

边缘网络

Vercel 拥有全球边缘网络,可以为您的应用程序提供快速、安全和可靠的访问。

自定义域名:

Vercel 支持将您的应用程序部署到自定义域名上。

团队协作

Vercel 支持团队合作,您可以邀请团队成员参与项目的部署和管理。

分支部署

Vercel 支持为每个分支自动部署预览环境,方便您在合并到主分支之前进行测试和审核。

无服务器功能

Vercel 支持部署无服务器函数,如 API 端点、数据库操作等。

监控和故障排除

Vercel 提供了日志查看、性能监控和错误跟踪等功能,帮助您诊断和解决应用程序问题。

常见的应用

静态网站托管

Vercel 非常适合托管基于 React、Vue.js 或 Angular 等框架构建的静态网站。
利用 Vercel 提供的构建和部署能力,可以轻松地发布和更新静态网站。

无服务器 API 部署

Vercel 支持部署无服务器函数,使得开发人员可以轻松地部署 API 接口。
这些 API 可以与静态网站或前端应用程序集成使用。

JAMstack 应用程序部署

Vercel 非常适合部署基于 JAMstack 架构的应用程序,包括静态站点生成器(如 Next.js、Gatsby 等)。
利用 Vercel 的边缘网络和自动化部署功能,可以提高应用程序的性能和可靠性。

前端框架和库的部署

Vercel 支持部署基于 React、Vue.js、Angular 等前端框架和库构建的应用程序。
通过 Vercel 提供的构建和部署工具,可以快速地发布和更新这些应用程序。

个人博客和投资组合网站

Vercel 是部署个人网站、博客和投资组合的理想选择。
利用 Vercel 提供的自定义域名和 SSL 证书功能,可以轻松地建立专业的在线形象。

团队协作和开发流程

Vercel 提供了团队协作和开发流程支持,可以帮助团队更高效地部署和管理应用程序。
包括分支预览、回滚、环境变量管理等功能。

简单配置实例

项目设置


{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My Vercel project",
  "build": {
    "env": {
      "API_KEY": "@my-api-key"
    }
  }
}

添加自定义域名

vercel domains add example.com

配置 CNAME 记录

vercel domains add www.example.com --cname example.com

指定构建命令和输出目录

{
  "build": {
    "command": "npm run build",
    "distDir": "build"
  }
}

配置部署环境变量


{
  "build": {
    "env": {
      "NEXT_PUBLIC_API_URL": "@api-url"
    }
  }
}

部署无服务器函数

{
  "functions": {
    "api/hello.js": {
      "runtime": "nodejs14.x"
    }
  }
}

设置团队成员权限

vercel teams add-member --team my-team --email user@example.com --role writer

启用 IP 白名单

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "zeroConfig": true,
        "allowedHosts": ["example.com"]
      }
    }
  ]
}