由于之前的误操作,将原本的 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 进行

# 准备一个自己的域名

既然是要代理到原来的域名,所以得准备一个自己在国内服务商购买的域名。具体的流程应该都清楚的吧也就不多说了,在腾讯云里面你只用登录控制台然后搜 “域名注册” 四个字就会提示你怎么操作了。唯一的要求就是你要付钱,我建议便宜点就行。

image-20231114221918628

# 登录 Cloudflare 控制台并添加站点

前往 https://www.cloudflare.com/zh-cn 进行注册,有账号的直接登录。

进来之后看到如下页面,我之前加过一个站点所以会弹出来,没有的就可以不用管:

image-20231114222155276

然后点击右侧的这个 添加站点 按钮就好了,进入下一步,输入你要加的域名(就是你之前在腾讯云上面买好的)然后点击继续:

image-20231114222310561

然后选择计划,一般无特殊需求直接白嫖然后点击继续:

image-20231114222525730

接下来 Cloudflare 会自动扫描你的部分 dns 记录。我这个域名是刚刚买的还没有进行一些解析的操作,所以是没有记录的。点击继续:

image-20231114222725038

然后最关键的点来了,Cloudflare 会自动生成两条 dns 地址,就是下面两个云右边的字符串,你得拿着这两个地址去换掉腾讯云原本的解析

image-20231114222848877

至此,Cloudflare 部分的工作告一段落。CF 对整个网页提供的功能绝对绝对不止这么点,剩下的功能等待你们自己去发掘啦~之后我或许会写一篇文章,总结一下我使用 CF 的各种心得。

# 在腾讯云域名管理控制台更改 DNS 服务器解析

接下来启动腾讯云域名管理后台 https://console.cloud.tencent.com/domain。我这边有一个是已经解析到 cloudflare 所以 DNS 状态变成了其他,我现在要改的这个 nullvideo.cn 待会儿也会变成其他。

image-20231114223151397

点击 “解析” 按钮右边的 “管理” 按钮,进入域名管理页,找到 DNS 解析部分:

image-20231114223417101

然后点击 “修改 DNS 服务器”,把刚刚 Cloudflare 给我们的两个 DNS 地址黏贴到原本的 DNS 地址处:

image-20231114223642097

保存然后等待 dns 缓存刷新即可,这可能需要 1-24 小时因为每个域名体质不一样。

然后回到 Cloudflare 控制台就好了。至此,更换完成了。

# 在 Vercel 上为自己部署好的前端应用添加新的域名解析

# 将自己的应用通过 vercel 进行部署

这个就不在这里展开说了,你只要登录 vercel 的官网 https://vercel.com 注册或者登录账号,然后自己跟着它的指示一步步来,最不济可以去查一查资料。。。反正这里不展开说了,默认大家都已经有一个部署好了的 vercel 应用了。

# 去 Cloudflare 添加域名解析记录

在 Cloudflare 添加 CNAME 类型的解析,比如这个项目就是把 nullvideo.cn 重定向到 null-video.vercel.app ,并打开 proxy 服务。我在这边为了对应根路径访问和 www 访问,两个都加上了。

image-20231114225443325

# 对部署好的 vercel 应用添加除了自带域名的新域名解析

进入到部署好了的项目的主页,可以看到一个 “Domain” 的按钮,点击进入:

image-20231114224501986

然后进入之后,输入你买好的域名然后点击 Add:

image-20231114224748277

选择默认的方案,也就是把根域名和 www 解析一起加上。

image-20231114225734780

添加之后会进行校验,校验完成了之后就可以进行访问了。。。看起来是这样,实际上还是有问题的!!!

# Vercel + Cloudflare = 重定向次数过多解决方案

你把域名解析添加好了,校验也通过了,然后你会直接点击访问:

image-20231114225918748

没错,你会遇到重定向次数过多的问题。

这其实是 Cloudflare 为添加的站点加密模式设置错误导致的。

进入 Cloudflare Dashboard,点击有问题的域名,打开左侧的 SSL/TLS 设置,在 Overview 中设置加密模式为完全或完全(严格)即可。

image-20231114230301888

这样子之后你的 vercel 应用应该是可以正常的在国内进行访问了。

希望能给大家使用 vercel 部署前端应用带来一些小小的帮助!