大家好，我是小明，一个用Vercel白嫖了30多个网站的“白嫖教教主”。今天要跟你唠一个硬核话题：怎么用Vercel把个人网站部署到外网，还不用花一分钱？

你可能听说过Vercel——前端圈子里公认的“真香神器”！Next.js官网、React文档这些大项目都是它托管的。但很多人不知道的是：就算你只会写HTML，也能用Vercel秒速上线网站，还能白嫖Serverless、全球CDN、自动SSL证书这些高端功能！

这篇万字长文会从注册账号到部署Next.js项目，再到隐藏的高级玩法（比如防DDos攻击、边缘计算），手把手带你玩透Vercel！全程“人话翻译”，看完你一定会拍大腿：“原来部署网站还能这么简单？！”

---

一、Vercel是啥？凭啥选它？

1. 一句话说人话版

Vercel就是个“超级快递站”——你写完网站代码，打个包丢给它，它瞬间把你的网站分发到全世界的服务器，用户访问时自动选最近的节点，快得飞起！

2. 白嫖党的快乐清单

• 永久免费！个人项目完全够用（100个项目/月，100GB流量）
• 零配置！自动识别框架（React/Vue/Next.js等），不用折腾Webpack
• 秒级部署！代码推送到Git仓库，5秒后网站更新
• 自带黑科技：Serverless函数、边缘网络、实时预览
• 完美装X：送xxx.vercel.app域名，支持绑定自定义域名+HTTPS

3. 谁适合用Vercel？

• 写个人博客、作品集的前端小白
• 用Next.js、Nuxt.js等框架的全栈玩家
• 想快速上线Demo的创业团队
• 需要Serverless API但不想买服务器的极客

不适合谁：需要长期运行后台进程（比如爬虫）、超大文件存储（比如视频站）。

---

二、准备工作：会写HTML就能上车！

1. 注册Vercel账号（5秒搞定）

1. 打开 Vercel官网
2. 点击右上角 Sign Up，选择用GitHub、GitLab或Google账号登录（推荐GitHub，无缝衔接）

2. 准备一个网站项目（3种姿势任选）

• 小白版：新建一个文件夹，里面放index.html和style.css
• 框架版：用Create React App、Vite或Next.js初始化项目
• 偷懒版：直接下载我的模板仓库（文末有链接）

这里以Next.js项目为例（Vercel亲儿子框架，有加成buff）：

npx create-next-app@latest my-website  
cd my-website  

---

三、基础部署：5秒上线的魔法！

1. 创建新项目

1. 登录Vercel控制台，点击 Add New → Project
2. 选择你的Git仓库（比如GitHub上的项目）
   

2. 自动配置（啥都不用管！）

Vercel会自动检测项目类型（Next.js、React等），并生成最佳配置。你只需要：

1. 点击 Deploy
2. 去倒杯水，回来就看到部署成功的页面！

3. 访问你的网站！

部署完成后，Vercel会给你分配一个临时域名，比如：
https://my-website.vercel.app

打开这个链接，你的网站已经上线了！

---

四、进阶技巧：解锁Vercel的隐藏Buff！

1. 绑定自定义域名（装X必备）

想用www.xiaoming.com替代xxx.vercel.app？两步搞定：

1. 在域名商处添加CNAME记录：
   • 类型：CNAME
   • 主机名：www
   • 值：cname.vercel-dns.com
2. 在Vercel控制台添加域名：
   • 进入项目设置 → Domains → 输入www.xiaoming.com
   • 验证DNS记录后，自动配置HTTPS证书！

避坑指南：如果遇到SSL证书错误，尝试清除浏览器缓存或等待10分钟。

2. 用Serverless函数白嫖后端API

在Next.js项目中，新建pages/api/hello.js：

export default function handler(req, res) {  
  res.status(200).json({ message: "我是白嫖的API！" })  
}  

部署后，访问https://你的域名/api/hello，就能看到返回的JSON数据！

白嫖规则：免费版每月1000万次请求，足够个人项目使用。

3. 环境变量保护敏感信息

比如隐藏数据库密码：

1. 在Vercel控制台 → Project Settings → Environment Variables
2. 添加变量：DB_PASSWORD=123456
3. 代码中通过process.env.DB_PASSWORD读取

重要：千万别把敏感信息写死在代码里！

4. 自动重定向和跨域配置

在项目根目录创建vercel.json：

{  
  "rewrites": [  
    { "source": "/blog", "destination": "/news" }  
  ],  
  "headers": [  
    {  
      "source": "/(.*)",  
      "headers": [  
        { "key": "Access-Control-Allow-Origin", "value": "*" }  
      ]  
    }  
  ]  
}  

部署后，访问/blog会跳转到/news，且所有接口允许跨域。

---

五、性能优化：让你的网站快如闪电！

1. 开启全球CDN加速

Vercel默认将静态资源分发到全球边缘节点。在vercel.json中配置缓存策略：

{  
  "headers": [  
    {  
      "source": "/_next/static/(.*)",  
      "headers": [  
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }  
      ]  
    }  
  ]  
}  

2. 图片优化

使用Vercel的next/image组件自动优化图片：

import Image from 'next/image';  

export default function Home() {  
  return (  
    <Image  
      src="/me.png"  
      width={500}  
      height={300}  
      alt="我的头像"  
      // 自动生成WebP格式 + 懒加载  
    />  
  )  
}  

3. 按需生成页面（ISR）

Next.js的增量静态再生功能，Vercel完美支持：

// pages/posts/[id].js  
export async function getStaticProps({ params }) {  
  const post = await getPost(params.id);  
  return {  
    props: { post },  
    revalidate: 60 // 60秒后重新生成页面  
  };  
}  

---

六、避坑指南：新手必看的救命锦囊！

1. 部署失败：Build Failed

• 常见原因：
  • Node.js版本不兼容 → 在设置中指定引擎版本
  • 内存超限 → 免费版内存限制1024MB，优化代码或升级套餐
• 排查方法：查看部署日志中的报错信息

2. 域名解析失败

• 检查DNS配置：用 DNS Checker 确认CNAME是否生效
• 强制HTTPS：在Vercel设置中开启“Always Use HTTPS”

3. Serverless函数超时

免费版函数执行限制：

• 最大内存：1024MB
• 超时时间：10秒（Hobby套餐）
  优化方案：拆分长任务，或用定时触发器分阶段处理。

---

七、Vercel vs 其他平台：一张表终结选择困难症！

功能	Vercel	Netlify	GitHub Pages
部署速度	⚡️ 最快（5秒）	🚀 快（15秒）	🐢 慢（1分钟）
支持框架	全自动识别	需手动配置	仅静态文件
Serverless函数	✅ 免费	✅ 免费	❌ 不支持
全球CDN	🌍 边缘网络	🌏 普通CDN	❌ 无
自定义域名HTTPS	自动	自动	需手动
适合场景	全栈项目	静态站点	极简页面

---

八、总结：Vercel就是部署界的“傻瓜相机”！

看完这篇攻略，你应该已经掌握了：

1. 5秒部署任何前端项目
2. 白嫖Serverless API和全球CDN
3. 用Next.js快速开发高性能网站

最后送大家两条建议：

• 不要重复造轮子：Vercel已经帮你处理了90%的部署脏活
• 先跑起来再优化：别纠结配置，快速上线才是王道

赶紧去Vercel部署你的第一个项目吧！遇到问题欢迎评论区留言，有问必答！

---

资源合集：

• Vercel官方文档
• Next.js入门教程