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

为什么使用 vercel

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

vercel 官方地址:vercel.com/

开始使用

img

  • 然后通过绑定的 github 或者 gitlab 导入需要部署的项目

img

  • 如果导入的项目是打包好的静态页,FRAMEWORK PRESET 选择 Other

img

  • 点击 deployed 进行部署,如果部署失败可以查看报错信息是不是上一步的某些选项没有覆盖。部署成功后会进入如图所示的界面

img

如何自定义域名

vercel 自定义域名

  • 下面演示如何自定义域名,默认情况下部署成功后 vercel 会给你生成一个默认的域名,如果想要修改成自己的域名可将域名名称修改成自己的。
  • 当选择修改成自己的域名名称后,vercel 会检查域名指向的 DNS 对不对,如果不对的话会提示你域名的 DNS 应该如何配置,按照 vercel 提示的 DNS 信息

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

img

配置多个域名

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

vercel 多域名配置

自定义Vercel服务器位置

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

Vercel服务器选择

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

自定义Header缓存时间

vercel.com/docs

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

vercel.json

{
  "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的流量目前看着没限制,如是,可以使用如下重定向方法

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

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

个人使用最终版本如下,各位使用修改对应部分即可。文件路径 [hexo]/source/vercel.json

{
    "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"
                }
            ]
        },
        {
            "source": "/medias/(.*)",
            "headers": [
                {
                    "key": "Cache-Control",
                    "value": "public, s-maxage=2592000, max-age=2592000"
                }
            ]
        },
        {
            "source": "/medias_webp/(.*)",
            "headers": [
                {
                    "key": "Cache-Control",
                    "value": "public, s-maxage=2592000, max-age=2592000"
                }
            ]
        },
        {
            "source": "(.*).html",
            "headers": [
                {
                    "key": "Cache-Control",
                    "value": "public, s-maxage=1800, max-age=1800"
                }
            ]
        },
        {
            "source": "(.*).js",
            "headers": [
                {
                    "key": "Cache-Control",
                    "value": "public, s-maxage=2592000, max-age=2592000"
                }
            ]
        },
        {
            "source": "(.*).css",
            "headers": [
                {
                    "key": "Cache-Control",
                    "value": "public, s-maxage=2592000, max-age=2592000"
                }
            ]
        },
        {
            "source": "(.*).json",
            "headers": [
                {
                    "key": "Cache-Control",
                    "value": "public, s-maxage=2592000, max-age=2592000"
                }
            ]
        }
    ],
    "regions": [
        "hkg1"
    ],
    "redirects": [
        {
            "source": "/gtag/js",
            "destination": "https://www.googletagmanager.com/gtag/js"
        },
        {
            "source": "/atom.xml",
            "destination": "https://cfblog.17lai.site/atom.xml"
        },
        {
            "source": "/rss.xml",
            "destination": "https://cfblog.17lai.site/rss.xml"
        }
    ]
}

Vercel 账号被禁怎么办?

Your Personal Account was automatically blocked because its usage exceeds the fair use policy

最近某个 vercel app 流量超标了! 程序可能被攻击了,或者程序存在某个bug。发现的时候,账号已经被禁用了。

等了一个月后,账号没有自动解禁!

怎么解封了? 在这里 https://vercel.com/help#issues 点击 【Create a case】,然后邮件联系解封!邮件回复说:

accounts will not auto-unblock after they’ve been blocked for exceeded limits. I can do that manually, but I must first be sure that the underlying issue has been resolved.

技术支持要求解决掉超出限制的原因,然后再回复邮件!应该就可以解禁了。

删除了被攻击或者出bug的 vercel app 之后再次回复邮件,得到回复:

After review, I have unblocked your account. Please note that this is a one-time consideration, and future usage overages may require purchasing a Pro team subscription to unblock your account.

账号终于解禁了,但是再次超出限制就得交钱解禁? 20$每月的价格太高了!

乒乓部署

也可以叫旋转门部署。

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

使用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就顶上前台!

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

参考&致谢

系列教程

全部文章RSS订阅

Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

笔记系列

Note分类RSS订阅

Gitbook使用系列

Gitbook分类RSS订阅

Gitlab 使用系列

Gitlab RSS 分类订阅


作者: 夜法之书
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
评论
数据加载中 ...
 上一篇

阅读全文

Potplayer终极优化教程实现PC视频播放最强画质
Potplayer终极优化教程实现PC视频播放最强画质 Potplayer终极优化教程实现PC视频播放最强画质
视频播放器使用还是有不少细节需要注意的。本文介绍流行播放器Potplayer 配置方法,搭配 Emby 和 embyLaunchPotplayer 使用的效果更佳!
2022-09-06
下一篇 

阅读全文

hexo博客博文撰写篇之完美笔记大攻略终极完全版
hexo博客博文撰写篇之完美笔记大攻略终极完全版 hexo博客博文撰写篇之完美笔记大攻略终极完全版
hexo博客文章卷写技巧,包括MarkDown,hexo技巧,html插入,美化方法,写作方法,写作工具,知识储备方法,开发工具,等一系列全介绍!终极攻略篇
2022-08-17
  目录