（图片拍摄于工位窗外）
前言
之前在掘金上看到一篇文章，上面说react团队的某个开发者离职了，去了Vercel这个公司。我当时就好奇Vercel是什么公司，竟然能吸引react的开发者加入。于是我就打开了百度搜索Vercel，这一搜不得了，原来还有这么厉害的公司。于是就有了这篇文章......
已经部署完毕的网站：Vite App (nodehub.cn)
写在文前
1、什么是Vercel
Vercel是一个提供静态网站部署和全栈应用程序部署服务的云平台。它帮助开发人员将他们的网站、应用程序和服务快速部署到全球性的 CDN（内容分发网络）上，从而实现快速加载和高性能的访问体验。
Vercel最初是针对Next.js应用程序的部署服务而知名，但现在已经发展成支持更广泛的技术栈，包括React、Vue、Angular、Svelte等前端框架，以及Node.js、Python、Go等后端语言。Vercel提供了简单易用的命令行工具和网站界面，让开发人员能够轻松部署、管理和扩展他们的应用程序。
通过Vercel，开发人员可以享受到自动化部署、快速构建、即时预览以及全球 CDN 加速等功能，帮助他们更专注于开发应用程序本身，而无需担心基础设施和部署的复杂性。Vercel也提供了团队协作和版本控制功能，使团队成员能够方便地协作开发和管理多个环境的部署。
2、什么是Cloudfare
Cloudflare是一家全球领先的云端网络和安全公司，提供了各种云端解决方案，包括内容传送网络（CDN）、云安全、DDoS防护、DNS服务、边缘计算等。Cloudflare的目标是帮助网站提高性能、加强安全性，并保护他们免受各种网络威胁的侵害。
通过Cloudflare的CDN服务，网站可以将其内容缓存到全球各地的服务器上，实现更快的网站加载速度和更可靠的内容传送。Cloudflare的安全服务包括防火墙、DDoS防护、恶意软件检测等，可以帮助网站抵御各种网络攻击和保护用户数据安全。
Cloudflare还提供了专业的DNS服务，帮助网站管理域名解析、优化DNS性能，并提供更快速、更安全的解析服务。此外，Cloudflare还提供边缘计算功能，使开发人员能够在全球各地的服务器上运行代码，实现更快的响应时间和更高效的计算资源利用。
总的来说，Cloudflare为用户提供了一个全面的、可靠的云端解决方案，帮助他们提高网站性能、加强安全性，并实现全球范围的网络优化。
使用github登录Vercel，并在Vercel上面部署项目
Vercel官网：vercel.com/
首先你需要将你的代码上传到github或者gitlab中。
然后打开Vercel的官网使用github或者gitlab登录Vercel。这么做的目的是为了Vercel关联上你的仓库。登录完成后你的界面应该是这样的。
然后点击add new下面的 project按钮，新建一个项目。
vercel会自动识别出我们github仓库下面的代码仓库，我们只需点击import导入即可。右侧是一些项目模板，二者选一即可。
接下来如图所示，vercel会识别出我们项目用的什么构建插件，比如我用的是我之前写的用vue3+vite写的贪吃蛇小游戏。vercel会识别出vite，第二张图片是一些构建命令，我们使用默认就好。然后点击deploy就行。
部署成功！点击右上角按钮，可查看部署的该项目的详情。
这个就是vercel给我们分配的域名，我们可以点击查看我们已经部署完毕的网站。此时如果你去访问是访问不到的。 由于某些原因，vercel.app 被 DNS 污染（即被墙），目前在国内已经无法打开，除非你有自己的域名.
使用Cloudfare解决 Vercel 部署网站在国内被墙的问题
你需要准备
- 申请一个国内可访问的域名（新手可1元购于阿里云，
xyz,top这种后缀都是很便宜的） - 注册 Cloudfare（为什么不用阿里云自带的DNS? 免费版不支持海外🚬）
1、首先你需要在这里把自己购买的域名添加到cloudfare，然后选择免费计划。
2、点进该域名的配置面板，增加两条 DNS 配置。76.223.126.88 是 vercel 贴心为墙内用户准备的 IP。添加@记录后，保存后显示的是你的域名.
然后你需要把下面cloudflare名称服务器下的两行代码，直接复制粘贴到阿里云后台的 DNS 修改 - DNS 服务器。
接下来是等待时间，Cloudfare 会给你发邮件的。通过后，记得配置 SSL - strict, 否则会因重定向过多无法打开。
然后打开 Vercel 的部署后台.
最后就大功告成啦！
已经部署完毕的网站：Vite App (nodehub.cn)