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，就能实现依赖的新增或插件的升级。

{
  "dependencies": {
    "crypto-js": "^4.2.0",
    "jsonwebtoken": "^9.0.3"
  }
}

这篇文章有提到这个内容：站内文章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）

这里我拿一个我写的网页应用来举例。

我们可以首先写一个简单的网页应用，它的项目结构可以是这样的：

my-app 
├─ index.html    <-- 主页入口文件（最外层，双击直接运行）
├─ css          
│  └─ style.css  <-- 所有页面样式统一存放
└─ js            <-- 脚本文件夹
   ├─ core.min.js      
   └─ script.js         <-- 业务逻辑JS文件

在本地双击 index.html 可以直接运行调试这个简单的应用。应用开发完成后即可上传到 GitHub 仓库中。