Vercel 应用实践学习
发表于2026-04-21|更新于2026-04-24|工程
|总字数:854|阅读时长:2分钟|浏览量:|
|出链:3|入链:4
摘要生成中...
AI 摘要
Hunyuan-lite
Vercel 是由 Next.js 团队开发的云端部署平台，专注于静态网站、Serverless 函数和全栈 Web 应用的托管服务。
本文将记录一些我对 Vercel 应用实践，以更好地理解 Vercel 平台，使之服务于个人开发者。
在自己的 DNS 中配置 CNAME 记录：
DNS 记录中 CNAME 值可填写为：cname-china.vercel-dns.com（祖传 [1]）。现在的 Vercel 有对 CNAME 值的建议，可以看情况配置。
在 Github 项目中，创建一个 public 文件夹，里面放置你想让公共访问的资源。比如一些 JSON 数据文件 your_data.json。
设置根目录：
如果已经为项目设置好了自定义域名，这样我们就可以通过：https://subdomain.example.com/your_data.json 进行访问。
Vercel 中可以设置环境变量，具体用法参见：Environment variables。
环境变量变更后，需要 Redeploy 才能使新参数生效。
Vercel 中部署 JavaScript 项目，如果使用到依赖，在本地中我们可以通过 npm install xxx --save 来实现，其作用效果是本地 node_modules 安装新插件，以及 package.json 的 dependencies 字段添加了相应的内容。
事实上，有些时候为了快速便捷，我们会直接在 GitHub 改 package.json，就能实现依赖的新增或插件的升级。
1
2
3
4
5
6
{
"dependencies": {
"crypto-js": "^4.2.0",
"jsonwebtoken": "^9.0.3"
}
}
这篇文章有提到这个内容：站内文章Hexo 博客与 Waline 评论区实现外链跳转中间页。
编写注意事项：
- Serverless 函数必须要放在名为
api文件夹下； - 部署到 Vercel 时，不要预设任何模板，Frame Preset 请选择 Other。
可以使用 Postman 正常调试。
详看这篇文章：站内文章通过与 Keycloak 配合实现博客文章的受限访问功能。
这里我拿一个我写的 网页应用 来举例。
我们可以首先写一个简单的网页应用，它的项目结构可以是这样的：
1
2
3
4
5
6
7
my-app
├─ index.html <-- 主页入口文件（最外层，双击直接运行）
├─ css
│ └─ style.css <-- 所有页面样式统一存放
└─ js <-- 脚本文件夹
├─ core.min.js
└─ script.js <-- 业务逻辑JS文件
在本地双击 index.html 可以直接运行调试这个简单的应用。应用开发完成后即可上传到 GitHub 仓库中。
登录 Vercel，新建项目：
找到你的网页应用，点击 Import：
配置好选项即可部署。
如需自定义访问网页项目的域名，可在 Vercel 的 Setting 中的 Domain 里配置。按提示前往你的 DNS 服务商中修改相应记录即可。
配置成功后，就可以使用你的自定义域名访问网页应用啦！
版权声明 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 半方池水半方田！
文章助手
豆包
赞助
微信
支付宝
wuanqin
只能懂一点点
最新文章