如何在国内访问vercel部署应用?

一、前言

在今年暑假的字节青训营的最终大项目的答辩当中,当我还在为我的前端项目如何部署到服务器而焦头烂额之时,许多牛人在描述自己的项目部署经历的时候只是随口的提了一句------ 使用 Vercel 进行前端项目的一键部署。 我寻思还有这么牛逼的玩意儿?吓得我赶紧去查了一下------有一说一这是我第一次对部署项目感到这么的简单和轻松,这玩意能够自动检测你在git上面的提交(需要指定分支),然后自动的进行重新构建并且重新部署,最最最重要的就是 它还会自动生成一个免费的域名并且自带SSL证书也就是可以直接通过https进行访问。 这玩意不知道能省多少钱。

当天晚上我用这玩意一次性把我写的乱七八糟的一堆项目全都扔上去了,也是美滋滋的享受到了自动部署的安逸。我买的服务器就纯纯作为一个后端服务的提供者就好了;前端的应用一律用vercel一股脑扔上去就好了。

但是,vercel在目前貌似已经禁止国内进行访问了。 别问,问就是一些相关的政策出台。。。那我那些扔上去的项目咋办啊???

我在找了一些资料之后,发现vercel实际上是允许用户自定义域名的,也就是说你如果有自己的域名你可以同时绑定在一起。

并且还有一个域名解析神器Cloudflare。引用我在找资料的时候知乎大神的介绍:

Cloudflare的主流服务是域名解析,简单来说就是当你输入baidu.com的时候告诉计算机它所指向的ip地址是什么。这也是一个可以白嫖的网站,因为基础版的域名解析也是免费的。虽然免费,功能却一样不少,甚至更安全更丰富。Cloudflare对域名解析的同时提供代理服务,隐藏真实的ip,保护站点免受不法攻击。

你的应用在vercel部署之后会自动生成一个以vercel.app为后缀的域名,也支持自定义域名。自定义域名可以通过Cloudflare进行域名解析并利用代理服务达到访问vercel的目的。

因此,我们可以配合Cloudflare的域名解析,和在国内服务商购买好的域名,我们就可以vercel部署的应用的自带域名代理到我们自己的域名 ,这样就可以在国内访问我们的vercel应用了。

二、将腾讯云域名DNS解析转移到Cloudflare进行

一、准备一个自己的域名

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

二、登录Cloudflare控制台并添加站点

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

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

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

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

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

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

至此,Cloudflare部分的工作告一段落。

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

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

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

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

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

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

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

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

这个就不在这里展开说了,你只要登录vercel的官网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 部署前端应用带来一些小小的帮助!

相关推荐
顾平安12 分钟前
手写 PromiseA+ 实现,轻松通过 872 条用例
前端
胡西风_foxww15 分钟前
【ES6复习笔记】对象方法扩展(17)
前端·笔记·es6·对象·方法·扩展·对象方法扩展
努力的小T43 分钟前
Linux apt-mirror 同步搭建本地源详解教程
linux·运维·服务器·ubuntu·云计算·debian
bin91531 小时前
npm报错
前端·npm·node.js
一指流沙q1 小时前
Chrome被360导航篡改了怎么改回来?
前端·chrome
Mitch3111 小时前
【漏洞复现】CVE-2014-3120 & CVE-2015-1427 Expression Injection
运维·web安全·elasticsearch·docker·apache
路飞雪吖~1 小时前
【Linux】编写简易shell && 深度理解命令行解释器 && 环境变量 && 内建命令
linux·运维·服务器
laocooon5238578861 小时前
HTML CSS 超链
前端·css·html
LUwantAC1 小时前
CSS(二):美化网页元素
前端·css
神奇侠20241 小时前
基于Centos7.X系统端口占用处理
linux·运维·服务器