使用Vercel对网站进行反向代理

前言

因为网站都是部署在家里的nas，运营商禁用了80和443端口，所以做了DDNS的时候需要使用端口进行访问，如果需要直接使用域名访问，则需要进行使用一些域名代理的方式，如frp、nps之类的，之前买了一个国外的vps，然后使用nps进行代理的，但是这玩意时不时就会断，就很麻烦，昨天看到了有人使用vercel的方式进行反向代理，因此试了试，效果还不错，也可以自定义域名，相当于白嫖了Vercel的CDN。

配置

1、首先需要在本机上安装Vercelnpm i -g vercel

2、安装好以后，使用vercel login命令进行登录，登录过程中根据提示操作即可

3、登录成功后，新建一个json文件，里面的内容如下，其中https://nas.wangboweb.site:9201就是你要代理的地址，因为我的博客地址是这个

{
    "version": 2,
    "routes": [
      {"src": "/(.*)","dest": "https://nas.wangboweb.site:9201"}
    ]
  }

4、然后在这个json文件所在目录，打开终端，执行以下命令，比如我的json文件命名是web.json
verceL -A web.json --prod

5、执行后他就开始部署了，根据提示信息进行相关选择配置接口。部署成功后，控制台会给你一个默认的域名，这个域名打开就能看到你代理的网站了。同时在vercel控制台也能看到这个服务。

6、再到服务settings-domains中绑定你的域名

7、在域名解析控制台添加对应的CNAME，记录值就是cname.vercel-dns.com，添加完成后解析成功就能正常访问了，ssl证书也省了。

其他

当然，在json文件中还可以配置一些其他api相关的代理，如

{
  "routes": [
    { "src": "/redirect", "status": 308, "headers": { "Location": "https://example.com/" } },
    { "src": "/custom-page", "headers": {"cache-control": "s-maxage=1000"}, "dest": "/index.html" },
    { "src": "/api", "dest": "/my-api.js" },
    { "src": "/users", "methods": ["POST"], "dest": "/users-api.js" },
    { "src": "/users/(?<id>[^/]*)", "dest": "/users-api.js?id=$id" },
    { "src": "/legacy", "status": 404},
    { "src": "/.*", "dest": "https://my-old-site.com"}
  ]
}

更多的可以查看官方文档：https://vercel.com/docs/project-configuration#legacy/routes