Skip to content

Vercel

Vercel 是一个前端开发平台,专注于提供无服务器的静态网站托管和动态应用部署服务。它的目标是简化开发流程,帮助开发者快速构建、预览和部署现代 Web 应用。Vercel 与 Next.js 框架紧密集成,但也支持 Vue.js、React、Svelte、Angular 等其他前端框架。以下是 Vercel 的一些关键特性:

  • 无缝部署:Vercel 提供了一个无缝的部署体验,开发者只需将代码推送到 GitHub、GitLab 或 Bitbucket 上,Vercel 会自动检测更改并重新构建应用。这个过程不需要复杂的服务器配置,尤其适合前端开发者。
  • 自定义域名:Vercel 支持自定义域名,用户可以非常轻松地将自己的域名绑定到 Vercel 托管的项目上。
  • 实时预览:在每次提交时自动生成预览链接,方便团队成员进行协作和审查。
  • 全球 CDN:Vercel 自动将应用内容分发到全球各地的边缘节点,确保快速的加载速度和高可用性。
  • 分析和监控:Vercel 还提供了内置的分析功能,可以监控网站的访问情况、性能数据和用户行为,帮助开发者优化应用。
  • 无服务器函数:允许开发者轻松创建无服务器 API,支持多种编程语言。

Vercel 和 Next.js 的集成

虽然 Vercel 支持多种前端框架,但它与 Next.js 的集成最为紧密。Next.js 是一个由 Vercel 团队开发的 React 框架,专注于静态生成和服务器端渲染(SSR),非常适合构建 SEO 友好的 Web 应用。Vercel 提供了对 Next.js 的原生支持,包括动态路由、API 路由和页面预渲染等特性。

使用场景

  • 个人网站和博客:由于其简单的部署和全球 CDN 支持,Vercel 非常适合部署个人博客或静态网站。
  • 电商网站:通过动态页面生成和快速加载,Vercel 可以很好地支持现代电商应用。
  • 企业级应用:企业可以利用 Vercel 的无服务器架构来快速构建和扩展应用,无需维护复杂的基础设施。

示例

下面演示如何将一个 Vitepress 项目部署到 Vercel。

1. 创建项目

Preview

选择从 GitHub 导入项目:

Preview

这里构建和输出目录设置使用默认的即可,然后点击创建:

Preview

接下来可以查看构建、部署日志:

Preview

部署完成后,可以点击访问项目:

Preview

2. 添加域名

按上面步骤完成创建后,Vercel 会自动添加一个默认域名(如:xxx.vercel.app),我们可以在项目设置中添加一个自定义域名。

这里添加一个自定义域名 vercel.newarea.site,这里提示“Invalid Configuration”,这是因为域名没有通过域名服务商的 DNS 解析到 Vercel 的 IP 地址。

Preview

新增一条 CNAME 记录:

Preview

待解析生效后,再次验证:

Preview