最近在业余时间上线了一个基于向量搜索的AI 工具站，搜索的思路参考了 supabase 有关文本嵌入的内容，模板参考了 NextJS 提供的官方模板。最终成功的上线了该网站，也算跑通了上线 MVP 版本需要的所有流程。本文就详细的记录下，我是如何一步步将第一个网站成功部署上线，希望对你有所帮助。
本文包含以下内容：
- 上线网站的前置条件
- 在 Vercel 平台部署
- 在 cloudflare 平台托管
话不多说，直接开始吧。
前置条件
部署一个网站需要具备一系列的前置条件，由于这些不是本文的重点，因此在这里做一个大致的总结。
- 网站技术栈：全栈开发当然首推 NextJS，此次使用了NextJS 提供的官方模板，省去了大量的前端开发工作。
- 数据存储：此次使用了对独立开发友好的 supabase，免费版本包含了 500MB 的数据库大小，以及 1GB 的文件存储，对于刚刚起步的网站已经足够。
- 文本嵌入：由于网站的核心功能是基于向量搜索对应的 AI 工具，那么生成搜索文本所对应的向量就是必要条件了。此次使用了 Azure OpenAI 接口，通过官方接口获取对应的向量，然后和数据库中已经准备好的数据进行对比，再将结果返回。
- 域名购买：这里我通过阿里云进行了域名购买，如果你想购买 ai 后缀的域名，还是得选择国外的平台，我就是在 goDaddy 上购买了 anyto.ai 域名，留作后面使用。
- 代码托管：不用多说，这里基本上都是提交到 Github。这是我上线的网站 Github 地址，欢迎初学者学习～
以上就是我网站上线前的前置条件，后续还会围绕相关技术栈沉淀一些实践文章，欢迎大家持续关注。
在Vercel平台部署
不得不说Vercel 平台的体验真的十分丝滑，绑定了 Github 账号后，剩下的就是不断的下一步即可。下面给出部署时比较关键的一些内容。
绑定 Github 账号
首先就是绑定 Github 账号，这里按照 Vercel 网站的提示操作就行，没有什么好说的。
添加新项目
然后就可以把 Github 上的仓库添加进来了。这里在 Overview tab页点击右上角的 Add New 来添加新项目：
然后导入 Github 上面的项目，这里以截图中的 aitools 为例。点击 Import 跳转至新页面：
输入对应的项目名称，记得要将
.env.local 中保存的环境变量复制到对应的配置中，因为 .env.local 一般是配置在 .gitignore 中，要是不配置则无法读取对应的变量值。
最后点击 Deploy 即可。稍等片刻就可以部署成功。关于 Vercel 的部分就是这么多，待配置完 cloudflare 后，还需要再回来配置下域名相关。
在 cloudflare 平台托管
cloudflare 为开发者们提供了免费的 DNS，以及免费的全球 CDN，非常适合托管我们的网站。接下来就详细说说如何进行托管。
添加网站
首先需要注册登录 cloudflare，登录上去之后前往主页，这里我们用到的是左侧网站的功能。
在网站导航页中，我们需要 Add a Domain。点击按钮，输入需要添加的域名，并继续：
接下来选择 Free 版本，并继续：
接着，将域名服务商提供的 DNS 记录填入，当然你也可以不填，直接点击继续：
修改 DNS 服务器
接着，需要将 cloudflare 提供的 DNS 服务器，更新到域名服务商默认分配的 DNS 服务器，这里我是把阿里云默认分配的服务器更新为 cloudflare 提供的 DNS 服务器。
修改完 DNS 服务器后，cloudflare 会帮你检查服务器的更新情况。如果更新成功，会通过邮件通知，记得查看你的邮箱。
网站配置
官方会有一个快速入门指南，我们来看看需要进行哪些配置。
快速入门设置包含两项，其一是提高安全性，其二是摘要，我们按照默认配置保存即可。
其他设置
还有几个设置需要我们手动开启。
首先是设置 SSL 加密模式为严格模式。这样可以增加网页的安全性。
然后是开启 Tiered Cache：
然后是开启 Always Online：
然后是启动所有建议启动的配置：
对你的网站运行一次测试，看看得分：
添加 DNS 记录
我们的域名终于被成功托管了，现在还差最后一步，将域名和 Vercel 部署的项目关联起来。
前往 Vercel 的项目设置，打开域名对应的页面，添加域名：
添加域名后，将这两处提供的值复制，添加到 cloudflare 的 DNS 记录中：
注意，vercel 提供的 CNAME 的值后面有一个点（.），这里其实是不需要的。
添加完 DNS 记录后，再次前往 Vercel 项目设置的域名页面，如果验证通过，则为配置成功。
至此，网站就正式部署成功了。
总结
本文详细记录了如何通过 cloudflare + Vercel 的方式快速上线网站，该方案适合刚起步做独立产品的中小型项目。待产品做大做强后，可以再考虑其他付费方案。
最后，再安利一下我的网站：findingai.top。 目标是汇集来自全球的AI工具，并通过文本嵌入来检索数据。网站源码已开源，欢迎大家 star～
希望本文对你有所帮助，欢迎多多转发，多多交流。
