正文预览
01 将网页产品部署到Cloudflare！
这里我们以上一个柴犬表情包的Case作为案例，带着大家一步步把你做出来的网页产品部署到云端，让你的亲朋好友都可以使用和访问！
这里我们需要了解一个新的产品：Cloudflare，免费的赛博菩萨！当然，把产品部署到网上有很多种方案，这里我们先介绍Cloudflare。
注意，这是一个全球性的网络服务提供商（但国内访问有时候会有些限制），免费额度非常慷慨：
- Workers（每天 100,000 次请求）
- Pages（每月 500 次构建）
- 。。其他更多
咦，你可能会问，什么是Workers，什么是Pages，这个概念黄叔要先稍微解释下，还是老样子，如果能理解更好，不能理解也不影响后续的动作，先做出来就成：
前面我们已经实现了通过网页生成柴犬表情包了对吧，是不是在开发的过程中，把Coze API返回的结果做了处理呢？
我们可以这么简单理解下：
<whiteboard token="DDXTwwYcYhKfO7btZ9Cc9scznJe"></whiteboard>
我们在网页上输入表情，然后网页的一个功能部分会把我们的输入，通过API传给Coze，Coze悄咪咪的躲在后面生成表情包图片后，再通过API返回给前端网页，并且把图片呈现出来，我们才再前端网页上看到了图片。
但是现在这个前端网页只是在我们电脑上，如果我们希望全球的用户都能看到它，怎么办呢？Cloudflare就是干这事的啦，我们现在需要把前端网页和JS部分都放到网上：
<whiteboard token="QVENwodZMhLphRbnh0jcRoxensf"></whiteboard>
看到了不，相当于搬家！我们把前端网页和JS部分，都搬家到Cloudflare上了，这样用户通过网络，只要能访问到Cloudflare，就能访问到我们的网页了（姑且这么简单理解哈）
即使没理解也没事，下面我们先干！
步骤1：注册Cloudflare账号
https://www.cloudflare.com/zh-cn/
点击中间的“免费开始使用”
使用适合你的方式登录注册！
登录后，点击左侧列表的“计算（workers）”，然后再点击“Workers 和 Pages“
找到了吧！在页面中找到创建按钮，点击进行创建
点击创建worker按钮
输入worker名称，这里填写 **ai-biaoqingbao ，**完成后点击右下角的部署按钮
点击“部署”后，会进入下面的页面：
步骤2：部署Worker
接上一步，我们在这个页面点击编辑代码，会进入到代码编辑页面：
OK，右侧在转呀转，说明它在工作呢，工作啥呢？对，下面我们来告诉Worker应该干啥！
步骤3：打开Windsurf，再用Windsurf 打开biaoqingbao文件夹
对，就是上一个柴犬表情包的文件夹，用Windsurf打开它！（黄叔本地电脑上的文件夹是“biaoqingbao-正式”
步骤4：修改好下面这段代码，并提交给Windsurf生成
🦾 API key 和bot id 的替换参考之前的 柴犬表情包案例
写一个Cloudflare中的workers脚本，主要功能是请求一个API，注意API是流式返回，下面是API的请求样例，注意处理跨域问题。
curl --location --request POST 'https://api.coze.cn/v3/chat' \
--header 'Authorization: Bearer pat_SCVB8n0KYoXaXLJ9j384iQS7JG*****' \
--header 'Content-Type: application/json' \
--data-raw '{
"bot_id": "7450145225****",
"user_id": "123456789",
"stream": true,
"auto_save_history":true,
"additional_messages":[
{
"role":"user",
"content":"震惊",
"content_type":"text"
}
]
}'
同时创建html页面测试API调用，worker使用get方式请求，入参为data，入参在点击发送按钮后会替换到请求体的content中进行API请求
将worker返回内容展示在页面上。一步一步来不要着急。
拼接好代码在Windsurf中发送，会创建worker.js文件和html文件
在Windsurf里点击worker.js，能看到它所有的代码，我们把这些代码全选中，然后复制：
步骤5：将worker.js文件中的代码复制进来，点击部署
回到前面的worker的代码编辑页面，即前面步骤2的这个：
![图片展示了Cloudflare的worker代码编辑页面。左侧是代码编辑区域，显示有部分代码。右侧为预览区域，显示一个链接：https://ai - bluesprintbook.workers.dev/ 。根据上下文，这是将网页产品部署到Cloudflare的步骤5相关内容，需把左侧代码全部删除，将worker.js文件中的代码复制粘贴进去，然后点击右上角的“部署”，之后还要把右侧链接复制下来，图片为该步骤提供了操作界面参考。](/courses/aicoding/img/GpFKb