Vercel部署高级用法教程

本文由 Fluid 用户授权转载,版权归原作者所有。

本文作者:夜法之书
原文地址:https://blog.17lai.site/posts/e922fac8/

Vercel使用有不少需要仔细配置的地方,可惜的是,自定义Vercel缓存时间,Vercel重定向等使用方法略复杂,不是开箱即用,有一定使用门槛,故这里单独列一篇文章详细说明Vercel的一些高级使用方法!

为什么使用 vercel

  • 国内 Github Pages 速度较慢。
  • vercel 速度快且能够自定义域名,能实现和 Github Pages 一样的效果

vercel 官方地址:vercel.com/

开始使用

  • 首先注册一个账号 https://vercel.com/
  • 注册成功后进入页面,点击 News Project
img
  • 然后通过绑定的 github 或者 gitlab 导入需要部署的项目
img
  • 如果导入的项目是打包好的静态页,FRAMEWORK PRESET 选择 Other
img
  • 点击 deployed 进行部署,如果部署失败可以查看报错信息是不是上一步的某些选项没有覆盖。部署成功后会进入如图所示的界面
img

如何自定义域名

  • 腾讯云域名地址:console.cloud.tencent.com/domain
  • vercel 静态页挂载地址:
  • 进入到 setting 中可对项目进行一些设置,如项目名称
vercel 自定义域名
  • 下面演示如何自定义域名,默认情况下部署成功后 vercel 会给你生成一个默认的域名,如果想要修改成自己的域名可将域名名称修改成自己的。
  • 当选择修改成自己的域名名称后,vercel 会检查域名指向的 DNS 对不对,如果不对的话会提示你域名的 DNS 应该如何配置,按照 vercel 提示的 DNS 信息

在自己的域名的 DNS 配置中进行配置,如图

img

配置多个域名

对其他新增的域名选择重定向到自己的主域名即可

vercel 多域名配置

自定义Vercel服务器位置

Vercel线路已经很快了,但是可以通过选择Vercel部署服务器位置,更进一步加快中国大陆,亚洲区域的访问速度!

Vercel服务器选择

香港服务器虽然没有严格测试,但是中国大陆速度应该是最快的!

自定义Header缓存时间

vercel.com/docs

使用Vercel必备配置,本地缓存加速访问!

vercel.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"headers": [
{
"source": "/sw.js",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=0, must-revalidate"
}
]
},
{
"source": "(.*)",
"headers": [
{
"key": "Cache-Control",
"value": "public, s-maxage=86400, max-age=86400"
}
]
}
]
}

Vercel自定义404

learn how to customize the 404 page.

Vercel流量超标怎么办?

最近查看了一下Vercel流量使用情况,发现RSS订阅流量太大了,占了30GB流量!

免费Vercel账户每月只有100G免费流量,怎么办?

有两种解决方法:

  1. 使用 DNS 多线路分流,例如DNSPOD 多线路负载均衡
  2. 使用 Vercel 提供的 redirects 或者 rewrites功能,把rss访问重定向到其它部署方式,例如Cloudflare
Vercel 流量

查看方法:dashboard -> usage

由于个人blog也部署到Cloudflare上面了,https://cfblog.17lai.site,Cloudflare的流量目前看着没限制,如是,可以使用如下重定向方法

1
2
3
4
"redirects": [
{ "source": "/atom.xml", "destination": "https://cfblog.17lai.site/atom.xml" },
{ "source": "/rss.xml", "destination": "https://cfblog.17lai.site/rss.xml" }
]

详细 Cloudflare 部署方法,戳 cloudflare Pages 部署

乒乓部署

也可以叫旋转门部署。

解决调试博客插件,修改半成品文章时部署到云端会影响正在查阅博客的用户的问题!

使用Docker版本本地预览是很不错,但是 jsdelivr 版本发布需要在 Github 生成新 release 这时本地就不行了。乒乓部署可以解决这个问题!

具体方法就是同时部署到两个地方A和B,博客域名在两个服务器之间切换。这里以 Vercel 为例

准备工作:

  • 创建2个Github仓库,对应服务器A和B的部署
  • 建立两个服务器A和B,分别关联两个 Github 仓库
  • 把调试完毕的代码上传到两个仓库
  • 这时通过服务器A和B都是可以正常浏览的

要调试的时候:

  • 发布到A之前,把博客域名转移到服务器B
  • 在服务A做一些调试,在线 debug 工作
  • 特别是在线 pageseed 测试调优,这种事必备方法。简单不需要新的 jsdelivr 版本调试本地 docker-hexo 调试即可!
输入想转移的域名
点击确认转移域名

调试完毕后:

  • 把域名切换到服务器A
  • 同时部署到服务器B,服务器B同步A的部署内容,以便下次备用

总结就是服务器A现行,服务器B做后备,调试发布使用A,调试A的时候B就顶上前台!

这样,调试和正常部署网络服务两不误。是不是感觉自己是个大聪明!

参考&致谢

系列教程

  • markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe

Vercel部署高级用法教程
https://fluid-dev.cn/posts/hexo-vercel/
作者
夜法之书
发布于
2022年10月10日
许可协议