Vercel反向代理做CDN,免费给网站加速隐藏源站,可绑定域名

本文介绍了如何利用Vercel的100GB免费流量和路由重写功能实现网站反代,包括注册步骤、安装Vercel CLI、配置反代文件及自定义域名的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vercel免费用户拥有每月100G的流量,一般来说是够用的,这个100G的话,虽然网页上号称无限,实际上合理使用政策里写的是100G,构建时间是100小时,一般我们可以用它托管静态网站,它还支持路由重写功能,因此我们可以实现反代,也就是类似于CDN的功能。

使用方法

1、注册Vercel

官方网站
推荐使用Github账号登录 注:QQ邮箱注册不行,若Github绑定QQ邮箱,修改其他邮箱为主邮箱注册

2、安装Nodejs

可参考以下网址:
安装教程
注:我的版本12.18.3,高版本有些问题

3、安装Vercel CLI(需Nodejs)

npm i -g vercel

4、使用Vercel CLI登录Vercel

使用cmd终端执行

vercel login


输入邮箱(如果你是使用Github登录的Vercel,那就输入绑定Github的邮箱)
回车后会发生一封验证邮件,点击邮件中的验证链接,即完成验证,接着回到Vercel CLI的终端

终端中会提示登录完成

5、创建反代配置文件

在一个合适的位置(最好新建一个文件夹),里面新建一个文件,文件名可以随意
我的文件名是123.json
反代内容:

{
  "version": 2,
  "routes": [
      {"src": "/(.*)","dest": "https://www.xxx.com/$1"}
  ]
}

将上面的https://www.xxx.com/改为你想要反代的URL
将cd到之前新建文件夹(例如我的文件夹名cdn)的下面

在终端执行

vercel -A xxx.json --prod

将上面的xxx.json改为你的文件名
按照提示输入回车

注:前两个可以直接回车,n代表没有同名项目,新建项目,cdntjys是新建项目名
等待一会就完成了

默认的是 xxx.vercel.app 的域名
可以自定义域名,前往vercel官网网页修改

### 使用 Vercel 部署 GitHub 仓库中的项目 Vercel 是一个强大的前端部署平台,支持快速将 GitHub 仓库中的项目部署为可访问的网站。以下是详细的部署流程: #### 连接 GitHub 账号并导入项目 1. 登录 [Vercel 官网](https://vercel.com/) 并进入仪表板。 2. 点击 “New Project” 按钮,系统会引导用户连接 GitHub 账号[^1]。 3. 在 GitHub 账号中选择需要部署的仓库,并点击 “Import” 导入项目。 #### 配置构建设置 1. **自动识别框架**:Vercel 会根据项目内容自动检测所使用的框架(如 Vue.js、React、Next.js 等),并提供默认的构建命令和输出目录。例如,默认的构建命令是 `npm run build`,输出目录为 `dist` 或 `build`[^4]。 2. **自定义配置**:如果需要更改构建命令或输出目录,可以在 Vercel 的项目设置页面中手动修改。此外,还可以添加环境变量以满足不同部署需求。 #### 添加 `vercel.json` 文件 在项目的根目录下创建 `vercel.json` 文件,用于进一步定制部署行为。以下是一个基础示例: ```json { "version": 2, "builds": [ { "src": "index.js", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "/" } ] } ``` 该配置文件支持指定构建文件、使用特定的构建工具以及定义路由规则[^3]。 #### 实现自动部署 1. **配置 Deploy Hooks**:进入 Vercel 项目设置页面,找到 Git → Deploy Hooks 选项,创建一个新的 Hook(例如命名为 “Auto Deploy”)并复制生成的 Deploy Hook URL[^2]。 2. **设置 GitHub Webhooks**:前往 GitHub 仓库的 Settings → Webhooks 页面,添加一个新的 Webhook,将之前复制的 Deploy Hook URL 粘贴到 Payload URL 字段中,并选择触发事件(如 push)。 #### 解决国内访问问题 为了确保在国内能够正常访问部署的点,可以进行域名解析: 1.Vercel 项目设置页面中,绑定自定义域名。 2. 根据提示配置 DNS 记录,通常需要将域名的 CNAME 或 A 记录指向 Vercel 提供的地址。 3. 如果使用的是国内 CDN 服务,还可以通过反向代理等方式优化访问速度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值