Vercel部署高级用法教程

This page has no en version yet, showing default language content

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

为什么使用 vercel

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

vercel 官方地址：vercel.com/

开始使用

首先注册一个账号 https://vercel.com/
注册成功后进入页面，点击 News Project

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

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

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

如何自定义域名

腾讯云域名地址：console.cloud.tencent.com/domain
vercel 静态页挂载地址：
进入到 setting 中可对项目进行一些设置，如项目名称

vercel 自定义域名

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

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

配置多个域名

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

vercel 多域名配置

自定义Vercel服务器位置

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

Vercel服务器选择

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

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免费流量，怎么办？

有两种解决方法：

使用 DNS 多线路分流，例如DNSPOD 多线路负载均衡
使用 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": "/medias/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/medias_webp/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.woff2",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" },
        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    },
    {
      "source": "/(.*)\\.mjs",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.js",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.css",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.webp",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.json",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=7776000, max-age=7776000" }
      ]
    },
    {
      "source": "/sw.js",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" }
      ]
    },
    {
      "source": "/(.*)\\.html",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=1800, max-age=1800" }
      ]
    }
  ],

  "regions": ["hkg1"]
}

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$每月的价格太高了！