函数和Pages+MCP:一键实现全球部署
手动部署
15
https://www.aliyun.com/solution/tech-solution/edge-function-mcp-one-click-global-deployment
方案概览
本方案利用ESA函数和Pages和AI编程工具Cline,实现2048小游戏的快速开发与全球部署。通过 AI 编码、ESA MCP Server 自动化部署、函数和Pages Serverless 运维以及全球边缘安全防护,有效解决传统开发模式中效率低、成本高、风险大的核心问题,适用于追求高效、低成本与高安全性的开发团队。
方案架构
方案提供的默认设置完成部署后在阿里云上搭建的网站运行环境如下图所示。实际部署时您可以根据自身需求修改配置。
本方案技术架构包括以下基础设施和云服务:
边缘安全加速 ESA:基于 ESA 函数和Pages的全球部署、超低延迟等特性,为游戏提供运行环境。
阿里云百炼平台:用于理解用户需求,智能生成高质量代码,快速实现应用构建。
一个域名:用于让用户通过自己配置的域名访问应用。
阿里云云解析 DNS:用于将域名解析到ESA函数和Pages,实现私有域名进行应用访问。
部署准备
开始部署前,请按以下指引完成账号申请、账号充值等准备工作。
准备账号
如果您还没有阿里云账号,请访问阿里云账号注册页面,根据页面提示完成注册。阿里云账号是您使用云资源的付费实体,因此是部署方案的必要前提。
为阿里云账号充值。本方案的云资源支持按量付费,且默认设置均采用按量付费引导操作。如果确定任何一个云资源采用按量付费方式部署,账户余额都必须大于等于100元。
相关软件
安装Node.js,您需要前往Node.js官方网站,根据您的操作系统,选择 v22.20.0(LTS) 的版本下载并安装。
安装VS Code,您需要前往Visual Studio Code官方网站,根据您的操作系统,下载并安装。
开通服务
3
开通百炼模型服务
登录阿里云百炼大模型服务平台,阅读并同意协议后,将自动开通阿里云百炼,如果未弹出服务协议,则表示您已经开通。
开通 ESA 函数和Pages服务
如果您已经开通了函数和Pages服务,可以跳过此步骤。
登录ESA控制台,在左侧导航栏选择。
单击页面的立即开通按钮,根据指引完成开通,初次开通默认为免费模式,您可以根据实际需求,切换为按量付费模式。
免费与付费模式的项目功能对比请参考下表:
项目
免费模式
付费模式
请求和并发数
每账号每天10万的请求数限制。
每个函数全网1000请求并发数上限。
无请求和并发数限制。
日志投递
不支持
支持
每账号函数数量
20
100
每函数版本数量
5
20
每函数站点绑定数量
20
100
SLA
无
99.95%
说明当使用免费模式时,我们将限制您的账户单日函数请求数量至10万个,如果超过该限制,请求将直接返回503,直至下一日零点恢复。
配置AI编程工具Cline
3
获取百炼API Key
前往阿里云百炼的API Key页面。
在 API-Key 页签下,创建或查看 API Key。
重要子账号需要通过主账号完成授权后再去创建 API Key。
请不要将 API Key 以任何方式公开,避免因未经授权的使用造成安全风险或资金损失。
单击 API Key 列中的
,复制 API Key。
在VS Code中安装并配置 Cline
如果您还没有安装VS Code,您需要前往Visual Studio Code官方网站,根据您的操作系统,选择相应的版本下载并安装。
在VS Code的
Extensions中,搜索Cline,并根据指引完成安装。
打开Cline,单击use your own API key,配置大模型的API信息,完成后单击Let's go!。进入Cline设置页面。
API Provider:
OpenAI Compatible。Base URL:
https://dashscope.aliyuncs.com/compatible-mode/v1。API Key:上个步骤申请的API Key。
Model ID:推荐使用
qwen-max-latest。说明如果您想要使用其他模型,可以在阿里云百炼大模型服务平台中,获取对应的模型ID。

在Cline设置页面确认模型配置无误,单击Done,完成配置。
配置 ESA MCP Server
5
创建RAM用户并授权
创建RAM用户
使用阿里云账号(主账号)或RAM管理员登录RAM控制台,单击创建用户。

填写RAM用户的登录名称,并勾选控制台访问和使用永久AccessKey访问。

单击确定,根据界面提示,完成安全验证。
单击下载 CSV 文件,将AccessKey ID和AccessKey Secret保存至本地。
重要请务必保存好CSV文件,页面关闭后无法再次获取AccessKey ID和AccessKey Secret。

RAM用户授权
返回RAM 用户页面,找到上一步创建的RAM用户,单击添加权限。

在中搜索
AliyunESAFullAccess权限并勾选,然后单击确认新增授权。
在Cline中配置 ESA MCP Server
在VS Code中选择Cline插件,单击
,选择,打开cline_mcp_settings.json文件。
清空原有的代码,并将下面的配置代码复制到
cline_mcp_settings.json配置文件中。{ "mcpServers": { "mcp-server-esa": { "command": "npx", "args": ["-y", "mcp-server-esa"], "env": { "ALIBABA_CLOUD_ACCESS_KEY_ID": "AccessKey ID", "ALIBABA_CLOUD_ACCESS_KEY_SECRET": "AccessKey Secret" } } } }使用上一步申请的AccessKey ID和AccessKey Secret分别替换
ALIBABA_CLOUD_ACCESS_KEY_ID和ALIBABA_CLOUD_ACCESS_KEY_SECRET的值。使用快捷键Ctrl + S(Windows/Linux)或command + S(Mac)保存配置。
保存后Cline中
MCP Servers的Installed列表中会出现esa-mcp-server服务,等待状态显示为绿色,表示ESA MCP Server配置成功。单击 Done 完成配置。
MCP配置完成后,在对话框右上角打开Auto-approve Settings勾选Use the browser和Use MCP servers。

生成并部署游戏代码
2
一切准备就绪,这时我们向Cline提出我们的需求:
使用html为我生成一个网页版2048小游戏,要求如下:
1.功能完整:
1.1 游戏机制
1.1.1 使用键盘方向键进行方块移动操作。
1.1.2 4x4网格布局,支持数字方块滑动合并(上下左右全方向)。
1.1.3 实时得分计算与最高分记录(localStorage持久化)。
1.1.4 胜利检测(出现2048方块)与失败检测(无可用移动)。
1.1.5 初始随机生成2个方块(2或4),每次移动后新增方块。
1.1.6方块渐变色系(参考原版2048配色方案),实时状态面板:当前得分/最高分/步数。
1.2 确保游戏组件完整,且程序可以正常运行。
1.3 确保游戏在页面中可以正常渲染并运行,避免因意外错误导致空白页或卡顿。
2. 稳定性与容错处理:
2.1 自动检测并处理游戏初始化过程中可能出现的错误。
2.2 与MCP服务建立连接确保与MCP建立链接且程序可以正常运行。
2.3 自动处理生成过程中出现的问题。
3. 部署到阿里云 ESA 的 Routine 上:
将该游戏部署为一个静态网页应用,托管于阿里云 ESA 的 Routine 运行环境中。
4. 配置参数如下:
name: "game"
code: 嵌入你刚刚生成的完整2048游戏代码。
5. 输出结果要求:
提供最终部署后的访问地址 URL(使用ESA默认提供的域名)。提示词中name用来设置最终生成的函数和Pages名称,您可以根据实际需求进行修改。仅支持小写英文、数字和中划线,且必须以小写英文开始,长度不能小于2个字符。函数名创建后无法修改。
大模型会根据我们的需求,调用ESA MCP Server提供的各种tools,这些tools的调用将完成函数创建、代码提交、全球部署等操作,并最终返回一个可以通过公网访问的URL地址。
在生成过程中,根据Cline的提示,选择Save(代码保存)以及后续的Approve(授权许可)按钮,即可完成部署。

(可选)配置私有域名访问
如果您仅想体验方案,可以跳过此步骤,无需申请域名和 ESA 接入操作。
如果您想要通过自己的域名访问应用,您只需要将域名接入到ESA并关联函数和Pages即可。
域名申请和备案
创建域名信息模板并实名认证
如果您已经拥有域名,可跳过此步骤。如果您使用当前部署的服务器去申请域名备案,因备案要求,需要将云服务ECS实例从按量计费转为包年包月,具体请参考按量付费转包年包月。
注册域名
查询域名。
登录阿里云万网。
在阿里云域名注册页面的搜索框中,搜索您想要注册的域名以及域名后缀,单击查询域名。
选择域名。在心仪域名右侧,单击立即注册。
确认订单信息。
在确认订单页面,选择域名的购买年限。
说明若您注册的是“.gov.cn”后缀域名,域名持有者类型只能为企业。
选择已完成实名认证的域名持有者信息模板。
选择支付方式后,单击立即支付。
ICP备案前准备
提交ICP备案
填写信息进行校验。
在阿里云ICP代备案管理系统,根据界面提示,按要求填写主办单位信息和网站/App信息等,系统将根据您所填信息,自动校验是否可以进行ICP备案。
阿里云初审。
提交ICP备案初审订单后,订单状态为阿里云审核中,阿里云将会在1个工作日左右进行审核,具体以实际审核时间为准。
(可选)邮寄资料。
说明阿里云初审后如果需要您邮寄资料,审核人员会通知您。如果您在初审时未收到需要邮寄资料的相关通知,则无需邮寄资料,ICP备案流程将进入下一个阶段。
工信部短信核验。
管局审核。
订提交管局后订单为待提交管局状态,阿里云审核专员将会在1个工作日左右将您的订单提交至管局审核,具体以实际提交时间为准
各省管局审核时间不同,实际审核时长会根据ICP备案场景有所不同,一般为1~20个工作日,具体以实际审核时间为准。管局审核通过后表示您的ICP备案即已完成,审核结果会发送至您的手机和邮箱。
ICP备案后操作
添加ICP备案号及版本所有 。
ICP备案成功后,您需要在互联网信息服务底部添加备案号和跳转至工信部的链接,以便访问者查询确认ICP备案信息。部分省份管局要求,例如江苏省,需要在互联网信息服务下方添加版权所有。详情请参见添加ICP备案号和版权处理。
(可选)ICP许可证。
如果您的互联网信息服务属于经营性网站或App(通过互联网向上网用户有偿提供信息或者网页制作等服务活动),则需在ICP备案后申请经营性ICP许可证。详情请参见经营性备案。
说明弹性Web托管服务器不支持经营性备案。
公安联网备案。
依据 《计算机信息网络国际联网安全保护管理办法》相关规定,各互联网信息服务在工信部备案成功后,需在开通之日起30日内登录全国互联网安全管理服务平台提交公安联网备案申请。详情请参见公安联网备案及注销。
域名接入ESA
第一步:添加站点
在开始站点接入前,您需要先将待接入站点的根域名添加至ESA中。
第二步:验证域名归属权
首次将域名添加到ESA后,为保证可以正常为您提供服务,您需要先完成域名归属权验证,验证通过后您再次添加该域名或子域名时,无需再次验证。
在左侧导航栏,单击站点概况,单击
复制ESA为您提供的TXT记录。该记录用于验证域名归属权。 
在控制台中选择对应服务商,并根据复制的信息,为指定域名配置TXT类型解析记录。
说明获取其他DNS服务商的配置指南,您可以前往验证域名归属权,若仍无法找到对应的服务商,您需要咨询对应的DNS服务商。

返回ESA控制台,单击点击验证,即可完成验证。
说明DNS 记录配置后可能需要数分钟至数小时后方可生效,如遇验证失败请稍等后再尝试。
配置函数和Pages
在函数和Pages控制台,找到MCP创建好的函数和Pages并单击。
选择,输入您想使用的子域名前缀(例如test),选择完整的子域名,单击确定,完成触发器添加。

在域名绑定列表中选择创建好的域名,单击查看DNS记录。

在DNS记录管理页面,单击CNAME列的
复制域名对应的CNAME值。
配置云解析 DNS
登录云解析DNS控制台。
在左侧导航栏单击,在域名列表中找到目标域名,单击右侧操作列中解析设置。
在域名解析设置页签中点击添加记录,填写域名解析信息,然后单击确定。
配置项
说明
示例值
记录类型
选择域名指向的类型。
CNAME
主机记录
根据域名前缀填写主机记录。
test
记录值
填写上一步中复制的CNAME值。
test.example.com.a1.initvv.com
TTL
域名的更新周期,保留默认值。
10分钟
刷新DNS记录页面,检查函数和Pages域名对应CNAME状态是否从待配置转变为已配置。
说明DNS 解析记录的生效时间可能需要数分钟,配置完成之后,如果没有及时生效,请耐心等待。
方案验证
完成《2048》小游戏的生成后,您可以直接使用MCP返回的URL对游戏页面进行访问。
如果您完成了配置私有域名访问,您也可以直接使用配置好的域名访问应用。

资源释放
2
清理资源
在本方案中,您创建了一个函数,一个百炼API Key,一组阿里云解析 DNS 记录,测试完方案后,您可以参考以下规则进行资源清理,避免继续产生费用:
删除函数:
在ESA控制台,在左侧导航栏单击,在函数和Pages页面单击目标函数。在基本信息页签中单击删除函数。
删除阿里云百炼 API Key :
进入 API Key 管理页面,找到目标 API Key 进行删除,删除后将无法通过该 API Key 调用阿里云百炼提供的模型。
如果您配置了域名解析,请进行以下操作进行清理:
登录云解析DNS控制台。
在左侧菜单栏点击公网权威解析,在公网权威解析页面的域名列表中找到目标域名,在右侧操作列中点击解析设置。
在记录列表中找到目标记录,点击删除。




