进入操作模式
函数和Pages+MCP:一键实现全球部署

函数和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 运维以及全球边缘安全防护,有效解决传统开发模式中效率低、成本高、风险大的核心问题,适用于追求高效、低成本与高安全性的开发团队。

方案架构

方案提供的默认设置完成部署后在阿里云上搭建的网站运行环境如下图所示。实际部署时您可以根据自身需求修改配置。

image

本方案技术架构包括以下基础设施和云服务:

  • 边缘安全加速 ESA:基于 ESA 函数和Pages的全球部署、超低延迟等特性,为游戏提供运行环境。

  • 阿里云百炼平台:用于理解用户需求,智能生成高质量代码,快速实现应用构建。

  • 一个域名:用于让用户通过自己配置的域名访问应用。

  • 阿里云云解析 DNS:用于将域名解析到ESA函数和Pages,实现私有域名进行应用访问。

部署准备

开始部署前,请按以下指引完成账号申请、账号充值等准备工作。

准备账号

  1. 如果您还没有阿里云账号,请访问阿里云账号注册页面,根据页面提示完成注册。阿里云账号是您使用云资源的付费实体,因此是部署方案的必要前提。

  2. 为阿里云账号充值。本方案的云资源支持按量付费,且默认设置均采用按量付费引导操作。如果确定任何一个云资源采用按量付费方式部署,账户余额都必须大于等于100元。

相关软件

  1. 安装Node.js,您需要前往Node.js官方网站,根据您的操作系统,选择 v22.20.0(LTS) 的版本下载并安装。

  2. 安装VS Code,您需要前往Visual Studio Code官方网站,根据您的操作系统,下载并安装。

开通服务

3

开通百炼模型服务

登录阿里云百炼大模型服务平台,阅读并同意协议后,将自动开通阿里云百炼,如果未弹出服务协议,则表示您已经开通。

  • 当您首次开通阿里云百炼时,平台会自动为您发放各模型的新人专属免费额度。详情请参见新人免费额度。

    说明

    仅华北2(北京)地域模型享有免费额度,其他地域无免费额度。

  • 如果开通服务时提示“您尚未进行实名认证”,请先进行个人实名认证。

开通 ESA 函数和Pages服务

说明

如果您已经开通了函数和Pages服务,可以跳过此步骤。

  1. 登录ESA控制台,在左侧导航栏选择边缘计算 > 函数和Pages。

  2. 单击页面的立即开通按钮,根据指引完成开通,初次开通默认为免费模式,您可以根据实际需求,切换为按量付费模式。

    免费与付费模式的项目功能对比请参考下表:

    项目

    免费模式

    付费模式

    请求和并发数

    • 每账号每天10万的请求数限制。

    • 每个函数全网1000请求并发数上限。

    无请求和并发数限制。

    日志投递

    不支持

    支持

    每账号函数数量

    20

    100

    每函数版本数量

    5

    20

    每函数站点绑定数量

    20

    100

    SLA

    无

    99.95%

    说明

    当使用免费模式时,我们将限制您的账户单日函数请求数量至10万个,如果超过该限制,请求将直接返回503,直至下一日零点恢复。

配置AI编程工具Cline

3

获取百炼API Key

  1. 前往阿里云百炼的API Key页面。

  2. 在 API-Key 页签下,创建或查看 API Key。

    重要
    1. 子账号需要通过主账号完成授权后再去创建 API Key。

    2. 请不要将 API Key 以任何方式公开,避免因未经授权的使用造成安全风险或资金损失。

  3. 单击 API Key 列中的image,复制 API Key。

在VS Code中安装并配置 Cline

如果您还没有安装VS Code,您需要前往Visual Studio Code官方网站,根据您的操作系统,选择相应的版本下载并安装。

  1. 在VS Code的Extensions中,搜索Cline,并根据指引完成安装。

    image

  2. 打开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。

    image

  3. 在Cline设置页面确认模型配置无误,单击Done,完成配置。

配置 ESA MCP Server

5

创建RAM用户并授权

创建RAM用户
  1. 使用阿里云账号(主账号)或RAM管理员登录RAM控制台,单击创建用户。

    image

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

    image

  3. 单击确定,根据界面提示,完成安全验证。

  4. 单击下载 CSV 文件,将AccessKey ID和AccessKey Secret保存至本地。

    重要

    请务必保存好CSV文件,页面关闭后无法再次获取AccessKey ID和AccessKey Secret。

    image

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

    image

  2. 在新增授权 > 权限策略中搜索AliyunESAFullAccess权限并勾选,然后单击确认新增授权。

    image

在Cline中配置 ESA MCP Server

  1. 在VS Code中选择Cline插件,单击image,选择Configure > Configure MCP Servers,打开cline_mcp_settings.json文件。

    image

  2. 清空原有的代码,并将下面的配置代码复制到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"
          }
        }
      }
    }
  3. 使用上一步申请的AccessKey ID和AccessKey Secret分别替换ALIBABA_CLOUD_ACCESS_KEY_ID和ALIBABA_CLOUD_ACCESS_KEY_SECRET的值。使用快捷键Ctrl + S(Windows/Linux)或command + S(Mac)保存配置。

    image

  4. 保存后Cline中MCP Servers的Installed列表中会出现esa-mcp-server服务,等待状态显示为绿色,表示ESA MCP Server配置成功。单击 Done 完成配置。

    image

  5. MCP配置完成后,在对话框右上角打开Auto-approve Settings勾选Use the browser和Use MCP servers。

    image

生成并部署游戏代码

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(授权许可)按钮,即可完成部署。

1-p954654

(可选)配置私有域名访问

说明

如果您仅想体验方案,可以跳过此步骤,无需申请域名和 ESA 接入操作。

如果您想要通过自己的域名访问应用,您只需要将域名接入到ESA并关联函数和Pages即可。

域名申请和备案

域名接入ESA

第一步:添加站点

在开始站点接入前,您需要先将待接入站点的根域名添加至ESA中。

  1. 在ESA控制台,选择站点管理,单击新增站点。

  2. 输入您要接入站点的根域名,单击下一步。

    image

  3. 在选择区域和接入方式页面,根据您的实际需求选择对应的区域,并在接入方式处选择CNAME方式,单击下一步。

    image

  4. 在选择套餐类型页面,可以通过新购套餐和绑定可选套餐两种方式为站点选择适合您的套餐,按照控制台指引完成套餐订购。

第二步:验证域名归属权

首次将域名添加到ESA后,为保证可以正常为您提供服务,您需要先完成域名归属权验证,验证通过后您再次添加该域名或子域名时,无需再次验证。

  1. 在左侧导航栏,单击站点概况,单击image复制ESA为您提供的TXT记录。该记录用于验证域名归属权。 image

  2. 在控制台中选择对应服务商,并根据复制的信息,为指定域名配置TXT类型解析记录。

    说明

    获取其他DNS服务商的配置指南,您可以前往验证域名归属权,若仍无法找到对应的服务商,您需要咨询对应的DNS服务商。

    image

  3. 返回ESA控制台,单击点击验证,即可完成验证。

    说明

    DNS 记录配置后可能需要数分钟至数小时后方可生效,如遇验证失败请稍等后再尝试。

配置函数和Pages

  1. 在函数和Pages控制台,找到MCP创建好的函数和Pages并单击。

  2. 选择域名 > 域名绑定 > 添加域名,输入您想使用的子域名前缀(例如test),选择完整的子域名,单击确定,完成触发器添加。

    image

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

    image

  4. 在DNS记录管理页面,单击CNAME列的image复制域名对应的CNAME值。

    image

配置云解析 DNS

  1. 登录云解析DNS控制台。

  2. 在左侧导航栏单击公网DNS解析 > 权威域名解析,在域名列表中找到目标域名,单击右侧操作列中解析设置。

  3. 在域名解析设置页签中点击添加记录,填写域名解析信息,然后单击确定。

    配置项

    说明

    示例值

    记录类型

    选择域名指向的类型。

    CNAME

    主机记录

    根据域名前缀填写主机记录。

    test

    记录值

    填写上一步中复制的CNAME值。

    test.example.com.a1.initvv.com

    TTL

    域名的更新周期,保留默认值。

    10分钟

  4. 刷新DNS记录页面,检查函数和Pages域名对应CNAME状态是否从待配置转变为已配置。

    说明

    DNS 解析记录的生效时间可能需要数分钟,配置完成之后,如果没有及时生效,请耐心等待。

方案验证

完成《2048》小游戏的生成后,您可以直接使用MCP返回的URL对游戏页面进行访问。

说明

如果您完成了配置私有域名访问,您也可以直接使用配置好的域名访问应用。

image

资源释放

2

清理资源

在本方案中,您创建了一个函数,一个百炼API Key,一组阿里云解析 DNS 记录,测试完方案后,您可以参考以下规则进行资源清理,避免继续产生费用:

  • 删除函数:

    在ESA控制台,在左侧导航栏单击边缘计算 > 函数和Pages,在函数和Pages页面单击目标函数。在基本信息页签中单击删除函数。

  • 删除阿里云百炼 API Key :

    进入 API Key 管理页面,找到目标 API Key 进行删除,删除后将无法通过该 API Key 调用阿里云百炼提供的模型。

  • 如果您配置了域名解析,请进行以下操作进行清理:

    1. 登录云解析DNS控制台。

    2. 在左侧菜单栏点击公网权威解析,在公网权威解析页面的域名列表中找到目标域名,在右侧操作列中点击解析设置。

    3. 在记录列表中找到目标记录,点击删除。