由于之前的误操作，将原本的 github 图床全部删除了，因此在此处借用一下我在掘金发的图片～
# 前言
随着前端技术的发展，目前的项目部署服务已经几乎脱离了实际的服务器。市面上的各大平台都推出了他们自己的前端部署 Paas 服务，比较知名的有 Vercel、Neltify、Github Pages、Cloudflare Pages 等等。
不过受一些相关的政策或者其他因素影响，一些服务实际上是不对国内提供的，比如 Vercel 实际上在去年开始起就开始针对大陆 ip 进行了封锁。目前仍能够在国内比较顺畅的进行访问的有 Neltify、Github Pages 等。
这篇文章主要是为了解决 使用 Vercel 部署项目后无法正常访问的问题。
vercel 实际上是允许用户自定义域名的，也就是说你如果有自己的域名你可以同时绑定在一起，并且还有一个我们的 赛博大善人 Cloudflare 可以帮助我们进行域名解析以及 CDN 服务。引用我在找资料的时候知乎大神的介绍：
Cloudflare 的主流服务是域名解析，简单来说就是当你输入
baidu.com的时候告诉计算机它所指向的 ip 地址是什么。这也是一个可以白嫖的网站，因为基础版的域名解析也是免费的。虽然免费，功能却一样不少，甚至更安全更丰富。Cloudflare 对域名解析的同时提供代理服务，隐藏真实的 ip，保护站点免受不法攻击。你的应用在
vercel部署之后会自动生成一个以vercel.app为后缀的域名，也支持自定义域名。自定义域名可以通过 Cloudflare 进行域名解析并利用代理服务达到访问vercel的目的。
因此，我们可以配合 Cloudflare 的域名解析，和在国内服务商购买好的域名，我们就可以将 vercel 部署的应用的自带域名代理到我们自己的域名，这样就可以在国内访问我们的 vercel 应用了。并且将域名代理到 CF 之后还能享受到它提供的诸多服务，何乐而不为呢！
# 将腾讯云域名 DNS 解析转移到 Cloudflare 进行
# 准备一个自己的域名
既然是要代理到原来的域名，所以得准备一个自己在国内服务商购买的域名。具体的流程应该都清楚的吧也就不多说了，在腾讯云里面你只用登录控制台然后搜 “域名注册” 四个字就会提示你怎么操作了。唯一的要求就是你要付钱，我建议便宜点就行。
# 登录 Cloudflare 控制台并添加站点
前往 https://www.cloudflare.com/zh-cn 进行注册，有账号的直接登录。
进来之后看到如下页面，我之前加过一个站点所以会弹出来，没有的就可以不用管：
然后点击右侧的这个 添加站点 按钮就好了，进入下一步，输入你要加的域名（就是你之前在腾讯云上面买好的）然后点击继续：
然后选择计划，一般无特殊需求直接白嫖然后点击继续：
接下来 Cloudflare 会自动扫描你的部分 dns 记录。我这个域名是刚刚买的还没有进行一些解析的操作，所以是没有记录的。点击继续：
然后最关键的点来了，Cloudflare 会自动生成两条 dns 地址，就是下面两个云右边的字符串，你得拿着这两个地址去换掉腾讯云原本的解析：
至此，Cloudflare 部分的工作告一段落。CF 对整个网页提供的功能绝对绝对不止这么点，剩下的功能等待你们自己去发掘啦～之后我或许会写一篇文章，总结一下我使用 CF 的各种心得。
# 在腾讯云域名管理控制台更改 DNS 服务器解析
接下来启动腾讯云域名管理后台 https://console.cloud.tencent.com/domain。我这边有一个是已经解析到 cloudflare 所以 DNS 状态变成了其他，我现在要改的这个 nullvideo.cn 待会儿也会变成其他。
点击 “解析” 按钮右边的 “管理” 按钮，进入域名管理页，找到 DNS 解析部分：
然后点击 “修改 DNS 服务器”，把刚刚 Cloudflare 给我们的两个 DNS 地址黏贴到原本的 DNS 地址处：
保存然后等待 dns 缓存刷新即可，这可能需要 1-24 小时因为每个域名体质不一样。
然后回到 Cloudflare 控制台就好了。至此，更换完成了。
# 在 Vercel 上为自己部署好的前端应用添加新的域名解析
# 将自己的应用通过 vercel 进行部署
这个就不在这里展开说了，你只要登录 vercel 的官网 https://vercel.com 注册或者登录账号，然后自己跟着它的指示一步步来，最不济可以去查一查资料。。。反正这里不展开说了，默认大家都已经有一个部署好了的 vercel 应用了。
# 去 Cloudflare 添加域名解析记录
在 Cloudflare 添加 CNAME 类型的解析，比如这个项目就是把 nullvideo.cn 重定向到 null-video.vercel.app ，并打开 proxy 服务。我在这边为了对应根路径访问和 www 访问，两个都加上了。
# 对部署好的 vercel 应用添加除了自带域名的新域名解析
进入到部署好了的项目的主页，可以看到一个 “Domain” 的按钮，点击进入：
然后进入之后，输入你买好的域名然后点击 Add：
选择默认的方案，也就是把根域名和 www 解析一起加上。
添加之后会进行校验，校验完成了之后就可以进行访问了。。。看起来是这样，实际上还是有问题的！！！
# Vercel + Cloudflare = 重定向次数过多解决方案
你把域名解析添加好了，校验也通过了，然后你会直接点击访问：
没错，你会遇到重定向次数过多的问题。
这其实是 Cloudflare 为添加的站点加密模式设置错误导致的。
进入 Cloudflare Dashboard，点击有问题的域名，打开左侧的 SSL/TLS 设置，在 Overview 中设置加密模式为完全或完全（严格）即可。
这样子之后你的 vercel 应用应该是可以正常的在国内进行访问了。
希望能给大家使用 vercel 部署前端应用带来一些小小的帮助！
