AI编程基础：在Vercel独立部署

本文是在与培训学员在实际工作的沟通过程中一些情况的记录。最近有个学员在将自己的智能体进行部署，其中的操作基本是一步步完成的，我觉得这个可能对于第一次操作的朋友能起到一些引导作用，所以记录在这里。

主要分为三个步骤：

• 申请域名并将域名托管到CloudFlare
• 在Vercel中部署项目
• 关联自己申请的域名

与在CloudFlare中部署类似，vercel的部署也是基于github仓库的devops（想了解github的一些基础知识可以参见AI编程基础：Git & Github和AI编程基础：开发工具中的Git），非常方便，一次部署完成后，专心在编码工作，然后在本地测试完成提交后，就可以完成自动部署，不需要其它额外的工作。

---

          申请域名并将域名托管到CloudFlare          

国内的云服务商诸如阿里云(aliyun.com)、腾讯云(dnspod.com)等等都提供域名注册服务，在国内注册的域名在国内的云服务器上部署时需要注意，运营前需要进行相关的ICP以及域名备案等操作。在国外呢，比如，godaddy.com、namecheap等。

为什么要将域名申请后托管到Cloudflare呢？

CloudFlare提供了很多免费的服务，比如免费的SSL证书，可以直接支持https，还提供了代理、安全等附加服务，最主要的是这些服务在还没有起量时都是免费提供的。除此之外 ，CloudFlare还有更多的服务，随着使用的深入可以逐步了解

在《AI编程基础：在CloudFlare部署》里已经对托管和配置有了较详细的说明，大家可以参考。

---

               在Vercel中部署项目               

先注册并登录vercel，此时可以看到下面的页面，这里还没有任何项目。在vercel.com中分为Hobby User和Pro User（$20/Month），创建的项目是没有限制的，但是资源是有限制的(比如DB是512M、K/V是1G），在刚开始时用户量不大，免费的额度完全够用。

我们可以直接从github.com中将自己的项目关联过来，在中间的菜单中点击『Import Project』后面的『Import』,开始导入的操作：

由于现在还没有与github.com中的仓库(repository)连接，所以在左边点击『Continue with Github』（下面的GitLab和BitBucket是另外两个代码管理仓库），此时vercel需要你授权它能访问你的用户空间：

如果你在当前的浏览器还没有登录github.com，那么你可能先github的登录窗口，你需要先在github.com完成登录，而登录后上面的这个页面是提示你确认你共享出来的权限，如果点击右下角『Authorize Vercel』则是将向vercel授权，成功后如下所示：

这里说明vercel已经得到你的授权，这里你可以安装vercel里的github插件进行后续的操作（在vercel中，每种功能也是以插件的方式提供的），这里直接点击『Install』即可，在下面的页面中选择为vercel授权访问的仓库范围，

在授权完成并确认后，vercel会读取指定用户当前在github.com的所有项目信息，此时用户可以选择进行导入（直接点击项目后面的『Import』即可）。

在import时，你可以做一些设置，如项目名称等，一般情况下vercel会自动判断项目现在使用的开发框架（不同的框架在编译时可能会有不同，vercel是next.js框架后面的公司，它对node.js相关的框架支持是最好的）

在上图中选择『Deploy』后，vercel会自动拉取项目并且在服务器部署，在部署完成后，如下图所示：

vercel为每个项目提供的完整的dashboard，vercel会为每个项目分配一个动态域名(以vercel.app结尾)，而且还会为每次发布(deploy)分配一个动态域名，

如果还没有申请自己的域名，那么可以直接使用vercel提供的项目域名进行分享，进行验证或测试。

---

               关联自己申请的域名               

在系统发布时我们肯定希望使用自己申请的更有修改或更易传播的域名，在vercel中部署好项目后，我们下一步需要将我们自己申请的域名与vercel绑定。这里假定你已经完成了将域名在CloudFlare的配置（在CloudFlare申请或解析），下面的描述都是以CloudFlare中的配置作为演示。不过，所有的域名提供商的操作流程基本都是一样的，如果你的域名没有迁移到CloudFlare进行管理（比如，在godaddy中)，具体的操作大同小异。

在vercel的项目dashboard中，选择右上角的『Domain』可以直接跳转到域名管理功能页面(当然，选择Dashboard上排Setting选项，再Setting左侧菜单中再选择Domains也可以进入域名管理页面)。

选择『Add Domain』开始添加自己的域名：

比如你的域名是：abc.xyz，那么这里可以填写：

• abc.xyz：你的根域名将绑定到当前的项目
• www.abc.xyz：www是我们访问主页的域名
• xxx.abc.zyx：xxx是二级域名，一般代表域名下的子页面

保存域名的配置，并且指定该域名与生产环境(Production)对应。记录下面框住的信息，

然后到你在CloudFlare的域名管理页：

选择『添加记录』，按上面vercel中提示的信息进行设置：

这里有一点需要强调的是，在初始设置时先将代理状态关闭，因为如果不关闭可能导致vercel验证失败，后续会进行说明，在设置完成保存后。回到vercel，

这里我们第一次设置时没有关闭代理状态，结果 vercel提示『Proxy Detected』，因为CloudFlare默认时会打开代理状态，这时它不会暴露实际的信息，所以无法验证，遇到这种情况只需要回到CloudFlare的DNS管理状态，将相应的DNS项的代理状态关闭，然后再回到vercel『Refresh Status』即可。

最后的状态是：

这样就可以直接使用你自己域名提供服务了！

最后再补充一点，当在开发后端服务时，一些数据库密码、API KEY之类的敏感信息在开发时会保存在.env文件中，而这个文件一般不要上传到github(因为github是共享的，这些敏感信息上传到github后，会造成信息泄露），在开发时对于这样的文件我们一般把它放到.gitignore文件中，git就会自动忽略这些文件。

但是在部署到服务器后，由于这个文件没有上传，那么相应的环境变量应当如何设置呢，这就需要在vercel的项目settings中进行管理，在Project的dashboard中选择成本部菜单的最后一项Settings，然后在左侧选择Environment Variables：

在此页面中将.env文件中定义的环境变量全部进行设置：

这样操作后，系统在启动时就会有相应的环境变量了！

Enjoy!!!

<