摘要生成中...
AI 摘要
Hunyuan-lite

Vercel 是由 Next.js 团队开发的云端部署平台,专注于静态网站、Serverless 函数和全栈 Web 应用的托管服务。

本文将记录一些我对 Vercel 应用实践,以更好地理解 Vercel 平台,使之服务于个人开发者。

Vercel 自定义域名

在自己的 DNS 中配置 CNAME 记录:

记录类型 名称 记录值
CNAME subdomain.example.com cname-china.vercel-dns.com

image.png

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

image.png

Vercel 放置静态公共访问资源

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

设置根目录:

image.png

如果已经为项目设置好了自定义域名,这样我们就可以通过:https://subdomain.example.com/your_data.json 进行访问。

Vercel 代码开发

Vercel 环境变量

Vercel 中可以设置环境变量,具体用法参见:Environment variables

环境变量变更后,需要 Redeploy 才能使新参数生效。

Vercel 中 Node 项目升级或安装依赖

Vercel 中部署 JavaScript 项目,如果使用到依赖,在本地中我们可以通过 npm install xxx --save 来实现,其作用效果是本地 node_modules 安装新插件,以及 package.jsondependencies 字段添加了相应的内容。

事实上,有些时候为了快速便捷,我们会直接在 GitHub 改 package.json,就能实现依赖的新增或插件的升级。

1
2
3
4
5
6
{
"dependencies": {
"crypto-js": "^4.2.0",
"jsonwebtoken": "^9.0.3"
}
}

这篇文章有提到这个内容:站内文章Hexo 博客与 Waline 评论区实现外链跳转中间页

Vercel 无服务器函数(边缘函数)的应用

编写注意事项:

  • Serverless 函数必须要放在名为 api 文件夹下;
  • 部署到 Vercel 时,不要预设任何模板,Frame Preset 请选择 Other。

image.png

可以使用 Postman 正常调试。

纯 Serverless API

Readme Card

详看这篇文章:站内文章通过与 Keycloak 配合实现博客文章的受限访问功能

集成了外部 Redis 服务的无服务器函数

Readme Card

详看这篇文章:站内文章我的 AI 摘要方案:Vercel+Redis+Hexo API+Spark Lite

Vercel 部署静态网页应用(HTML+CSS+JavaScript)

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

Readme Card

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

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,新建项目:

image.png

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

image.png

配置好选项即可部署。

image.png

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

image.png

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

本文参考


  1. 关于waline国内无法使用的解决方案 (vercel.app国内无法使用问题)-CSDN博客 ↩︎