Vercel 应用实践学习
Vercel 是由 Next.js 团队开发的云端部署平台,专注于静态网站、Serverless 函数和全栈 Web 应用的托管服务。
本文将记录一些我对 Vercel 应用实践,以更好地理解 Vercel 平台,使之服务于个人开发者。
Vercel 自定义域名
在自己的 DNS 中配置 CNAME 记录:
| 记录类型 | 名称 | 记录值 |
|---|---|---|
| CNAME | subdomain.example.com |
cname-china.vercel-dns.com |

DNS 记录中 CNAME 值可填写为:cname-china.vercel-dns.com(祖传 [1])。现在的 Vercel 有对 CNAME 值的建议,可以看情况配置。

Vercel 放置静态公共访问资源
在 Github 项目中,创建一个 public 文件夹,里面放置你想让公共访问的资源。比如一些 JSON 数据文件 your_data.json。
设置根目录:

如果已经为项目设置好了自定义域名,这样我们就可以通过:https://subdomain.example.com/your_data.json 进行访问。
Vercel 代码开发
Vercel 环境变量
Vercel 中可以设置环境变量,具体用法参见:Environment variables。
环境变量变更后,需要 Redeploy 才能使新参数生效。
Vercel 中 Node 项目升级或安装依赖
Vercel 中部署 JavaScript 项目,如果使用到依赖,在本地中我们可以通过 npm install xxx --save 来实现,其作用效果是本地 node_modules 安装新插件,以及 package.json 的 dependencies 字段添加了相应的内容。
事实上,有些时候为了快速便捷,我们会直接在 GitHub 改 package.json,就能实现依赖的新增或插件的升级。
1 | { |
这篇文章有提到这个内容:站内文章Hexo 博客与 Waline 评论区实现外链跳转中间页。
Vercel 无服务器函数(边缘函数)的应用
编写注意事项:
- Serverless 函数必须要放在名为
api文件夹下; - 部署到 Vercel 时,不要预设任何模板,Frame Preset 请选择 Other。

可以使用 Postman 正常调试。
纯 Serverless API
详看这篇文章:站内文章通过与 Keycloak 配合实现博客文章的受限访问功能。
集成了外部 Redis 服务的无服务器函数
详看这篇文章:站内文章我的 AI 摘要方案:Vercel+Redis+Hexo API+Spark Lite。
Vercel 部署静态网页应用(HTML+CSS+JavaScript)
这里我拿一个我写的 网页应用 来举例。
我们可以首先写一个简单的网页应用,它的项目结构可以是这样的:
1 | my-app |
在本地双击 index.html 可以直接运行调试这个简单的应用。应用开发完成后即可上传到 GitHub 仓库中。
登录 Vercel,新建项目:

找到你的网页应用,点击 Import:

配置好选项即可部署。

如需自定义访问网页项目的域名,可在 Vercel 的 Setting 中的 Domain 里配置。按提示前往你的 DNS 服务商中修改相应记录即可。

配置成功后,就可以使用你的自定义域名访问网页应用啦!




