CI/CD学习第2期 - 域名购买到绑定vercel应用

在哪里可以购买

可以分国内和国外。

国内有 阿里云、腾讯云、京东云、华为云等可以购买,注意在国内购买域名需要实名制。

国外有 Cloudflare、Dynadot、Namecheap、NameSilo等,国外一般只需要邮箱认证就行,注意 Cloudflare 当前不支持支付宝支付。

关于备案

不管是国内还是国外买的域名,和备案没有关系,备案不看域名的购买地方,而是看项目部署的服务器是在国内还是国外,如果是服务器是在国内,则需要备案。

这边文章主要讲自定义域名如何绑定到vercel上,vercel服务在国外,所以和备案没关系,这里关于如何备案就不多说~~(其实写这边文章的时候我也不知道怎么备案)~~。

注:中国香港也不需要备案。

Dynadot 购买域名

我的域名是在 Dynadot 上购买的,Dynadot 是海外华人开的,价格也还行,并且支持支付宝(官网地址:购买域名 - 注册、管理、更省钱 | Dynadot域名注册商)。

并非打广告,从哪里购买看个人喜好

首先注册一个 Dynadot 账号,然后搜索自己感兴趣的域名,然后支付,支付完会有个认证链接发送到邮箱,15 天之内需要认证,否则到时候域名会停止DNS解析(记得去邮箱那里点击下认证链接就行...)。

购买成功长这个样子(我买的是 com,下面的 vision 是免费送了一年):

默认的 DNS 设置是 Dynadot Parking,Dynadot Parking 的意思是当访问域名的时候,会提供一个默认的网页,提示这个域名已经被注册了,长下面这个样子:

使用 Cloudflare DNS 解析

Dynadot 也有 DNS 解析功能,为什么选Cloudflare,主要是 Cloudflare 比较热门(就这么朴实无华,所以Dynadot的其他功能也不是很了解,主要就是为了购买个域名,如果Cloudflare也支持支付宝支付,就直接在Cloudflare上买域名了)。

Cloudflare 添加域名

右上角选择 Connect a domain:

输入自己购买的域名,然后点击继续:

然后选择 Free:

然后一直点击继续,最后来到了这个界面:

复制这两个地址,然后再来到 Dynadot 这里,我们需要把 自己购买的域名 DNS 解析全交给 Cloudflare 负责。

Dynadot 配置DNS服务为Cloudflare地址

先将状态改为解锁状态,否则无法更改设置:

然后点击 DNS Settings:

选择 Name Servers,并将上面复制的两个地址填上,然后保存:

注意别忘记锁定下域名:

到此 Dynadot 这边的工作就到此为止。

大概等几分钟,Cloudflare 接管了域名会收到一个邮件,大概长这个样子:

然后就可以去 Cloudflare 看板去配置域名解析。

解析vercel地址

进入vercel,这是我之前写的一个demo项目,进入domains配置:

添加域名保存:

就会得到两个异常的配置:

展开它们,注意下面圈出来的,等会需要配置到cloudflare上:

现在来到Cloudflare上,进入DNS Records:

将当前的配置全部删掉(不放心可以截个图保存下,出了什么异常可以恢复),然后配置vercel上的,也就是上面说圈起来的:

最终效果如下,注意把 Proxy关掉,只用来 DNS 解析:

有人会质疑为啥要清空,清空之前的配置会不会有什么影响,反正我是直接大力出奇迹 0.0

然后vercel那边的domains配置就能正常(如何还是异常可以点击refresh刷新下):

到此为止所有的工作都完成了,下面见证奇迹的时候,当访问我们自定义的域名,可以成功访问vercel部署的项目:

注意几点

Cloudflare开启HTTPS

为了安全性,建议开启HTTPS:

配置子域名

现在就只有一个域名 congvee.com,如果我有很多个项目怎么办,一个地址不能同时绑定多个项目。

要不就再买域名,还有个更好的做法是分出来子域名,一个项目配置一个子域名,理论上就实现了买一个域名,可以部署无限个项目。

现在回到vercel的domains配置那里,将之前的两个配置删掉,恢复原来的样子:

加入我想使用子域名 notion.congvee.com 绑定刚才这个项目,那么可以这样做:

先绑定子域名:

还是一样的道理,配置到cloudflare上:

最后样子长这个:

同样回到 vercel 那边,发现也正常了:

又是见证奇迹的时候:

相关推荐
IAR Systems9 天前
松下电工借助IAR CI/CD解决方案,实现品质与效率双重飞跃
ci/cd
Cherry的跨界思维9 天前
【AI测试全栈:质量】47、Vue+Prometheus+Grafana实战:打造全方位AI监控面板开发指南
vue.js·人工智能·ci/cd·grafana·prometheus·ai测试·ai全栈
古斯塔夫歼星炮9 天前
Dify + Jenkins 实现AI应用持续集成与自动化部署
ci/cd·jenkins·dify
codingWhat9 天前
手把手系列之——前端工程化
ci/cd·devops·前端工程化
测试渣10 天前
持续集成中的自动化测试框架优化实战指南
python·ci/cd·单元测试·自动化·pytest
我的xiaodoujiao11 天前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 51--CI/CD 4--推送本地代码到Git远程仓库
python·学习·测试工具·ci/cd·pytest
deephub12 天前
并行多智能体系统的协调测试实战:从轨迹捕获到CI/CD的六个步骤
人工智能·ci/cd·大语言模型·aiagent
你的论文学长12 天前
文本处理的 CI/CD:用 NLP 静态分析解决查重飘红与 Format Error
人工智能·ci/cd·自然语言处理·重构·论文·学习方法
Elastic 中国社区官方博客14 天前
Agentic CI/CD:使用 Kubernetes 部署门控,结合 Elastic MCP Server
大数据·人工智能·elasticsearch·搜索引擎·ci/cd·容器·kubernetes
莫比乌斯之梦14 天前
使用 Docker 运行 Jenkins:快速搭建高效 CI/CD 环境指南
ci/cd·docker·jenkins